@instructure/ui-table 10.22.0 → 10.22.1-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.22.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.22.0...v10.22.1-snapshot-1) (2025-07-09)
+
+
+### Features
+
+* **ui-table:** add setHoverStateTo to control the hover state of the Table's row ([60001cd](https://github.com/instructure/instructure-ui/commit/60001cd8439ecacc5eb3dc3a5be1144f7f5faa31))
+
+
+
+
+
 # [10.22.0](https://github.com/instructure/instructure-ui/compare/v10.21.0...v10.22.0) (2025-07-04)
 
 **Note:** Version bump only for package @instructure/ui-table

package/es/Table/Row/props.js

@@ -24,7 +24,8 @@
 
 import PropTypes from 'prop-types';
 const propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  setHoverStateTo: PropTypes.bool
 };
-const allowedProps = ['children'];
+const allowedProps = ['children', 'setHoverStateTo'];
 export { propTypes, allowedProps };

package/es/Table/Row/styles.js

@@ -32,7 +32,12 @@
  * @param  {Object} extraArgs 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, extraArgs) => {
+const generateStyle = (componentTheme, props, extraArgs) => {
+  const setHoverStateTo = props.setHoverStateTo;
+  const hoverStyles = {
+    borderLeftColor: componentTheme.hoverBorderColor,
+    borderRightColor: componentTheme.hoverBorderColor
+  };
   return {
     row: {
       label: 'row',
@@ -45,13 +50,12 @@ const generateStyle = (componentTheme, _props, extraArgs) => {
       borderBottomStyle: 'solid',
       borderBottomWidth: '0.0625rem',
       borderBottomColor: componentTheme.borderColor,
-      ...(extraArgs.hover && {
+      ...((setHoverStateTo !== null && setHoverStateTo !== void 0 ? setHoverStateTo : extraArgs.hover) && {
         borderLeft: '0.1875rem solid transparent',
         borderRight: '0.1875rem solid transparent',
-        '&:hover': {
-          borderLeftColor: componentTheme.hoverBorderColor,
-          borderRightColor: componentTheme.hoverBorderColor
-        }
+        ...(setHoverStateTo === true ? hoverStyles : {
+          '&:hover': hoverStyles
+        })
       }),
       ...(extraArgs.isStacked && {
         padding: componentTheme.padding

package/lib/Table/Row/props.js

@@ -31,6 +31,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  */
 
 const propTypes = exports.propTypes = {
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  setHoverStateTo: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['children'];
+const allowedProps = exports.allowedProps = ['children', 'setHoverStateTo'];

package/lib/Table/Row/styles.js

@@ -38,7 +38,12 @@ exports.default = void 0;
  * @param  {Object} extraArgs 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, extraArgs) => {
+const generateStyle = (componentTheme, props, extraArgs) => {
+  const setHoverStateTo = props.setHoverStateTo;
+  const hoverStyles = {
+    borderLeftColor: componentTheme.hoverBorderColor,
+    borderRightColor: componentTheme.hoverBorderColor
+  };
   return {
     row: {
       label: 'row',
@@ -51,13 +56,12 @@ const generateStyle = (componentTheme, _props, extraArgs) => {
       borderBottomStyle: 'solid',
       borderBottomWidth: '0.0625rem',
       borderBottomColor: componentTheme.borderColor,
-      ...(extraArgs.hover && {
+      ...((setHoverStateTo !== null && setHoverStateTo !== void 0 ? setHoverStateTo : extraArgs.hover) && {
         borderLeft: '0.1875rem solid transparent',
         borderRight: '0.1875rem solid transparent',
-        '&:hover': {
-          borderLeftColor: componentTheme.hoverBorderColor,
-          borderRightColor: componentTheme.hoverBorderColor
-        }
+        ...(setHoverStateTo === true ? hoverStyles : {
+          '&:hover': hoverStyles
+        })
       }),
       ...(extraArgs.isStacked && {
         padding: componentTheme.padding

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "10.22.0",
+  "version": "10.22.1-snapshot-1",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.22.0",
-    "@instructure/ui-babel-preset": "10.22.0",
-    "@instructure/ui-color-utils": "10.22.0",
-    "@instructure/ui-themes": "10.22.0",
+    "@instructure/ui-axe-check": "10.22.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.22.1-snapshot-1",
+    "@instructure/ui-color-utils": "10.22.1-snapshot-1",
+    "@instructure/ui-themes": "10.22.1-snapshot-1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
@@ -34,17 +34,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.22.0",
-    "@instructure/emotion": "10.22.0",
-    "@instructure/shared-types": "10.22.0",
-    "@instructure/ui-a11y-content": "10.22.0",
-    "@instructure/ui-icons": "10.22.0",
-    "@instructure/ui-prop-types": "10.22.0",
-    "@instructure/ui-react-utils": "10.22.0",
-    "@instructure/ui-simple-select": "10.22.0",
-    "@instructure/ui-testable": "10.22.0",
-    "@instructure/ui-utils": "10.22.0",
-    "@instructure/ui-view": "10.22.0",
+    "@instructure/console": "10.22.1-snapshot-1",
+    "@instructure/emotion": "10.22.1-snapshot-1",
+    "@instructure/shared-types": "10.22.1-snapshot-1",
+    "@instructure/ui-a11y-content": "10.22.1-snapshot-1",
+    "@instructure/ui-icons": "10.22.1-snapshot-1",
+    "@instructure/ui-prop-types": "10.22.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.22.1-snapshot-1",
+    "@instructure/ui-simple-select": "10.22.1-snapshot-1",
+    "@instructure/ui-testable": "10.22.1-snapshot-1",
+    "@instructure/ui-utils": "10.22.1-snapshot-1",
+    "@instructure/ui-view": "10.22.1-snapshot-1",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Table/Row/props.ts

@@ -40,6 +40,13 @@ type TableRowOwnProps = {
    * By default `Table.ColHeader` or `Table.RowHeader` or `Table.Cell`
    */
   children?: React.ReactElement | React.ReactElement[]
+
+  /**
+   * Controls the hover state of the row.
+   * When set to true, the row will appear highlighted even when not hovered.
+   * When set to false, the row will not highlight on hover even if the hover prop is set to true.
+   */
+  setHoverStateTo?: boolean
 }
 
 type PropKeys = keyof TableRowOwnProps
@@ -53,10 +60,11 @@ type TableRowProps = TableRowOwnProps &
 type TableRowStyle = ComponentStyle<'row'>
 
 const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  setHoverStateTo: PropTypes.bool
 }
 
-const allowedProps: AllowedPropKeys = ['children']
+const allowedProps: AllowedPropKeys = ['children', 'setHoverStateTo']
 
 export type { TableRowProps, TableRowStyle }
 export { propTypes, allowedProps }

package/src/Table/Row/styles.ts

@@ -37,9 +37,16 @@ import type { TableRowProps, TableRowStyle } from './props'
  */
 const generateStyle = (
   componentTheme: TableRowTheme,
-  _props: TableRowProps,
+  props: TableRowProps,
   extraArgs: { isStacked: boolean; hover: boolean }
 ): TableRowStyle => {
+  const { setHoverStateTo } = props
+
+  const hoverStyles = {
+    borderLeftColor: componentTheme.hoverBorderColor,
+    borderRightColor: componentTheme.hoverBorderColor
+  }
+
   return {
     row: {
       label: 'row',
@@ -53,14 +60,10 @@ const generateStyle = (
       borderBottomWidth: '0.0625rem',
       borderBottomColor: componentTheme.borderColor,
 
-      ...(extraArgs.hover && {
+      ...((setHoverStateTo ?? extraArgs.hover) && {
         borderLeft: '0.1875rem solid transparent',
         borderRight: '0.1875rem solid transparent',
-
-        '&:hover': {
-          borderLeftColor: componentTheme.hoverBorderColor,
-          borderRightColor: componentTheme.hoverBorderColor
-        }
+        ...(setHoverStateTo === true ? hoverStyles : { '&:hover': hoverStyles })
       }),
 
       ...(extraArgs.isStacked && { padding: componentTheme.padding })