@instructure/ui-alerts 10.15.2 → 10.15.3-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.15.3-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.15.3-snapshot-1) (2025-04-10)
+
+
+### Bug Fixes
+
+* **ui-alerts:** no passthroughProps are set in component so Alert won't pass down props such as id to the underlaying DOM ([e481373](https://github.com/instructure/instructure-ui/commit/e481373d1b16dc26f7c808e4ea31bd8c59e41883))
+
+
+
+
+
 ## [10.15.2](https://github.com/instructure/instructure-ui/compare/v10.15.1...v10.15.2) (2025-04-07)
 
 

package/es/Alert/index.js

@@ -1,3 +1,5 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["margin", "styles", "children"];
 var _dec, _dec2, _class, _Alert;
 /*
  * The MIT License (MIT)
@@ -26,7 +28,7 @@ var _dec, _dec2, _class, _Alert;
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import keycode from 'keycode';
-import { callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
+import { callRenderProp, withDeterministicId, passthroughProps } from '@instructure/ui-react-utils';
 import { CloseButton } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -184,16 +186,22 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
     })) : null;
   }
   renderAlert() {
-    var _this$props$styles3, _this$props$styles4;
-    return jsx(View, {
+    const _this$props3 = this.props,
+      margin = _this$props3.margin,
+      styles = _this$props3.styles,
+      children = _this$props3.children,
+      props = _objectWithoutProperties(_this$props3, _excluded);
+    return jsx(View, Object.assign({}, passthroughProps({
+      ...props
+    }), {
       as: "div",
-      margin: this.props.margin,
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.alert,
+      margin: margin,
+      css: styles === null || styles === void 0 ? void 0 : styles.alert,
       onKeyUp: this.handleKeyUp,
       elementRef: this.handleRef
-    }, this.renderIcon(), jsx("div", {
-      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.content
-    }, this.props.children), this.renderCloseButton());
+    }), this.renderIcon(), jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.content
+    }, children), this.renderCloseButton());
   }
   createScreenReaderPortal(liveRegion) {
     const open = this.state.open;

package/lib/Alert/index.js

@@ -1,16 +1,18 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Alert = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _keycode = _interopRequireDefault(require("keycode"));
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
 var _View = require("@instructure/ui-view/lib/View");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
@@ -24,6 +26,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+const _excluded = ["margin", "styles", "children"];
 var _dec, _dec2, _class, _Alert;
 /*
  * The MIT License (MIT)
@@ -196,16 +199,22 @@ let Alert = exports.Alert = (_dec = (0, _withDeterministicId.withDeterministicId
     })) : null;
   }
   renderAlert() {
-    var _this$props$styles3, _this$props$styles4;
-    return (0, _emotion.jsx)(_View.View, {
+    const _this$props3 = this.props,
+      margin = _this$props3.margin,
+      styles = _this$props3.styles,
+      children = _this$props3.children,
+      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)({
+      ...props
+    }), {
       as: "div",
-      margin: this.props.margin,
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.alert,
+      margin: margin,
+      css: styles === null || styles === void 0 ? void 0 : styles.alert,
       onKeyUp: this.handleKeyUp,
       elementRef: this.handleRef
-    }, this.renderIcon(), (0, _emotion.jsx)("div", {
-      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.content
-    }, this.props.children), this.renderCloseButton());
+    }), this.renderIcon(), (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.content
+    }, children), this.renderCloseButton());
   }
   createScreenReaderPortal(liveRegion) {
     const open = this.state.open;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-alerts",
-  "version": "10.15.2",
+  "version": "10.15.3-snapshot-1",
   "description": "An alert component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.15.2",
-    "@instructure/ui-babel-preset": "10.15.2",
-    "@instructure/ui-color-utils": "10.15.2",
-    "@instructure/ui-scripts": "10.15.2",
-    "@instructure/ui-test-utils": "10.15.2",
+    "@instructure/ui-axe-check": "10.15.3-snapshot-1",
+    "@instructure/ui-babel-preset": "10.15.3-snapshot-1",
+    "@instructure/ui-color-utils": "10.15.3-snapshot-1",
+    "@instructure/ui-scripts": "10.15.3-snapshot-1",
+    "@instructure/ui-test-utils": "10.15.3-snapshot-1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -35,16 +35,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.15.2",
-    "@instructure/emotion": "10.15.2",
-    "@instructure/shared-types": "10.15.2",
-    "@instructure/ui-a11y-content": "10.15.2",
-    "@instructure/ui-buttons": "10.15.2",
-    "@instructure/ui-icons": "10.15.2",
-    "@instructure/ui-motion": "10.15.2",
-    "@instructure/ui-react-utils": "10.15.2",
-    "@instructure/ui-themes": "10.15.2",
-    "@instructure/ui-view": "10.15.2",
+    "@instructure/console": "10.15.3-snapshot-1",
+    "@instructure/emotion": "10.15.3-snapshot-1",
+    "@instructure/shared-types": "10.15.3-snapshot-1",
+    "@instructure/ui-a11y-content": "10.15.3-snapshot-1",
+    "@instructure/ui-buttons": "10.15.3-snapshot-1",
+    "@instructure/ui-icons": "10.15.3-snapshot-1",
+    "@instructure/ui-motion": "10.15.3-snapshot-1",
+    "@instructure/ui-react-utils": "10.15.3-snapshot-1",
+    "@instructure/ui-themes": "10.15.3-snapshot-1",
+    "@instructure/ui-view": "10.15.3-snapshot-1",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/Alert/index.tsx

@@ -28,7 +28,8 @@ import keycode from 'keycode'
 
 import {
   callRenderProp,
-  withDeterministicId
+  withDeterministicId,
+  passthroughProps
 } from '@instructure/ui-react-utils'
 import { CloseButton } from '@instructure/ui-buttons'
 import { View } from '@instructure/ui-view'
@@ -257,16 +258,18 @@ class Alert extends Component<AlertProps, AlertState> {
   }
 
   renderAlert() {
+    const { margin, styles, children, ...props } = this.props
     return (
       <View
+        {...passthroughProps({ ...props })}
         as="div"
-        margin={this.props.margin}
-        css={this.props.styles?.alert}
+        margin={margin}
+        css={styles?.alert}
         onKeyUp={this.handleKeyUp}
         elementRef={this.handleRef}
       >
         {this.renderIcon()}
-        <div css={this.props.styles?.content}>{this.props.children}</div>
+        <div css={styles?.content}>{children}</div>
         {this.renderCloseButton()}
       </View>
     )