@teambit/react.ui.component-highlighter 0.0.509 → 0.0.512

package/hover-highlighter/bubble-to-component.tsx

@@ -0,0 +1,69 @@
+import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
+import {
+  componentMetaField,
+  hasComponentMeta,
+  ReactComponentMetaHolder,
+} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
+
+type BubblingOptions = {
+  /** filter elements by this rule */
+  elementRule?: MatchRule;
+  /** filter components by this rule */
+  componentRule?: ComponentMatchRule;
+  /**
+   * continue bubbling when encountering a parent of the same component
+   * @default true
+   */
+  propagateSameParents?: boolean;
+};
+
+/** go up the dom tree until reaching a react bit component */
+export function bubbleToComponent(
+  element: HTMLElement | null,
+  { elementRule, componentRule, propagateSameParents = true }: BubblingOptions = {}
+) {
+  let current = bubbleToFirstComponent(element, elementRule, componentRule);
+  if (!propagateSameParents) return current;
+
+  while (current) {
+    const parentElement = current.element.parentElement;
+    const parent = bubbleToFirstComponent(parentElement, elementRule, componentRule);
+
+    const primeComponent = current?.components.slice(-1).pop();
+    const parentPrimeComponent = parent?.components.slice(-1).pop();
+
+    if (primeComponent?.[componentMetaField].id !== parentPrimeComponent?.[componentMetaField].id) return current;
+
+    current = parent;
+  }
+
+  return undefined;
+}
+
+/** go up the dom tree until reaching a react bit component */
+function bubbleToFirstComponent(
+  element: HTMLElement | null,
+  elementRule?: MatchRule,
+  componentRule?: ComponentMatchRule
+) {
+  for (let current = element; current; current = current.parentElement) {
+    current = toRootElement(current);
+    if (!current) return undefined;
+    if (ruleMatcher(current, elementRule)) {
+      const components = domToReacts(current);
+
+      const relevantComponents = components.filter(
+        (x) => hasComponentMeta(x) && componentRuleMatcher({ meta: x[componentMetaField] }, componentRule)
+      ) as ReactComponentMetaHolder[];
+
+      if (relevantComponents.length < 1) return undefined;
+      return {
+        element: current,
+        components: relevantComponents,
+      };
+    }
+  }
+
+  return undefined;
+}

package/hover-highlighter/use-hover-highlighter.tsx

@@ -1,17 +1,13 @@
 import React, { useEffect } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
-import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
 import { useHoverSelection } from '@teambit/react.ui.hover-selector';
-import {
-  componentMetaField,
-  hasComponentMeta,
-  ReactComponentMetaHolder,
-} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 
 import { excludeHighlighterSelector } from '../ignore-highlighter';
-import { HighlightTarget } from '../element-highlighter';
-import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
+import { MatchRule, ComponentMatchRule } from '../rule-matcher';
+import { bubbleToComponent } from './bubble-to-component';
 
+type HighlightTarget = { element: HTMLElement; components: ComponentMetaHolder[] };
 export type useHoverHighlighterOptions = {
   debounceDuration: number;
   scopeClass: string;
@@ -63,7 +59,7 @@ function useHoverHandler({
     // skip DOM trees having 'data-ignore-component-highlight'
     if (element.closest(`.${scopeClass} ${excludeHighlighterSelector}`)) return;
 
-    const result = bubbleToBitComponent(element, rule, componentRule);
+    const result = bubbleToComponent(element, { elementRule: rule, componentRule });
     if (!result) return;
 
     onChange({
@@ -81,30 +77,3 @@ function useHoverHandler({
 
   return { handleElement };
 }
-
-/** go up the dom tree until reaching a react bit component */
-function bubbleToBitComponent(
-  element: HTMLElement | null,
-  elementRule?: MatchRule,
-  componentRule?: ComponentMatchRule
-) {
-  for (let current = element; current; current = current.parentElement) {
-    current = toRootElement(current);
-    if (!current) return undefined;
-    if (ruleMatcher(current, elementRule)) {
-      const components = domToReacts(current);
-
-      const relevantComponents = components.filter(
-        (x) => hasComponentMeta(x) && componentRuleMatcher({ meta: x[componentMetaField] }, componentRule)
-      ) as ReactComponentMetaHolder[];
-
-      if (relevantComponents.length < 1) return undefined;
-      return {
-        element: current,
-        components: relevantComponents,
-      };
-    }
-  }
-
-  return undefined;
-}

package/hybrid-highlighter/hybrid-highlighter.tsx

@@ -2,11 +2,15 @@ import React, { useState, useEffect, useMemo, useRef, createRef, CSSProperties }
 import classnames from 'classnames';
 import { v4 } from 'uuid';
 
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
 import { useHoverHighlighter } from '../hover-highlighter';
-import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../element-highlighter';
+import { ElementHighlighter, Placement, HighlightClasses } from '../element-highlighter';
 import { useChildrenHighlighter } from '../children-highlighter';
 import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 
+type HighlightTarget = { element: HTMLElement; components: ComponentMetaHolder[] };
+
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
   /** stop all highlighting and drop listeners */
   disabled?: boolean;
@@ -119,7 +123,8 @@ export function HybridHighlighter({
       {Object.entries(targets).map(([key, target]) => (
         <ElementHighlighter
           key={key}
-          target={target}
+          targetRef={{ current: target.element }}
+          components={target.components}
           classes={classes}
           style={highlightStyle}
           placement={placement}

package/index.ts

@@ -8,7 +8,7 @@ export { ChildrenHighlighter } from './children-highlighter';
 export type { ChildrenHighlighterProps } from './children-highlighter';
 
 export { ElementHighlighter } from './element-highlighter';
-export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
+export type { ElementHighlighterProps, Placement, HighlightClasses } from './element-highlighter';
 
 export {
   ExcludeHighlighter,

package/label/component-strip.tsx

@@ -3,6 +3,7 @@ import { NativeLink } from '@teambit/base-ui.routing.native-link';
 import { ComponentID } from '@teambit/component-id';
 import { ScopeUrl } from '@teambit/component.modules.component-url';
 import {
+  ComponentMeta,
   componentMetaField,
   ComponentMetaHolder,
 } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
@@ -10,13 +11,13 @@ import styles from './component-strip.module.scss';
 import { calcComponentLink } from './links';
 
 interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
-  component: ComponentMetaHolder;
+  component: ComponentMetaHolder | string;
 }
 export const ComponentStrip = forwardRef(function ComponentStrip(
   { component, children }: ComponentStripProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
-  const { id, homepage, exported } = component[componentMetaField];
+  const { id, homepage, exported } = extractMetadata(component);
 
   const parsedId = useMemo(() => ComponentID.tryFromString(id), [id]);
   const componentLink = homepage || calcComponentLink(parsedId, exported);
@@ -44,3 +45,11 @@ function LabelBlock({ link, children }: { link?: string; children: ReactNode })
     </Comp>
   );
 }
+
+function extractMetadata(metadata: string | ComponentMetaHolder): ComponentMeta {
+  if (typeof metadata === 'string') {
+    return { id: metadata, exported: true };
+  }
+
+  return metadata[componentMetaField];
+}

package/label/label-container.tsx

@@ -1,12 +1,18 @@
-import React, { useMemo, useState } from 'react';
-import { usePopper } from 'react-popper';
-import type { Placement, Modifier } from '@popperjs/core';
-import '@popperjs/core';
-
-import { useAnimationFrame } from '../use-animation-frame';
+import React, { useLayoutEffect, useEffect, RefObject } from 'react';
+import classnames from 'classnames';
+import compact from 'lodash.compact';
+import {
+  useFloating,
+  offset as offsetMiddleware,
+  flip as flipMiddleware,
+  shift,
+  autoUpdate,
+} from '@floating-ui/react-dom';
+import type { Placement } from '@floating-ui/react-dom';
+import styles from './label.module.scss';
 
 export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  targetRef: HTMLElement | null;
+  targetRef: RefObject<HTMLElement | null>;
   offset?: [number, number];
   placement?: Placement;
   flip?: boolean;
@@ -16,7 +22,6 @@ export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement
 
 export type { Placement };
 
-// TODO - replace this with TippyJS, when it supports a `targetElement={targetRef.current}` prop
 export function LabelContainer({
   targetRef,
   offset,
@@ -24,23 +29,38 @@ export function LabelContainer({
   flip = true,
   watchMotion,
   className,
+  style,
   ...rest
 }: LabelContainerProps) {
-  const [sourceRef, setSourceRef] = useState<HTMLDivElement | null>(null);
-
-  const modifiers = useMemo<Partial<Modifier<any, any>>[]>(
-    () => [{ name: 'offset', options: { offset } }],
-    [flip, offset]
-  );
-
-  const { styles, attributes, update } = usePopper(targetRef, sourceRef, {
-    modifiers,
+  const { x, y, strategy, floating, reference, refs, update } = useFloating({
     placement,
+    middleware: compact([
+      offset && offsetMiddleware({ mainAxis: offset[0], crossAxis: offset[1] }),
+      flip && flipMiddleware(),
+      shift({ rootBoundary: 'viewport' }),
+    ]),
   });
 
-  useAnimationFrame(!!watchMotion && update);
+  useLayoutEffect(() => {
+    reference(targetRef.current);
+  }, [targetRef.current, reference]);
 
-  if (!targetRef) return null;
+  // automatically update on scroll, resize, etc.
+  // `watchMotion` will trigger continuous updates using animation frame
+  useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) return () => {};
 
-  return <div {...rest} ref={setSourceRef} className={className} style={styles.popper} {...attributes.popper} />;
+    return autoUpdate(refs.reference.current, refs.floating.current, update, { animationFrame: !!watchMotion });
+  }, [refs.reference.current, refs.floating.current, update, watchMotion]);
+
+  const isReady = x !== null;
+
+  return (
+    <div
+      {...rest}
+      ref={floating}
+      className={classnames(className, !isReady && styles.hidden)}
+      style={{ ...style, position: strategy, top: y ?? '', left: x ?? '' }}
+    />
+  );
 }

package/label/label.module.scss

@@ -22,3 +22,9 @@
     transform: rotate(-180deg);
   }
 }
+
+.hidden {
+  visibility: hidden;
+  pointer-events: none;
+  user-select: none;
+}

package/label/label.tsx

@@ -7,7 +7,7 @@ import { ComponentStrip } from './component-strip';
 import { OtherComponentsPopper } from './other-components';
 
 export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
-  components: ComponentMetaHolder[];
+  components: (ComponentMetaHolder | string)[];
 }
 
 export function Label({ components, ...props }: LabelProps) {

package/label/other-components.tsx

@@ -6,7 +6,7 @@ import { ComponentStrip } from './component-strip';
 import styles from './label.module.scss';
 
 export type OtherComponentsProps = {
-  components: ComponentMetaHolder[];
+  components: (ComponentMetaHolder | string)[];
   start?: number;
   end?: number;
 } & TippyProps;

package/mock-component.tsx

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from 'react';
+import { componentMetaField } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
+export function MockTarget({ children, ...rest }: PropsWithChildren<{}>) {
+  return <div {...rest}>mocked {children}</div>;
+}
+MockTarget[componentMetaField] = {
+  id: 'teambit.design/ui/icon-button@1.6.2',
+};

package/package.json

@@ -1,41 +1,40 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.509",
+  "version": "0.0.512",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.509"
+    "version": "0.0.512"
   },
   "dependencies": {
     "get-xpath": "3.0.1",
+    "@floating-ui/react-dom": "0.6.0",
     "classnames": "2.2.6",
-    "uuid": "3.4.0",
-    "@popperjs/core": "2.6.0",
-    "react-popper": "2.2.4",
     "use-debounce": "6.0.1",
+    "uuid": "3.4.0",
+    "lodash.compact": "3.0.1",
     "url-join": "4.0.1",
     "@tippyjs/react": "4.2.0",
     "core-js": "^3.0.0",
-    "@teambit/base-ui.utils.popper-js.ignore-popper-size": "1.0.0",
-    "@teambit/base-ui.utils.popper-js.resize-to-match-reference": "1.0.0",
     "@teambit/base-ui.routing.native-link": "1.0.0",
-    "@teambit/component-id": "0.0.401",
-    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.20",
-    "@teambit/react.modules.dom-to-react": "0.0.488",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.486",
-    "@teambit/react.ui.hover-selector": "0.0.164",
-    "@teambit/component.modules.component-url": "0.0.122"
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
+    "@teambit/component-id": "0.0.402",
+    "@teambit/react.modules.dom-to-react": "0.0.489",
+    "@teambit/react.ui.hover-selector": "0.0.165",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
+    "@teambit/component.modules.component-url": "0.0.124"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
     "@testing-library/react": "11.2.6",
     "@types/classnames": "2.2.11",
-    "@types/uuid": "3.4.9",
     "@types/react-dom": "^17.0.5",
+    "@types/uuid": "3.4.9",
+    "@types/lodash.compact": "3.0.6",
     "@types/url-join": "4.0.0",
-    "@types/mocha": "5.2.7",
+    "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
     "@babel/runtime": "7.12.18",
     "@types/jest": "^26.0.0",
@@ -59,7 +58,7 @@
       },
       "devDependencies": {
         "@teambit/legacy": "-",
-        "@types/mocha": "5.2.7",
+        "@types/mocha": "9.1.0",
         "@types/testing-library__jest-dom": "5.9.5",
         "@babel/runtime": "7.12.18",
         "@types/jest": "^26.0.0",

package/preview-1648659683881.js

@@ -0,0 +1,2 @@
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.512/dist/children-highlighter/children-highlighter.composition.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.512/dist/hover-highlighter/hover-highlighter.compositions.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.512/dist/element-highlighter/element-highlighter.compositions.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.512/dist/component-highlighter.docs.md')]

package/__preview-1644377006839.js

@@ -1,2 +0,0 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.509/dist/children-highlighter/children-highlighter.composition.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.509/dist/element-highlighter/element-highlighter.compositions.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.509/dist/hover-highlighter/hover-highlighter.compositions.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.509/dist/component-highlighter.docs.md')]

package/dist/use-animation-frame.d.ts

@@ -1 +0,0 @@
-export declare function useAnimationFrame(cb?: false | null | (() => any), deps?: any[]): void;

package/dist/use-animation-frame.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAnimationFrame = void 0;
-const react_1 = require("react");
-// TODO - extract to its own component
-function useAnimationFrame(cb, deps = []) {
-    (0, react_1.useEffect)(() => {
-        if (!cb)
-            return () => { };
-        let animationFrameId = -1;
-        const animate = () => {
-            cb();
-            animationFrameId = window.requestAnimationFrame(animate);
-        };
-        animate();
-        return () => {
-            if (animationFrameId > -1)
-                window.cancelAnimationFrame(animationFrameId);
-        };
-    }, [cb, ...deps]);
-}
-exports.useAnimationFrame = useAnimationFrame;
-//# sourceMappingURL=use-animation-frame.js.map

package/dist/use-animation-frame.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-animation-frame.js","sourceRoot":"","sources":["../use-animation-frame.tsx"],"names":[],"mappings":";;;AAAA,iCAAkC;AAElC,sCAAsC;AAEtC,SAAgB,iBAAiB,CAAC,EAA+B,EAAE,OAAc,EAAE;IACjF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,EAAE;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAEzB,IAAI,gBAAgB,GAAG,CAAC,CAAC,CAAC;QAC1B,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,EAAE,EAAE,CAAC;YACL,gBAAgB,GAAG,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;QAC3D,CAAC,CAAC;QACF,OAAO,EAAE,CAAC;QAEV,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,GAAG,CAAC,CAAC;gBAAE,MAAM,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;QAC3E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;AACpB,CAAC;AAfD,8CAeC"}

package/use-animation-frame.tsx

@@ -1,20 +0,0 @@
-import { useEffect } from 'react';
-
-// TODO - extract to its own component
-
-export function useAnimationFrame(cb?: false | null | (() => any), deps: any[] = []) {
-  useEffect(() => {
-    if (!cb) return () => {};
-
-    let animationFrameId = -1;
-    const animate = () => {
-      cb();
-      animationFrameId = window.requestAnimationFrame(animate);
-    };
-    animate();
-
-    return () => {
-      if (animationFrameId > -1) window.cancelAnimationFrame(animationFrameId);
-    };
-  }, [cb, ...deps]);
-}