@instructure/ui-dom-utils 10.26.1-snapshot-2 → 10.26.2

package/src/findDOMNode.ts

@@ -22,42 +22,34 @@
  * SOFTWARE.
  */
 
-import type { UIElement } from '@instructure/shared-types'
 import ReactDOM from 'react-dom'
-
-/**
- * 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
+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
 
+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
+}
 /**
  * ---
  * category: utilities/DOM
  * ---
  *
- * 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
+ * Wrapper function for React.findDOMNode
  * @module findDOMNode
  *
- * @param el - component, DOM node, or function returning a DOM node
- * @returns The native DOM node of this element or `undefined`
+ * @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
  */
 function findDOMNode(el?: UIElement): Element | Node | Window | undefined {
   const node = typeof el === 'function' ? el() : el
@@ -71,33 +63,27 @@ function findDOMNode(el?: UIElement): Element | Node | Window | undefined {
   ) {
     return node as Node | Window
   } else if (node) {
-    const ref = getElementRef(node as object)
-    const refElement = ref?.current ? ref.current : ref
-    if (refElement) {
+    const reactNode = node as CustomRefNode
+
+    if (isReactNodeWithRef(reactNode)) {
+      const refElement = isRefObject(reactNode.ref)
+        ? reactNode.ref.current
+        : reactNode.ref
       if (!(refElement instanceof HTMLElement)) {
         return findDOMNode(refElement)
       }
       return refElement
-    } 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)
+    } 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)!
     }
-    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 { getCSSStyleDeclaration, findDOMNode } from './'
+import { getComputedStyle, findDOMNode } from './'
 import type { UIElement } from '@instructure/shared-types'
 
 const focusableSelector = [
@@ -103,8 +103,8 @@ function findFocusable(
 }
 
 function hidden(element: Element | Node) {
-  const cs = getCSSStyleDeclaration(element)
-  return cs?.display === 'none'
+  const cs = getComputedStyle(element)
+  return cs.display === 'none'
 }
 
 function positioned(element: Element | Node) {
@@ -112,12 +112,11 @@ function positioned(element: Element | Node) {
   if (POS.includes((element as HTMLElement).style.position?.toLowerCase())) {
     return true
   }
-
-  const position = getCSSStyleDeclaration(element)
-    ?.getPropertyValue('position')
-    ?.toLowerCase()
-
-  if (position && POS.includes(position)) {
+  if (
+    POS.includes(
+      getComputedStyle(element).getPropertyValue('position')?.toLowerCase()
+    )
+  ) {
     return true
   }
   return false
@@ -141,4 +140,6 @@ function focusable(element: Element & { disabled?: boolean }) {
 }
 
 export default findFocusable
-export { findFocusable }
+export {
+  findFocusable
+}

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

@@ -34,29 +34,23 @@ import type { UIElement } from '@instructure/shared-types'
  *
  * Get the associated CSS properties and values for a
  * specified element
- * @module getCSSStyleDeclaration
+ * @module getComputedStyle
  *
  * @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 { CSSStyleDeclaration | undefined } The style declaration containing css properties and values for the element or undefined
+ * @returns { Object } object containing css properties and values for the element
  */
-function getCSSStyleDeclaration(el?: UIElement, pseudoElt?: string | null) {
-  let style: CSSStyleDeclaration | undefined
+function getComputedStyle(el?: UIElement, pseudoElt?: string | null) {
+  let style = {}
   if (canUseDOM) {
     const node = el && findDOMNode(el)
     if (node) {
       const window = ownerWindow(el)
-      try {
-        style = window
-          ? window.getComputedStyle(node as Element, pseudoElt)
-          : undefined
-      } catch {
-        style = undefined
-      }
+      style = window ? window.getComputedStyle(node as Element, pseudoElt) : {}
     }
   }
-  return style
+  return style as CSSStyleDeclaration
 }
 
-export default getCSSStyleDeclaration
-export { getCSSStyleDeclaration }
+export default getComputedStyle
+export { getComputedStyle }

package/src/getFontSize.ts

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

package/src/getOffsetParents.ts

@@ -24,7 +24,7 @@
 
 import { findDOMNode } from './findDOMNode'
 import { canUseDOM } from './canUseDOM'
-import { getCSSStyleDeclaration } from './getCSSStyleDeclaration'
+import { getComputedStyle } from './getComputedStyle'
 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 = getCSSStyleDeclaration(parent) as CSSStyleDeclaration
+      const style = getComputedStyle(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 { getCSSStyleDeclaration } from './getCSSStyleDeclaration'
+import { getComputedStyle } from './getComputedStyle'
 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 = getCSSStyleDeclaration(node)
-    const position = computedStyle?.position
+    const computedStyle = getComputedStyle(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 = getCSSStyleDeclaration(parent)
+        style = getComputedStyle(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 { getCSSStyleDeclaration } from './getCSSStyleDeclaration'
+export { getComputedStyle } from './getComputedStyle'
 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 { getCSSStyleDeclaration } from './getCSSStyleDeclaration'
+import { getComputedStyle } from './getComputedStyle'
 import { UIElement } from '@instructure/shared-types'
 
 /**
@@ -52,24 +52,22 @@ function isVisible(el?: UIElement, recursive = true): boolean {
     return isVisible(parent, recursive)
   }
 
-  const style = node
-    ? getCSSStyleDeclaration(node)
-    : ({} as CSSStyleDeclaration)
+  const style = node ? getComputedStyle(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') {