@instructure/ui-link 11.7.7 → 11.7.8-snapshot-3

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.8-snapshot-3](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8-snapshot-3) (2026-09-28)
+
+### Bug Fixes
+
+* **ui-link,ui-breadcrumb,ui-table:** avoid layout shifts on SSR hydration ([d90cd09](https://github.com/instructure/instructure-ui/commit/d90cd09fcf63775879830a1809cd5169acf91b5f))
+
+
 ## [11.7.7](https://github.com/instructure/instructure-ui/compare/v11.7.6...v11.7.7) (2026-09-23)
 
 **Note:** Version bump only for package @instructure/ui-link

package/es/Link/v2/index.js

@@ -25,7 +25,6 @@ var _dec, _class;
 
 import { Children, Component } from 'react';
 import { View } from '@instructure/ui-view/latest';
-import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { isActiveElement, findFocusable } from '@instructure/ui-dom-utils';
 import { getElementType, getInteraction, matchComponentTypes, passthroughProps } from '@instructure/ui-react-utils';
 import { combineDataCid, safeLinkProps } from '@instructure/ui-utils';
@@ -56,27 +55,11 @@ let Link = (_dec = withStyleNew(generateStyle), _dec(_class = class Link extends
   };
   ref = null;
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStyleProps());
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStyleProps());
+    this.props.makeStyles?.();
   }
-  makeStyleProps = () => {
-    const {
-      variant,
-      size: sizeProp
-    } = this.props;
-    let size = sizeProp;
-    if ((variant === 'inline' || variant === 'standalone') && !sizeProp) {
-      size = 'medium';
-    }
-    return {
-      containsTruncateText: this.containsTruncateText,
-      hasVisibleChildren: this.hasVisibleChildren,
-      variant,
-      size
-    };
-  };
   handleElementRef = el => {
     const {
       elementRef
@@ -156,9 +139,6 @@ let Link = (_dec = withStyleNew(generateStyle), _dec(_class = class Link extends
   get focusable() {
     return findFocusable(this.ref);
   }
-  get hasVisibleChildren() {
-    return hasVisibleChildren(this.props.children);
-  }
   get role() {
     const {
       role,

package/es/Link/v2/styles.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { calcFocusOutlineStyles, calcSpacingFromShorthand } from '@instructure/emotion';
 /**
  * ---
@@ -31,22 +32,20 @@ import { calcFocusOutlineStyles, calcSpacingFromShorthand } from '@instructure/e
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
  * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props, sharedTokens, state = {}) => {
+const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
     renderIcon,
     iconPlacement = 'start',
     // TODO workaround needed for react 19 where defaultprops doesn't apply for some reasong
     color,
-    margin
+    margin,
+    variant,
+    children
   } = props;
-
-  // Get size and variant from state (passed from makeStyleProps) or fall back to props
-  const size = state.size ?? props.size;
-  const variant = state.variant ?? props.variant;
-  const hasVisibleChildren = state.hasVisibleChildren ?? false;
+  const size = !props.size && (variant === 'inline' || variant === 'standalone') ? 'medium' : props.size;
+  const hasVisibleContent = hasVisibleChildren(children);
   const isInverseStyle = color === 'link-inverse';
   const inlineLinkSizeStyles = {
     small: {
@@ -133,7 +132,7 @@ const generateStyle = (componentTheme, props, sharedTokens, state = {}) => {
     borderRadius: '0.125rem',
     // If icon is present, use flex to align icon with text
     // Use 'flex' for standalone variant (block-level), 'inline-flex' for inline variant
-    ...(renderIcon && hasVisibleChildren && {
+    ...(renderIcon && hasVisibleContent && {
       display: variant === 'standalone' ? 'flex' : 'inline-flex',
       alignItems: 'baseline'
     }),

package/lib/Link/v2/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Link = void 0;
 var _react = require("react");
 var _latest = require("@instructure/ui-view/latest");
-var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
 var _findFocusable = require("@instructure/ui-dom-utils/lib/findFocusable.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
@@ -67,27 +66,11 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
   };
   ref = null;
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStyleProps());
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStyleProps());
+    this.props.makeStyles?.();
   }
-  makeStyleProps = () => {
-    const {
-      variant,
-      size: sizeProp
-    } = this.props;
-    let size = sizeProp;
-    if ((variant === 'inline' || variant === 'standalone') && !sizeProp) {
-      size = 'medium';
-    }
-    return {
-      containsTruncateText: this.containsTruncateText,
-      hasVisibleChildren: this.hasVisibleChildren,
-      variant,
-      size
-    };
-  };
   handleElementRef = el => {
     const {
       elementRef
@@ -167,9 +150,6 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
   get focusable() {
     return (0, _findFocusable.findFocusable)(this.ref);
   }
-  get hasVisibleChildren() {
-    return (0, _hasVisibleChildren.hasVisibleChildren)(this.props.children);
-  }
   get role() {
     const {
       role,

package/lib/Link/v2/styles.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 var _emotion = require("@instructure/emotion");
 /*
  * The MIT License (MIT)
@@ -37,22 +38,20 @@ var _emotion = require("@instructure/emotion");
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
  * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props, sharedTokens, state = {}) => {
+const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
     renderIcon,
     iconPlacement = 'start',
     // TODO workaround needed for react 19 where defaultprops doesn't apply for some reasong
     color,
-    margin
+    margin,
+    variant,
+    children
   } = props;
-
-  // Get size and variant from state (passed from makeStyleProps) or fall back to props
-  const size = state.size ?? props.size;
-  const variant = state.variant ?? props.variant;
-  const hasVisibleChildren = state.hasVisibleChildren ?? false;
+  const size = !props.size && (variant === 'inline' || variant === 'standalone') ? 'medium' : props.size;
+  const hasVisibleContent = (0, _hasVisibleChildren.hasVisibleChildren)(children);
   const isInverseStyle = color === 'link-inverse';
   const inlineLinkSizeStyles = {
     small: {
@@ -139,7 +138,7 @@ const generateStyle = (componentTheme, props, sharedTokens, state = {}) => {
     borderRadius: '0.125rem',
     // If icon is present, use flex to align icon with text
     // Use 'flex' for standalone variant (block-level), 'inline-flex' for inline variant
-    ...(renderIcon && hasVisibleChildren && {
+    ...(renderIcon && hasVisibleContent && {
       display: variant === 'standalone' ? 'flex' : 'inline-flex',
       alignItems: 'baseline'
     }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-link",
-  "version": "11.7.7",
+  "version": "11.7.8-snapshot-3",
   "description": "A component for creating links",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,22 +15,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.7",
-    "@instructure/shared-types": "11.7.7",
-    "@instructure/emotion": "11.7.7",
-    "@instructure/ui-color-utils": "11.7.7",
-    "@instructure/ui-a11y-utils": "11.7.7",
-    "@instructure/ui-dom-utils": "11.7.7",
-    "@instructure/ui-icons": "11.7.7",
-    "@instructure/ui-react-utils": "11.7.7",
-    "@instructure/ui-themes": "11.7.7",
-    "@instructure/ui-utils": "11.7.7",
-    "@instructure/ui-view": "11.7.7"
+    "@instructure/console": "11.7.8-snapshot-3",
+    "@instructure/emotion": "11.7.8-snapshot-3",
+    "@instructure/shared-types": "11.7.8-snapshot-3",
+    "@instructure/ui-a11y-utils": "11.7.8-snapshot-3",
+    "@instructure/ui-color-utils": "11.7.8-snapshot-3",
+    "@instructure/ui-dom-utils": "11.7.8-snapshot-3",
+    "@instructure/ui-icons": "11.7.8-snapshot-3",
+    "@instructure/ui-utils": "11.7.8-snapshot-3",
+    "@instructure/ui-themes": "11.7.8-snapshot-3",
+    "@instructure/ui-view": "11.7.8-snapshot-3",
+    "@instructure/ui-react-utils": "11.7.8-snapshot-3"
   },
   "devDependencies": {
     "vitest": "^5.0.0",
-    "@instructure/ui-axe-check": "11.7.7",
-    "@instructure/ui-babel-preset": "11.7.7"
+    "@instructure/ui-axe-check": "11.7.8-snapshot-3",
+    "@instructure/ui-babel-preset": "11.7.8-snapshot-3"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Link/v2/index.tsx

@@ -25,7 +25,6 @@
 import { Children, Component } from 'react'
 
 import { View } from '@instructure/ui-view/latest'
-import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { isActiveElement, findFocusable } from '@instructure/ui-dom-utils'
 import {
   getElementType,
@@ -41,7 +40,7 @@ import { withStyleNew } from '@instructure/emotion'
 import generateStyle from './styles.js'
 
 import { allowedProps } from './props.js'
-import type { LinkProps, LinkState, LinkStyleProps } from './props'
+import type { LinkProps, LinkState } from './props'
 
 import type { ViewOwnProps } from '@instructure/ui-view/latest'
 
@@ -69,31 +68,11 @@ class Link extends Component<LinkProps, LinkState> {
   ref: Element | null = null
 
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStyleProps())
+    this.props.makeStyles?.()
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStyleProps())
-  }
-
-  makeStyleProps = (): LinkStyleProps & {
-    variant?: LinkProps['variant']
-    size?: LinkProps['size']
-  } => {
-    const { variant, size: sizeProp } = this.props
-
-    let size = sizeProp
-
-    if ((variant === 'inline' || variant === 'standalone') && !sizeProp) {
-      size = 'medium'
-    }
-
-    return {
-      containsTruncateText: this.containsTruncateText,
-      hasVisibleChildren: this.hasVisibleChildren,
-      variant,
-      size
-    }
+    this.props.makeStyles?.()
   }
 
   handleElementRef = (el: Element | null) => {
@@ -180,10 +159,6 @@ class Link extends Component<LinkProps, LinkState> {
     return findFocusable(this.ref)
   }
 
-  get hasVisibleChildren() {
-    return hasVisibleChildren(this.props.children)
-  }
-
   get role() {
     const { role, forceButtonRole, onClick } = this.props
 

package/src/Link/v2/props.ts

@@ -136,11 +136,6 @@ type LinkOwnProps = {
   size?: 'small' | 'medium' | 'large'
 }
 
-export type LinkStyleProps = {
-  containsTruncateText: boolean
-  hasVisibleChildren: boolean
-}
-
 type PropKeys = keyof LinkOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>

package/src/Link/v2/styles.ts

@@ -23,7 +23,8 @@
  */
 
 import { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
-import type { LinkProps, LinkStyle, LinkStyleProps } from './props'
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
+import type { LinkProps, LinkStyle } from './props'
 import {
   calcFocusOutlineStyles,
   calcSpacingFromShorthand
@@ -36,31 +37,27 @@ import {
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
  * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['Link']>,
   props: LinkProps,
-  sharedTokens: SharedTokens,
-  state: Partial<
-    LinkStyleProps & {
-      variant?: 'inline' | 'standalone'
-      size?: 'small' | 'medium' | 'large'
-    }
-  > = {}
+  sharedTokens: SharedTokens
 ): LinkStyle => {
   const {
     renderIcon,
     iconPlacement = 'start', // TODO workaround needed for react 19 where defaultprops doesn't apply for some reasong
     color,
-    margin
+    margin,
+    variant,
+    children
   } = props
 
-  // Get size and variant from state (passed from makeStyleProps) or fall back to props
-  const size = state.size ?? props.size
-  const variant = state.variant ?? props.variant
-  const hasVisibleChildren = state.hasVisibleChildren ?? false
+  const size =
+    !props.size && (variant === 'inline' || variant === 'standalone')
+      ? 'medium'
+      : props.size
+  const hasVisibleContent = hasVisibleChildren(children)
   const isInverseStyle = color === 'link-inverse'
 
   const inlineLinkSizeStyles = {
@@ -152,7 +149,7 @@ const generateStyle = (
     // If icon is present, use flex to align icon with text
     // Use 'flex' for standalone variant (block-level), 'inline-flex' for inline variant
     ...(renderIcon &&
-      hasVisibleChildren && {
+      hasVisibleContent && {
         display: variant === 'standalone' ? 'flex' : 'inline-flex',
         alignItems: 'baseline'
       }),