@instructure/ui-dom-utils 10.26.1-snapshot-1 → 11.0.0

package/src/findDOMNode.ts

@@ -22,34 +22,42 @@
  * SOFTWARE.
  */
 
-import ReactDOM from 'react-dom'
-import type { ReactInstance, RefObject } from 'react'
 import type { UIElement } from '@instructure/shared-types'
-type ReactNodeWithRef = ReactInstance & {
-  ref: RefObject<Element | ReactInstance> | Element | ReactInstance
-}
-type CustomRefNode =
-  | ReactNodeWithRef
-  | RefObject<Element>
-  | Element
-  | ReactInstance
+import ReactDOM from 'react-dom'
 
-const isReactNodeWithRef = (el: unknown): el is ReactNodeWithRef => {
-  return !!el && (el as ReactNodeWithRef).ref !== undefined
-}
-const isRefObject = (obj: unknown): obj is RefObject<unknown> => {
-  return !!obj && (obj as RefObject<unknown>).current !== undefined
+/**
+ * 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: { ref?: any; props?: { ref: any } }) {
+  // Note that this is added by InstUI components like Position
+  if (elem.ref) {
+    return elem.ref
+  }
+  // note that trying to access this will display a warning in React 18.
+  // this is OK because without it React itself would show an error because
+  // its using findDOMNode
+  return elem?.props?.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?: UIElement): Element | Node | Window | undefined {
   const node = typeof el === 'function' ? el() : el
@@ -63,27 +71,33 @@ function findDOMNode(el?: UIElement): Element | Node | Window | undefined {
   ) {
     return node as Node | Window
   } else if (node) {
-    const reactNode = node as CustomRefNode
-
-    if (isReactNodeWithRef(reactNode)) {
-      const refElement = isRefObject(reactNode.ref)
-        ? reactNode.ref.current
-        : reactNode.ref
+    const ref = getElementRef(node as object)
+    const refElement = ref?.current ? ref.current : ref
+    if (refElement) {
       if (!(refElement instanceof HTMLElement)) {
         return findDOMNode(refElement)
       }
       return refElement
-    } else {
-      const elName = (reactNode as any).constructor.componentId
-        ? (reactNode as any).constructor.componentId
-        : (reactNode as any).constructor.name
-
-      console.warn(
-        `Warning: ${elName} doesn't have "ref" property.\nReactDOM.findDOMNode is deprecated in Strict mode, consider using refs instead. From InstUI v9, components must have the "ref" property for findDOMNode to work.\nSee more here: https://instructure.design/#accessing-the-dom`
-      )
-
-      return ReactDOM.findDOMNode(node as ReactInstance)!
+    } else if (refElement === null) {
+      // weird, but changing it would be a breaking change
+      return undefined
+    }
+    const elName = (node as any).constructor.componentId
+      ? (node as any).constructor.componentId
+      : (node as any).constructor.name
+    console.error(
+      `findDOMNode error: ${elName} doesn't have "ref" property.\n
+      your code will likely not work with React 19+, because ReactDOM.findDOMNode() was removed.\n
+      See more here: https://instructure.design/#accessing-the-dom`
+    )
+    // TODO remove when we only support React 19 or greater
+    const ReactDomInstance = ReactDOM as {
+      findDOMNode?: (arg: unknown) => Element
+    }
+    if (typeof ReactDomInstance.findDOMNode === 'function') {
+      return ReactDomInstance.findDOMNode(node)
     }
+    return undefined
   }
   return undefined
 }

package/src/findFocusable.ts

@@ -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 './'
 import type { UIElement } from '@instructure/shared-types'
 
 const focusableSelector = [
@@ -103,8 +103,8 @@ function findFocusable(
 }
 
 function hidden(element: Element | Node) {
-  const cs = getComputedStyle(element)
-  return cs.display === 'none'
+  const cs = getCSSStyleDeclaration(element)
+  return cs?.display === 'none'
 }
 
 function positioned(element: Element | Node) {
@@ -112,11 +112,12 @@ function positioned(element: Element | Node) {
   if (POS.includes((element as HTMLElement).style.position?.toLowerCase())) {
     return true
   }
-  if (
-    POS.includes(
-      getComputedStyle(element).getPropertyValue('position')?.toLowerCase()
-    )
-  ) {
+
+  const position = getCSSStyleDeclaration(element)
+    ?.getPropertyValue('position')
+    ?.toLowerCase()
+
+  if (position && POS.includes(position)) {
     return true
   }
   return false
@@ -140,6 +141,4 @@ function focusable(element: Element & { disabled?: boolean }) {
 }
 
 export default findFocusable
-export {
-  findFocusable
-}
+export { findFocusable }

package/src/{getComputedStyle.ts → getCSSStyleDeclaration.ts}

@@ -34,23 +34,29 @@ import type { UIElement } from '@instructure/shared-types'
  *
  * 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?: UIElement, pseudoElt?: string | null) {
-  let style = {}
+function getCSSStyleDeclaration(el?: UIElement, pseudoElt?: string | null) {
+  let style: CSSStyleDeclaration | undefined
   if (canUseDOM) {
     const node = el && findDOMNode(el)
     if (node) {
       const window = ownerWindow(el)
-      style = window ? window.getComputedStyle(node as Element, pseudoElt) : {}
+      try {
+        style = window
+          ? window.getComputedStyle(node as Element, pseudoElt)
+          : undefined
+      } catch {
+        style = undefined
+      }
     }
   }
-  return style as CSSStyleDeclaration
+  return style
 }
 
-export default getComputedStyle
-export { getComputedStyle }
+export default getCSSStyleDeclaration
+export { getCSSStyleDeclaration }

package/src/getFontSize.ts

@@ -23,7 +23,7 @@
  */
 import { canUseDOM } from './canUseDOM'
 import { ownerDocument } from './ownerDocument'
-import { getComputedStyle } from './getComputedStyle'
+import { getCSSStyleDeclaration } from './getCSSStyleDeclaration'
 import React from 'react'
 
 const COMPUTED_CACHE: WeakMap<any, number> = new WeakMap()
@@ -63,7 +63,7 @@ function getFontSize(
   }
 
   const fontSize = parseInt(
-    (getComputedStyle(container) as CSSStyleDeclaration).getPropertyValue(
+    (getCSSStyleDeclaration(container) as CSSStyleDeclaration).getPropertyValue(
       'font-size'
     )
   )

package/src/getOffsetParents.ts

@@ -24,7 +24,7 @@
 
 import { findDOMNode } from './findDOMNode'
 import { canUseDOM } from './canUseDOM'
-import { getComputedStyle } from './getComputedStyle'
+import { getCSSStyleDeclaration } from './getCSSStyleDeclaration'
 import { ownerDocument } from './ownerDocument'
 import { UIElement } from '@instructure/shared-types'
 
@@ -59,7 +59,7 @@ function getOffsetParents(el?: UIElement) {
       parent.nodeType === 1 &&
       (parent as Element).tagName !== 'BODY'
     ) {
-      const style = getComputedStyle(parent) as CSSStyleDeclaration
+      const style = getCSSStyleDeclaration(parent) as CSSStyleDeclaration
       const transform =
         style.getPropertyValue('-webkit-transform') ||
         style.getPropertyValue('-moz-transform') ||

package/src/getScrollParents.ts

@@ -24,7 +24,7 @@
 
 import { findDOMNode } from './findDOMNode'
 import { canUseDOM } from './canUseDOM'
-import { getComputedStyle } from './getComputedStyle'
+import { getCSSStyleDeclaration } from './getCSSStyleDeclaration'
 import { UIElement } from '@instructure/shared-types'
 
 /**
@@ -53,8 +53,8 @@ function getScrollParents(el?: UIElement) {
   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?.position
 
     if (position === 'fixed') {
       return [(node as Node).ownerDocument]
@@ -68,7 +68,7 @@ function getScrollParents(el?: UIElement) {
     ) {
       let style
       try {
-        style = getComputedStyle(parent)
+        style = getCSSStyleDeclaration(parent)
       } catch (err: any) {} // eslint-disable-line no-empty
 
       if (typeof style === 'undefined' || style === null) {

package/src/index.ts

@@ -37,7 +37,7 @@ export { getActiveElement } from './getActiveElement'
 export { getBoundingClientRect } from './getBoundingClientRect'
 export type { RectType } 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/src/isVisible.ts

@@ -23,7 +23,7 @@
  */
 
 import { findDOMNode } from './findDOMNode'
-import { getComputedStyle } from './getComputedStyle'
+import { getCSSStyleDeclaration } from './getCSSStyleDeclaration'
 import { UIElement } from '@instructure/shared-types'
 
 /**
@@ -52,22 +52,24 @@ function isVisible(el?: UIElement, recursive = true): boolean {
     return isVisible(parent, recursive)
   }
 
-  const style = node ? getComputedStyle(node) : ({} as CSSStyleDeclaration)
+  const style = node
+    ? getCSSStyleDeclaration(node)
+    : ({} as CSSStyleDeclaration)
   // physically and visually hidden
-  if (style.display === 'none') {
+  if (style?.display === 'none') {
     return false
   }
   // visually hidden
-  if (style.visibility === 'hidden' || style.opacity === '0') {
+  if (style?.visibility === 'hidden' || style?.opacity === '0') {
     return false
   }
   // hidden by clipping
   if (
-    style.overflow === 'hidden' &&
-    style.position === 'absolute' &&
-    style.clip !== 'auto'
+    style?.overflow === 'hidden' &&
+    style?.position === 'absolute' &&
+    style?.clip !== 'auto'
   ) {
-    const rect = style.clip.substring(5).slice(0, -1).split(', ')
+    const rect = style?.clip.substring(5).slice(0, -1).split(', ')
     let zeros = true
     rect.forEach((a) => {
       if (a !== '0px') {