feat(dom): findAncestor deprecated (#221)

Use findClosest instead

DEPRECATED: findAncestor deprecated

Use fincClosest instead with element.parentElement

Author: krutoo

docs/docs/dom/find-ancestor.mdx

@@ -1,11 +1,20 @@
-# `findAncestor`
+import { Callout } from '#components/callout/callout';
 
 export const meta = {
   title: 'findAncestor',
   category: 'DOM',
   menuPriority: 90,
 };
 
+# `findAncestor`
+
+<Callout intent='danger'>
+  <Callout.Heading>Deprecated</Callout.Heading>
+  <Callout.Main>
+    Use [findClosest](./?path=/dom/find-closest) with `element.parentElement` instead.
+  </Callout.Main>
+</Callout>
+
 Finds closest ancestor element that matches condition.
 
 ```ts

docs/docs/dom/find-closest.mdx

@@ -14,5 +14,5 @@ import { findClosest } from '@krutoo/utils';
 const element = document.querySelector('#something');
 
 // element or null returns
-const closestTarget = findClosest(element, parent => parent.classList.contains('target'));
+const closestTarget = findClosest(element, el => el.classList.contains('target'));
 ```

docs/package-lock.json

@@ -3,19 +3,19 @@ import classNames from 'classnames';
 import styles from './callout.m.css';
 
 export interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
-  level?: 'info' | 'danger';
+  intent?: 'info' | 'danger';
 }
 
 export interface CalloutHeadingProps extends HTMLAttributes<HTMLHeadingElement> {}
 
 export interface CalloutMainProps extends HTMLAttributes<HTMLDivElement> {}
 
-export function Callout({ level = 'info', children, className, ...restProps }: CalloutProps) {
+export function Callout({ intent = 'info', children, className, ...restProps }: CalloutProps) {
   return (
     <div
       {...restProps}
-      className={classNames(styles.callout, styles[level], className)}
-      data-intent={level}
+      className={classNames(styles.callout, className)}
+      data-intent={intent}
       data-marker='callout'
     >
       {children}

docs/src/components/callout/callout.tsx

@@ -3,7 +3,7 @@
  * @param element Target element to find ancestor.
  * @param predicate Function that check ancestor.
  * @returns Element or null.
- * @todo Replace by `findClosest`?
+ * @deprecated Use `findClosest(element.parentElement)` instead.
  */
 export function findAncestor(
   element: Element,

src/dom/find-ancestor.ts

@@ -1,5 +1,5 @@
 import type { Point2d } from '../math/mod.ts';
-import { findAncestor } from './find-ancestor.ts';
+import { findClosest } from './find-closest.ts';
 import { isScrollable } from './is-scrollable.ts';
 
 export interface PositioningOptions {
@@ -21,10 +21,12 @@ export function getPositionedParentOffset(
     return { x: 0, y: 0 };
   }
 
-  const offsetParent = findAncestor(
-    element,
-    strategy === 'fixed' ? isContainingBlockForFixed : isContainingBlock,
-  );
+  const offsetParent = element.parentElement
+    ? findClosest(
+        element.parentElement,
+        strategy === 'fixed' ? isContainingBlockForFixed : isContainingBlock,
+      )
+    : null;
 
   const offset: Point2d = {
     x: 0,
@@ -48,7 +50,9 @@ export function getPositionedParentOffset(
     offset.y += cssValueToNumber(parentStyle.borderTopWidth);
   }
 
-  const scrollParent = findAncestor(element, isScrollable) ?? document.documentElement;
+  const scrollParent =
+    (element.parentElement ? findClosest(element.parentElement, isScrollable) : null) ??
+    document.documentElement;
 
   // IMPORTANT: check offsetParent's scrollTop/scrollLeft
   if (offsetParent && offsetParent === scrollParent) {