@instructure/ui-dom-utils 10.25.0 → 10.25.1-pr-snapshot-1757941125745

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.25.1-pr-snapshot-1757941125745](https://github.com/instructure/instructure-ui/compare/v10.25.0...v10.25.1-pr-snapshot-1757941125745) (2025-09-15)
+
+
+### Features
+
+* **many:** remove prop-types; add support for react 19 and upgrade docs app to use it ([22311c7](https://github.com/instructure/instructure-ui/commit/22311c7bcf52d4e7b094c60c92192e5c85eac6c2))
+
+
+
+
+
 # [10.25.0](https://github.com/instructure/instructure-ui/compare/v10.24.2...v10.25.0) (2025-09-09)
 
 **Note:** Version bump only for package @instructure/ui-dom-utils

package/es/findDOMNode.js

@@ -23,22 +23,37 @@
  */
 
 import ReactDOM from 'react-dom';
-const isReactNodeWithRef = el => {
-  return !!el && el.ref !== void 0;
-};
-const isRefObject = obj => {
-  return !!obj && obj.current !== void 0;
-};
+
+/**
+ * Return the ref of an element in a way that is compatible both with
+ * React 18 (element.ref) and React 19+ (element.props.ref)
+ */
+function getElementRef(elem) {
+  var _elem$props;
+  if ((elem === null || elem === void 0 ? void 0 : (_elem$props = elem.props) === null || _elem$props === void 0 ? void 0 : _elem$props.ref) !== void 0) {
+    return elem.props.ref;
+  }
+  return elem.ref;
+}
+
 /**
  * ---
  * category: utilities/DOM
  * ---
  *
- * Wrapper function for React.findDOMNode
+ * Returns the underlying DOM node. It looks the following places:
+ * - If it's a native HTML element e.g. `HtmlSpanElement` its returned as is.
+ * - If the element has a non-nullish `ref` prop or instance variable which is a
+ *   `HTMLElement` its returned. If it`s something else then `findDOMNode` is called
+ *   on the object. (it also checks `ref.current`)
+ * - If the element has a `ref` prop or instance variable whose value is `null`,
+ *   `undefined` is returned.
+ * - If the element does not have a `ref` prop or instance variable `undefined`
+ *   is returned with a warning
  * @module findDOMNode
  *
- * @param { Node | Window | React.ReactElement | React.Component | function } el - component, DOM node, or function returning a DOM node
- * @returns { Node | Window | null | undefined } The root node of this element
+ * @param el - component, DOM node, or function returning a DOM node
+ * @returns The native DOM node of this element or `undefined`
  */
 function findDOMNode(el) {
   const node = typeof el === 'function' ? el() : el;
@@ -47,17 +62,24 @@ function findDOMNode(el) {
   } else if (node instanceof Element || node === window || node && typeof node.nodeType !== 'undefined') {
     return node;
   } else if (node) {
-    const reactNode = node;
-    if (isReactNodeWithRef(reactNode)) {
-      const refElement = isRefObject(reactNode.ref) ? reactNode.ref.current : reactNode.ref;
+    const ref = getElementRef(node);
+    const refElement = ref !== null && ref !== void 0 && ref.current ? ref.current : ref;
+    if (refElement) {
       if (!(refElement instanceof HTMLElement)) {
         return findDOMNode(refElement);
       }
       return refElement;
-    } else {
-      const elName = reactNode.constructor.componentId ? reactNode.constructor.componentId : reactNode.constructor.name;
-      return ReactDOM.findDOMNode(node);
+    } else if (refElement === null) {
+      // weird, but changing it would be a breaking change
+      return void 0;
+    }
+    const elName = node.constructor.componentId ? node.constructor.componentId : node.constructor.name;
+    // TODO remove when we only support React 19 or greater
+    const ReactDomInstance = ReactDOM;
+    if (typeof ReactDomInstance.findDOMNode === 'function') {
+      return ReactDomInstance.findDOMNode(node);
     }
+    return void 0;
   }
   return void 0;
 }

package/es/findFocusable.js

@@ -37,7 +37,7 @@
 // or even better use the native <dialog> component.
 // tabbable has issues with scrollable containers, e.g.
 // https://github.com/focus-trap/tabbable/issues/167
-import { getComputedStyle, findDOMNode } from './';
+import { getCSSStyleDeclaration, findDOMNode } from './';
 const focusableSelector = ['a[href]', 'frame', 'iframe', 'object', 'input:not([type=hidden])', 'select', 'textarea', 'button', '*[tabindex]', '[contenteditable="true"]'].join(',');
 function hasQuerySelectorAll(el) {
   if (!el || typeof el.querySelectorAll !== 'function') {
@@ -79,16 +79,17 @@ function findFocusable(el, filter, shouldSearchRootNode) {
   });
 }
 function hidden(element) {
-  const cs = getComputedStyle(element);
-  return cs.display === 'none';
+  const cs = getCSSStyleDeclaration(element);
+  return (cs === null || cs === void 0 ? void 0 : cs.display) === 'none';
 }
 function positioned(element) {
-  var _style$position, _getComputedStyle$get;
+  var _style$position, _getCSSStyleDeclarati, _getCSSStyleDeclarati2;
   const POS = ['fixed', 'absolute'];
   if (POS.includes((_style$position = element.style.position) === null || _style$position === void 0 ? void 0 : _style$position.toLowerCase())) {
     return true;
   }
-  if (POS.includes((_getComputedStyle$get = getComputedStyle(element).getPropertyValue('position')) === null || _getComputedStyle$get === void 0 ? void 0 : _getComputedStyle$get.toLowerCase())) {
+  const position = (_getCSSStyleDeclarati = getCSSStyleDeclaration(element)) === null || _getCSSStyleDeclarati === void 0 ? void 0 : (_getCSSStyleDeclarati2 = _getCSSStyleDeclarati.getPropertyValue('position')) === null || _getCSSStyleDeclarati2 === void 0 ? void 0 : _getCSSStyleDeclarati2.toLowerCase();
+  if (position && POS.includes(position)) {
     return true;
   }
   return false;

package/es/{getComputedStyle.js → getCSSStyleDeclaration.js}

@@ -32,22 +32,26 @@ import { canUseDOM } from './canUseDOM';
  *
  * Get the associated CSS properties and values for a
  * specified element
- * @module getComputedStyle
+ * @module getCSSStyleDeclaration
  *
  * @param { Node | Window | React.ReactElement | React.Component | function } el - component or DOM node
  * @param { string | null | undefined } pseudoElt - A string specifying the pseudo-element to match. Omitted (or null ) for real elements.
- * @returns { Object } object containing css properties and values for the element
+ * @returns { CSSStyleDeclaration | undefined } The style declaration containing css properties and values for the element or undefined
  */
-function getComputedStyle(el, pseudoElt) {
-  let style = {};
+function getCSSStyleDeclaration(el, pseudoElt) {
+  let style;
   if (canUseDOM) {
     const node = el && findDOMNode(el);
     if (node) {
       const window = ownerWindow(el);
-      style = window ? window.getComputedStyle(node, pseudoElt) : {};
+      try {
+        style = window ? window.getComputedStyle(node, pseudoElt) : void 0;
+      } catch {
+        style = void 0;
+      }
     }
   }
   return style;
 }
-export default getComputedStyle;
-export { getComputedStyle };
+export default getCSSStyleDeclaration;
+export { getCSSStyleDeclaration };

package/es/getFontSize.js

@@ -23,7 +23,7 @@
  */
 import { canUseDOM } from './canUseDOM';
 import { ownerDocument } from './ownerDocument';
-import { getComputedStyle } from './getComputedStyle';
+import { getCSSStyleDeclaration } from './getCSSStyleDeclaration';
 const COMPUTED_CACHE = new WeakMap();
 
 /**
@@ -50,7 +50,7 @@ function getFontSize(el, ignoreCache = false) {
   if (!ignoreCache && cachedValue) {
     return cachedValue;
   }
-  const fontSize = parseInt(getComputedStyle(container).getPropertyValue('font-size'));
+  const fontSize = parseInt(getCSSStyleDeclaration(container).getPropertyValue('font-size'));
 
   // cache the computed font size so that we don't have to compute it again
   COMPUTED_CACHE.set(container, fontSize);

package/es/getOffsetParents.js

@@ -24,7 +24,7 @@
 
 import { findDOMNode } from './findDOMNode';
 import { canUseDOM } from './canUseDOM';
-import { getComputedStyle } from './getComputedStyle';
+import { getCSSStyleDeclaration } from './getCSSStyleDeclaration';
 import { ownerDocument } from './ownerDocument';
 /**
  * ---
@@ -48,7 +48,7 @@ function getOffsetParents(el) {
   if (node) {
     let parent = node;
     while ((parent = parent.parentNode) && parent && parent.nodeType === 1 && parent.tagName !== 'BODY') {
-      const style = getComputedStyle(parent);
+      const style = getCSSStyleDeclaration(parent);
       const transform = style.getPropertyValue('-webkit-transform') || style.getPropertyValue('-moz-transform') || style.getPropertyValue('-ms-transform') || style.getPropertyValue('-o-transform') || style.getPropertyValue('transform') || 'none';
       // initial value of transform can be 'none' or a matrix equivalent
       const transformDefault = transform === 'none' || transform === 'matrix(1, 0, 0, 1, 0, 0)' ? true : false;

package/es/getScrollParents.js

@@ -24,7 +24,7 @@
 
 import { findDOMNode } from './findDOMNode';
 import { canUseDOM } from './canUseDOM';
-import { getComputedStyle } from './getComputedStyle';
+import { getCSSStyleDeclaration } from './getCSSStyleDeclaration';
 /**
  * ---
  * category: utilities/DOM
@@ -48,8 +48,8 @@ function getScrollParents(el) {
   if (node) {
     // In firefox if the element is inside an iframe with display: none; window.getComputedStyle() will return null;
     // https://bugzilla.mozilla.org/show_bug.cgi?id=548397
-    const computedStyle = getComputedStyle(node) || {};
-    const position = computedStyle.position;
+    const computedStyle = getCSSStyleDeclaration(node);
+    const position = computedStyle === null || computedStyle === void 0 ? void 0 : computedStyle.position;
     if (position === 'fixed') {
       return [node.ownerDocument];
     }
@@ -57,7 +57,7 @@ function getScrollParents(el) {
     while (parent && parent.nodeType === 1 && (parent = parent.parentNode)) {
       let style;
       try {
-        style = getComputedStyle(parent);
+        style = getCSSStyleDeclaration(parent);
       } catch (err) {} // eslint-disable-line no-empty
 
       if (typeof style === 'undefined' || style === null) {

package/es/index.js

@@ -35,7 +35,7 @@ export { findTabbable } from './findTabbable';
 export { getActiveElement } from './getActiveElement';
 export { getBoundingClientRect } from './getBoundingClientRect';
 export { getClassList } from './getClassList';
-export { getComputedStyle } from './getComputedStyle';
+export { getCSSStyleDeclaration } from './getCSSStyleDeclaration';
 export { getFontSize } from './getFontSize';
 export { getOffsetParents } from './getOffsetParents';
 export { getScrollParents } from './getScrollParents';

package/es/isVisible.js

@@ -23,7 +23,7 @@
  */
 
 import { findDOMNode } from './findDOMNode';
-import { getComputedStyle } from './getComputedStyle';
+import { getCSSStyleDeclaration } from './getCSSStyleDeclaration';
 /**
  * ---
  * category: utilities/DOM
@@ -49,18 +49,18 @@ function isVisible(el, recursive = true) {
   if (node.nodeType === 3) {
     return isVisible(parent, recursive);
   }
-  const style = node ? getComputedStyle(node) : {};
+  const style = node ? getCSSStyleDeclaration(node) : {};
   // physically and visually hidden
-  if (style.display === 'none') {
+  if ((style === null || style === void 0 ? void 0 : style.display) === 'none') {
     return false;
   }
   // visually hidden
-  if (style.visibility === 'hidden' || style.opacity === '0') {
+  if ((style === null || style === void 0 ? void 0 : style.visibility) === 'hidden' || (style === null || style === void 0 ? void 0 : style.opacity) === '0') {
     return false;
   }
   // hidden by clipping
-  if (style.overflow === 'hidden' && style.position === 'absolute' && style.clip !== 'auto') {
-    const rect = style.clip.substring(5).slice(0, -1).split(', ');
+  if ((style === null || style === void 0 ? void 0 : style.overflow) === 'hidden' && (style === null || style === void 0 ? void 0 : style.position) === 'absolute' && (style === null || style === void 0 ? void 0 : style.clip) !== 'auto') {
+    const rect = style === null || style === void 0 ? void 0 : style.clip.substring(5).slice(0, -1).split(', ');
     let zeros = true;
     rect.forEach(a => {
       if (a !== '0px') {

package/lib/findDOMNode.js

@@ -31,22 +31,36 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
  * SOFTWARE.
  */
 
-const isReactNodeWithRef = el => {
-  return !!el && el.ref !== void 0;
-};
-const isRefObject = obj => {
-  return !!obj && obj.current !== void 0;
-};
+/**
+ * Return the ref of an element in a way that is compatible both with
+ * React 18 (element.ref) and React 19+ (element.props.ref)
+ */
+function getElementRef(elem) {
+  var _elem$props;
+  if ((elem === null || elem === void 0 ? void 0 : (_elem$props = elem.props) === null || _elem$props === void 0 ? void 0 : _elem$props.ref) !== void 0) {
+    return elem.props.ref;
+  }
+  return elem.ref;
+}
+
 /**
  * ---
  * category: utilities/DOM
  * ---
  *
- * Wrapper function for React.findDOMNode
+ * Returns the underlying DOM node. It looks the following places:
+ * - If it's a native HTML element e.g. `HtmlSpanElement` its returned as is.
+ * - If the element has a non-nullish `ref` prop or instance variable which is a
+ *   `HTMLElement` its returned. If it`s something else then `findDOMNode` is called
+ *   on the object. (it also checks `ref.current`)
+ * - If the element has a `ref` prop or instance variable whose value is `null`,
+ *   `undefined` is returned.
+ * - If the element does not have a `ref` prop or instance variable `undefined`
+ *   is returned with a warning
  * @module findDOMNode
  *
- * @param { Node | Window | React.ReactElement | React.Component | function } el - component, DOM node, or function returning a DOM node
- * @returns { Node | Window | null | undefined } The root node of this element
+ * @param el - component, DOM node, or function returning a DOM node
+ * @returns The native DOM node of this element or `undefined`
  */
 function findDOMNode(el) {
   const node = typeof el === 'function' ? el() : el;
@@ -55,17 +69,24 @@ function findDOMNode(el) {
   } else if (node instanceof Element || node === window || node && typeof node.nodeType !== 'undefined') {
     return node;
   } else if (node) {
-    const reactNode = node;
-    if (isReactNodeWithRef(reactNode)) {
-      const refElement = isRefObject(reactNode.ref) ? reactNode.ref.current : reactNode.ref;
+    const ref = getElementRef(node);
+    const refElement = ref !== null && ref !== void 0 && ref.current ? ref.current : ref;
+    if (refElement) {
       if (!(refElement instanceof HTMLElement)) {
         return findDOMNode(refElement);
       }
       return refElement;
-    } else {
-      const elName = reactNode.constructor.componentId ? reactNode.constructor.componentId : reactNode.constructor.name;
-      return _reactDom.default.findDOMNode(node);
+    } else if (refElement === null) {
+      // weird, but changing it would be a breaking change
+      return void 0;
+    }
+    const elName = node.constructor.componentId ? node.constructor.componentId : node.constructor.name;
+    // TODO remove when we only support React 19 or greater
+    const ReactDomInstance = _reactDom.default;
+    if (typeof ReactDomInstance.findDOMNode === 'function') {
+      return ReactDomInstance.findDOMNode(node);
     }
+    return void 0;
   }
   return void 0;
 }

package/lib/findFocusable.js

@@ -87,16 +87,17 @@ function findFocusable(el, filter, shouldSearchRootNode) {
   });
 }
 function hidden(element) {
-  const cs = (0, _.getComputedStyle)(element);
-  return cs.display === 'none';
+  const cs = (0, _.getCSSStyleDeclaration)(element);
+  return (cs === null || cs === void 0 ? void 0 : cs.display) === 'none';
 }
 function positioned(element) {
-  var _style$position, _getComputedStyle$get;
+  var _style$position, _getCSSStyleDeclarati, _getCSSStyleDeclarati2;
   const POS = ['fixed', 'absolute'];
   if (POS.includes((_style$position = element.style.position) === null || _style$position === void 0 ? void 0 : _style$position.toLowerCase())) {
     return true;
   }
-  if (POS.includes((_getComputedStyle$get = (0, _.getComputedStyle)(element).getPropertyValue('position')) === null || _getComputedStyle$get === void 0 ? void 0 : _getComputedStyle$get.toLowerCase())) {
+  const position = (_getCSSStyleDeclarati = (0, _.getCSSStyleDeclaration)(element)) === null || _getCSSStyleDeclarati === void 0 ? void 0 : (_getCSSStyleDeclarati2 = _getCSSStyleDeclarati.getPropertyValue('position')) === null || _getCSSStyleDeclarati2 === void 0 ? void 0 : _getCSSStyleDeclarati2.toLowerCase();
+  if (position && POS.includes(position)) {
     return true;
   }
   return false;

package/lib/{getComputedStyle.js → getCSSStyleDeclaration.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-exports.getComputedStyle = getComputedStyle;
+exports.getCSSStyleDeclaration = getCSSStyleDeclaration;
 var _findDOMNode = require("./findDOMNode");
 var _ownerWindow = require("./ownerWindow");
 var _canUseDOM = require("./canUseDOM");
@@ -39,21 +39,25 @@ var _canUseDOM = require("./canUseDOM");
  *
  * Get the associated CSS properties and values for a
  * specified element
- * @module getComputedStyle
+ * @module getCSSStyleDeclaration
  *
  * @param { Node | Window | React.ReactElement | React.Component | function } el - component or DOM node
  * @param { string | null | undefined } pseudoElt - A string specifying the pseudo-element to match. Omitted (or null ) for real elements.
- * @returns { Object } object containing css properties and values for the element
+ * @returns { CSSStyleDeclaration | undefined } The style declaration containing css properties and values for the element or undefined
  */
-function getComputedStyle(el, pseudoElt) {
-  let style = {};
+function getCSSStyleDeclaration(el, pseudoElt) {
+  let style;
   if (_canUseDOM.canUseDOM) {
     const node = el && (0, _findDOMNode.findDOMNode)(el);
     if (node) {
       const window = (0, _ownerWindow.ownerWindow)(el);
-      style = window ? window.getComputedStyle(node, pseudoElt) : {};
+      try {
+        style = window ? window.getComputedStyle(node, pseudoElt) : void 0;
+      } catch {
+        style = void 0;
+      }
     }
   }
   return style;
 }
-var _default = exports.default = getComputedStyle;
+var _default = exports.default = getCSSStyleDeclaration;

package/lib/getFontSize.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 exports.getFontSize = getFontSize;
 var _canUseDOM = require("./canUseDOM");
 var _ownerDocument2 = require("./ownerDocument");
-var _getComputedStyle = require("./getComputedStyle");
+var _getCSSStyleDeclaration = require("./getCSSStyleDeclaration");
 /*
  * The MIT License (MIT)
  *
@@ -58,7 +58,7 @@ function getFontSize(el, ignoreCache = false) {
   if (!ignoreCache && cachedValue) {
     return cachedValue;
   }
-  const fontSize = parseInt((0, _getComputedStyle.getComputedStyle)(container).getPropertyValue('font-size'));
+  const fontSize = parseInt((0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(container).getPropertyValue('font-size'));
 
   // cache the computed font size so that we don't have to compute it again
   COMPUTED_CACHE.set(container, fontSize);

package/lib/getOffsetParents.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 exports.getOffsetParents = getOffsetParents;
 var _findDOMNode = require("./findDOMNode");
 var _canUseDOM = require("./canUseDOM");
-var _getComputedStyle = require("./getComputedStyle");
+var _getCSSStyleDeclaration = require("./getCSSStyleDeclaration");
 var _ownerDocument = require("./ownerDocument");
 /*
  * The MIT License (MIT)
@@ -55,7 +55,7 @@ function getOffsetParents(el) {
   if (node) {
     let parent = node;
     while ((parent = parent.parentNode) && parent && parent.nodeType === 1 && parent.tagName !== 'BODY') {
-      const style = (0, _getComputedStyle.getComputedStyle)(parent);
+      const style = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(parent);
       const transform = style.getPropertyValue('-webkit-transform') || style.getPropertyValue('-moz-transform') || style.getPropertyValue('-ms-transform') || style.getPropertyValue('-o-transform') || style.getPropertyValue('transform') || 'none';
       // initial value of transform can be 'none' or a matrix equivalent
       const transformDefault = transform === 'none' || transform === 'matrix(1, 0, 0, 1, 0, 0)' ? true : false;

package/lib/getScrollParents.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 exports.getScrollParents = getScrollParents;
 var _findDOMNode = require("./findDOMNode");
 var _canUseDOM = require("./canUseDOM");
-var _getComputedStyle = require("./getComputedStyle");
+var _getCSSStyleDeclaration = require("./getCSSStyleDeclaration");
 /*
  * The MIT License (MIT)
  *
@@ -55,8 +55,8 @@ function getScrollParents(el) {
   if (node) {
     // In firefox if the element is inside an iframe with display: none; window.getComputedStyle() will return null;
     // https://bugzilla.mozilla.org/show_bug.cgi?id=548397
-    const computedStyle = (0, _getComputedStyle.getComputedStyle)(node) || {};
-    const position = computedStyle.position;
+    const computedStyle = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(node);
+    const position = computedStyle === null || computedStyle === void 0 ? void 0 : computedStyle.position;
     if (position === 'fixed') {
       return [node.ownerDocument];
     }
@@ -64,7 +64,7 @@ function getScrollParents(el) {
     while (parent && parent.nodeType === 1 && (parent = parent.parentNode)) {
       let style;
       try {
-        style = (0, _getComputedStyle.getComputedStyle)(parent);
+        style = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(parent);
       } catch (err) {} // eslint-disable-line no-empty
 
       if (typeof style === 'undefined' || style === null) {

package/lib/index.js

@@ -69,16 +69,16 @@ Object.defineProperty(exports, "getBoundingClientRect", {
     return _getBoundingClientRect.getBoundingClientRect;
   }
 });
-Object.defineProperty(exports, "getClassList", {
+Object.defineProperty(exports, "getCSSStyleDeclaration", {
   enumerable: true,
   get: function () {
-    return _getClassList.getClassList;
+    return _getCSSStyleDeclaration.getCSSStyleDeclaration;
   }
 });
-Object.defineProperty(exports, "getComputedStyle", {
+Object.defineProperty(exports, "getClassList", {
   enumerable: true,
   get: function () {
-    return _getComputedStyle.getComputedStyle;
+    return _getClassList.getClassList;
   }
 });
 Object.defineProperty(exports, "getFontSize", {
@@ -159,7 +159,7 @@ var _findTabbable = require("./findTabbable");
 var _getActiveElement = require("./getActiveElement");
 var _getBoundingClientRect = require("./getBoundingClientRect");
 var _getClassList = require("./getClassList");
-var _getComputedStyle = require("./getComputedStyle");
+var _getCSSStyleDeclaration = require("./getCSSStyleDeclaration");
 var _getFontSize = require("./getFontSize");
 var _getOffsetParents = require("./getOffsetParents");
 var _getScrollParents = require("./getScrollParents");

package/lib/isVisible.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.isVisible = isVisible;
 var _findDOMNode = require("./findDOMNode");
-var _getComputedStyle = require("./getComputedStyle");
+var _getCSSStyleDeclaration = require("./getCSSStyleDeclaration");
 /*
  * The MIT License (MIT)
  *
@@ -56,18 +56,18 @@ function isVisible(el, recursive = true) {
   if (node.nodeType === 3) {
     return isVisible(parent, recursive);
   }
-  const style = node ? (0, _getComputedStyle.getComputedStyle)(node) : {};
+  const style = node ? (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(node) : {};
   // physically and visually hidden
-  if (style.display === 'none') {
+  if ((style === null || style === void 0 ? void 0 : style.display) === 'none') {
     return false;
   }
   // visually hidden
-  if (style.visibility === 'hidden' || style.opacity === '0') {
+  if ((style === null || style === void 0 ? void 0 : style.visibility) === 'hidden' || (style === null || style === void 0 ? void 0 : style.opacity) === '0') {
     return false;
   }
   // hidden by clipping
-  if (style.overflow === 'hidden' && style.position === 'absolute' && style.clip !== 'auto') {
-    const rect = style.clip.substring(5).slice(0, -1).split(', ');
+  if ((style === null || style === void 0 ? void 0 : style.overflow) === 'hidden' && (style === null || style === void 0 ? void 0 : style.position) === 'absolute' && (style === null || style === void 0 ? void 0 : style.clip) !== 'auto') {
+    const rect = style === null || style === void 0 ? void 0 : style.clip.substring(5).slice(0, -1).split(', ');
     let zeros = true;
     rect.forEach(a => {
       if (a !== '0px') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-dom-utils",
-  "version": "10.25.0",
+  "version": "10.25.1-pr-snapshot-1757941125745",
   "description": "A DOM utility library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -22,19 +22,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.25.0",
+    "@instructure/ui-babel-preset": "10.25.1-pr-snapshot-1757941125745",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.3.0",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.25.0",
-    "@instructure/shared-types": "10.25.0"
+    "@instructure/console": "10.25.1-pr-snapshot-1757941125745",
+    "@instructure/shared-types": "10.25.1-pr-snapshot-1757941125745"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18",
-    "react-dom": ">=16.14 <=18"
+    "react": ">=18 <=19",
+    "react-dom": ">=18 <=19"
   },
   "publishConfig": {
     "access": "public"