@instructure/ui-table 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-table

package/es/Table/v2/Row/index.js

@@ -1,4 +1,3 @@
-var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -23,10 +22,10 @@ var _dec, _class;
  * SOFTWARE.
  */
 
-import { Component, Children, isValidElement } from 'react';
+import { forwardRef, useContext, Children, isValidElement } from 'react';
 import { omitProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view/latest';
-import { withStyleNew } from '@instructure/emotion';
+import { useStyleNew } from '@instructure/emotion';
 import generateStyle from './styles.js';
 import { allowedProps } from './props.js';
 import TableContext from '../TableContext.js';
@@ -38,50 +37,54 @@ id: Table.Row
 ---
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-let Row = (_dec = withStyleNew(generateStyle), _dec(_class = class Row extends Component {
-  static displayName = 'Row';
-  static componentId = 'Table.Row';
-  static contextType = TableContext;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    children: null
+const Row = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    setHoverStateTo,
+    themeOverride
+  } = props;
+  const {
+    isStacked,
+    hover,
+    headers
+  } = useContext(TableContext);
+  const styles = useStyleNew({
+    generateStyle,
+    themeOverride,
+    params: {
+      isStacked,
+      hover,
+      setHoverStateTo
+    },
+    componentId: 'TableRow',
+    displayName: 'Row'
+  });
+  const handleElementRef = el => {
+    if (typeof ref === 'function') {
+      ref(el);
+    } else if (ref) {
+      const refObject = ref;
+      refObject.current = el;
+    }
   };
-  componentDidMount() {
-    this.props.makeStyles?.({
-      isStacked: this.context.isStacked,
-      hover: this.context.hover
-    });
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.({
-      isStacked: this.context.isStacked,
-      hover: this.context.hover
-    });
-  }
-  render() {
-    const {
-      children,
-      styles
-    } = this.props;
-    const isStacked = this.context.isStacked;
-    const headers = this.context.headers;
-    return _jsx(View, {
-      ...View.omitViewProps(omitProps(this.props, Row.allowedProps), Row),
-      as: isStacked ? 'div' : 'tr',
-      css: styles?.row,
-      role: isStacked ? 'row' : undefined,
-      children: Children.toArray(children).filter(Boolean).map((child, index) => {
-        if (/*#__PURE__*/isValidElement(child)) {
-          return safeCloneElement(child, {
-            key: child.props.name,
-            // used by `Cell` to render its column title in `stacked` layout
-            header: headers && headers[index]
-          });
-        }
-        return child;
-      })
-    });
-  }
-}) || _class);
+  return _jsx(View, {
+    ...View.omitViewProps(omitProps(props, allowedProps), Row),
+    as: isStacked ? 'div' : 'tr',
+    css: styles?.row,
+    role: isStacked ? 'row' : undefined,
+    elementRef: handleElementRef,
+    children: Children.toArray(children).filter(Boolean).map((child, index) => {
+      if (/*#__PURE__*/isValidElement(child)) {
+        return safeCloneElement(child, {
+          key: child.props.name,
+          // used by `Cell` to render its column title in `stacked` layout
+          header: headers && headers[index]
+        });
+      }
+      return child;
+    })
+  });
+});
+Row.displayName = 'Row';
 export default Row;
 export { Row };

package/es/Table/v2/Row/styles.js

@@ -28,15 +28,15 @@
  * ---
  * Generates the style object from the theme and provided additional information
  * @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 (not used in this component)
- * @param  {Object} extraArgs the state of the component, the style is applied to
+ * @param  {Object} params the props and Table context values the style depends on
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props, _sharedTokens, extraArgs) => {
+const generateStyle = (componentTheme, params) => {
   const {
+    isStacked,
+    hover,
     setHoverStateTo
-  } = props;
+  } = params;
   const hoverStyles = {
     borderLeftColor: componentTheme.hoverBorderColor,
     borderRightColor: componentTheme.hoverBorderColor
@@ -53,14 +53,14 @@ const generateStyle = (componentTheme, props, _sharedTokens, extraArgs) => {
       borderBottomStyle: 'solid',
       borderBottomWidth: '0.0625rem',
       borderBottomColor: componentTheme.borderColor,
-      ...((setHoverStateTo ?? extraArgs.hover) && {
+      ...((setHoverStateTo ?? hover) && {
         borderLeft: '0.1875rem solid transparent',
         borderRight: '0.1875rem solid transparent',
         ...(setHoverStateTo === true ? hoverStyles : {
           '&:hover': hoverStyles
         })
       }),
-      ...(extraArgs.isStacked && {
+      ...(isStacked && {
         padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`
       })
     }

package/lib/Table/v2/Row/index.js

@@ -14,7 +14,6 @@ var _styles = _interopRequireDefault(require("./styles.js"));
 var _props = require("./props.js");
 var _TableContext = _interopRequireDefault(require("../TableContext.js"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -38,55 +37,59 @@ var _dec, _class;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 /**
 ---
 parent: Table
 id: Table.Row
 ---
-**/
-let Row = exports.Row = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class Row extends _react.Component {
-  static displayName = 'Row';
-  static componentId = 'Table.Row';
-  static contextType = _TableContext.default;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    children: null
+**/const Row = exports.Row = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    children,
+    setHoverStateTo,
+    themeOverride
+  } = props;
+  const {
+    isStacked,
+    hover,
+    headers
+  } = (0, _react.useContext)(_TableContext.default);
+  const styles = (0, _emotion.useStyleNew)({
+    generateStyle: _styles.default,
+    themeOverride,
+    params: {
+      isStacked,
+      hover,
+      setHoverStateTo
+    },
+    componentId: 'TableRow',
+    displayName: 'Row'
+  });
+  const handleElementRef = el => {
+    if (typeof ref === 'function') {
+      ref(el);
+    } else if (ref) {
+      const refObject = ref;
+      refObject.current = el;
+    }
   };
-  componentDidMount() {
-    this.props.makeStyles?.({
-      isStacked: this.context.isStacked,
-      hover: this.context.hover
-    });
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.({
-      isStacked: this.context.isStacked,
-      hover: this.context.hover
-    });
-  }
-  render() {
-    const {
-      children,
-      styles
-    } = this.props;
-    const isStacked = this.context.isStacked;
-    const headers = this.context.headers;
-    return (0, _jsxRuntime.jsx)(_latest.View, {
-      ..._latest.View.omitViewProps((0, _omitProps.omitProps)(this.props, Row.allowedProps), Row),
-      as: isStacked ? 'div' : 'tr',
-      css: styles?.row,
-      role: isStacked ? 'row' : undefined,
-      children: _react.Children.toArray(children).filter(Boolean).map((child, index) => {
-        if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
-          return (0, _safeCloneElement.safeCloneElement)(child, {
-            key: child.props.name,
-            // used by `Cell` to render its column title in `stacked` layout
-            header: headers && headers[index]
-          });
-        }
-        return child;
-      })
-    });
-  }
-}) || _class);
+  return (0, _jsxRuntime.jsx)(_latest.View, {
+    ..._latest.View.omitViewProps((0, _omitProps.omitProps)(props, _props.allowedProps), Row),
+    as: isStacked ? 'div' : 'tr',
+    css: styles?.row,
+    role: isStacked ? 'row' : undefined,
+    elementRef: handleElementRef,
+    children: _react.Children.toArray(children).filter(Boolean).map((child, index) => {
+      if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+        return (0, _safeCloneElement.safeCloneElement)(child, {
+          key: child.props.name,
+          // used by `Cell` to render its column title in `stacked` layout
+          header: headers && headers[index]
+        });
+      }
+      return child;
+    })
+  });
+});
+Row.displayName = 'Row';
 var _default = exports.default = Row;

package/lib/Table/v2/Row/styles.js

@@ -34,15 +34,15 @@ exports.default = void 0;
  * ---
  * Generates the style object from the theme and provided additional information
  * @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 (not used in this component)
- * @param  {Object} extraArgs the state of the component, the style is applied to
+ * @param  {Object} params the props and Table context values the style depends on
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props, _sharedTokens, extraArgs) => {
+const generateStyle = (componentTheme, params) => {
   const {
+    isStacked,
+    hover,
     setHoverStateTo
-  } = props;
+  } = params;
   const hoverStyles = {
     borderLeftColor: componentTheme.hoverBorderColor,
     borderRightColor: componentTheme.hoverBorderColor
@@ -59,14 +59,14 @@ const generateStyle = (componentTheme, props, _sharedTokens, extraArgs) => {
       borderBottomStyle: 'solid',
       borderBottomWidth: '0.0625rem',
       borderBottomColor: componentTheme.borderColor,
-      ...((setHoverStateTo ?? extraArgs.hover) && {
+      ...((setHoverStateTo ?? hover) && {
         borderLeft: '0.1875rem solid transparent',
         borderRight: '0.1875rem solid transparent',
         ...(setHoverStateTo === true ? hoverStyles : {
           '&:hover': hoverStyles
         })
       }),
-      ...(extraArgs.isStacked && {
+      ...(isStacked && {
         padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`
       })
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "11.7.7",
+  "version": "11.7.8-snapshot-3",
   "description": "A styled HTML table component",
   "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/emotion": "11.7.7",
-    "@instructure/shared-types": "11.7.7",
-    "@instructure/ui-a11y-content": "11.7.7",
-    "@instructure/ui-icons": "11.7.7",
-    "@instructure/ui-react-utils": "11.7.7",
-    "@instructure/ui-simple-select": "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-content": "11.7.8-snapshot-3",
+    "@instructure/ui-icons": "11.7.8-snapshot-3",
+    "@instructure/ui-simple-select": "11.7.8-snapshot-3",
+    "@instructure/ui-utils": "11.7.8-snapshot-3",
+    "@instructure/ui-react-utils": "11.7.8-snapshot-3",
+    "@instructure/ui-themes": "11.7.8-snapshot-3",
+    "@instructure/ui-view": "11.7.8-snapshot-3"
   },
   "devDependencies": {
     "vitest": "^5.0.0",
-    "@instructure/ui-axe-check": "11.7.7",
-    "@instructure/ui-color-utils": "11.7.7",
-    "@instructure/ui-babel-preset": "11.7.7"
+    "@instructure/ui-axe-check": "11.7.8-snapshot-3",
+    "@instructure/ui-color-utils": "11.7.8-snapshot-3",
+    "@instructure/ui-babel-preset": "11.7.8-snapshot-3"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Table/v2/Row/index.tsx

@@ -23,9 +23,9 @@
  */
 
 import {
-  Component,
+  forwardRef,
+  useContext,
   Children,
-  ContextType,
   isValidElement,
   type ReactElement
 } from 'react'
@@ -33,7 +33,7 @@ import {
 import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view/latest'
 
-import { withStyleNew } from '@instructure/emotion'
+import { useStyleNew } from '@instructure/emotion'
 
 import generateStyle from './styles.js'
 
@@ -47,60 +47,52 @@ parent: Table
 id: Table.Row
 ---
 **/
-@withStyleNew(generateStyle)
-class Row extends Component<TableRowProps> {
-  static displayName = 'Row'
-  static readonly componentId = 'Table.Row'
-  static contextType = TableContext
-  declare context: ContextType<typeof TableContext>
-  static allowedProps = allowedProps
+const Row = forwardRef<HTMLElement, TableRowProps>((props, ref) => {
+  const { children, setHoverStateTo, themeOverride } = props
+  const { isStacked, hover, headers } = useContext(TableContext)
 
-  static defaultProps = {
-    children: null
-  }
-
-  componentDidMount() {
-    this.props.makeStyles?.({
-      isStacked: this.context.isStacked,
-      hover: this.context.hover
-    })
-  }
+  const styles = useStyleNew({
+    generateStyle,
+    themeOverride,
+    params: { isStacked, hover, setHoverStateTo },
+    componentId: 'TableRow',
+    displayName: 'Row'
+  })
 
-  componentDidUpdate() {
-    this.props.makeStyles?.({
-      isStacked: this.context.isStacked,
-      hover: this.context.hover
-    })
+  const handleElementRef = (el: HTMLElement | null) => {
+    if (typeof ref === 'function') {
+      ref(el)
+    } else if (ref) {
+      const refObject = ref as React.MutableRefObject<HTMLElement | null>
+      refObject.current = el
+    }
   }
 
-  render() {
-    const { children, styles } = this.props
-    const isStacked = this.context.isStacked
-    const headers = this.context.headers
+  return (
+    <View
+      {...View.omitViewProps(omitProps(props, allowedProps), Row)}
+      as={isStacked ? 'div' : 'tr'}
+      css={styles?.row}
+      role={isStacked ? 'row' : undefined}
+      elementRef={handleElementRef}
+    >
+      {Children.toArray(children)
+        .filter(Boolean)
+        .map((child, index) => {
+          if (isValidElement(child)) {
+            return safeCloneElement(child, {
+              key: (child as ReactElement<any>).props.name,
+              // used by `Cell` to render its column title in `stacked` layout
+              header: headers && headers[index]
+            })
+          }
+          return child
+        })}
+    </View>
+  )
+})
 
-    return (
-      <View
-        {...View.omitViewProps(omitProps(this.props, Row.allowedProps), Row)}
-        as={isStacked ? 'div' : 'tr'}
-        css={styles?.row}
-        role={isStacked ? 'row' : undefined}
-      >
-        {Children.toArray(children)
-          .filter(Boolean)
-          .map((child, index) => {
-            if (isValidElement(child)) {
-              return safeCloneElement(child, {
-                key: (child as ReactElement<any>).props.name,
-                // used by `Cell` to render its column title in `stacked` layout
-                header: headers && headers[index]
-              })
-            }
-            return child
-          })}
-      </View>
-    )
-  }
-}
+Row.displayName = 'Row'
 
 export default Row
 export { Row }

package/src/Table/v2/Row/props.ts

@@ -24,7 +24,7 @@
 
 import React from 'react'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
-import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
+import type { ComponentStyle, NewThemeOverrideProp } from '@instructure/emotion'
 import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type TableRowOwnProps = {
@@ -57,7 +57,7 @@ type PropKeys = keyof TableRowOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableRowProps = TableRowOwnProps &
-  WithStyleProps<ReturnType<NewComponentTypes['TableRow']>, TableRowStyle> &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['TableRow']>> &
   OtherHTMLAttributes<TableRowOwnProps>
 
 type TableRowStyle = ComponentStyle<'row'>

package/src/Table/v2/Row/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { TableRowProps, TableRowStyle } from './props'
 
 /**
@@ -31,18 +31,18 @@ import type { TableRowProps, TableRowStyle } from './props'
  * ---
  * Generates the style object from the theme and provided additional information
  * @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 (not used in this component)
- * @param  {Object} extraArgs the state of the component, the style is applied to
+ * @param  {Object} params the props and Table context values the style depends on
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['TableRow']>,
-  props: TableRowProps,
-  _sharedTokens: SharedTokens,
-  extraArgs: { isStacked: boolean; hover: boolean }
+  params: {
+    isStacked: boolean
+    hover: boolean
+    setHoverStateTo: TableRowProps['setHoverStateTo']
+  }
 ): TableRowStyle => {
-  const { setHoverStateTo } = props
+  const { isStacked, hover, setHoverStateTo } = params
 
   const hoverStyles = {
     borderLeftColor: componentTheme.hoverBorderColor,
@@ -62,13 +62,13 @@ const generateStyle = (
       borderBottomWidth: '0.0625rem',
       borderBottomColor: componentTheme.borderColor,
 
-      ...((setHoverStateTo ?? extraArgs.hover) && {
+      ...((setHoverStateTo ?? hover) && {
         borderLeft: '0.1875rem solid transparent',
         borderRight: '0.1875rem solid transparent',
         ...(setHoverStateTo === true ? hoverStyles : { '&:hover': hoverStyles })
       }),
 
-      ...(extraArgs.isStacked && {
+      ...(isStacked && {
         padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`
       })
     }