@teambit/react.ui.component-highlighter 0.0.511 → 0.0.514

package/children-highlighter/use-children-highlighter.tsx

@@ -3,15 +3,17 @@ import getXPath from 'get-xpath';
 import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
 import {
   componentMetaField,
+  ComponentMetaHolder,
   hasComponentMeta,
   ReactComponentMetaHolder,
 } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-import { HighlightTarget } from '../element-highlighter';
 import { excludeHighlighterSelector } from '../ignore-highlighter';
 import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
 
+type HighlighterTarget = Record<string, { element: HTMLElement; components: ComponentMetaHolder[] }>;
+
 export type ChildrenHighlighterOptions = {
-  onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
+  onChange: (highlighterTargets: HighlighterTarget) => void;
   disabled?: boolean;
   scopeRef: RefObject<HTMLElement>;
   scopeClass?: string;
@@ -32,7 +34,7 @@ export function useChildrenHighlighter({
   componentRule,
 }: ChildrenHighlighterOptions) {
   useEffect(() => {
-    const nextTargets: Record<string, HighlightTarget> = {};
+    const nextTargets: HighlighterTarget = {};
     const scopeElement = scopeRef.current;
     if (!scopeElement || disabled) return;
 

package/component-highlighter.docs.md

@@ -34,23 +34,12 @@ You can also use it manually, to have more control:
 import { ElementHighlighter } from '@teambit/react.ui.component-highlighter';
 
 function ManualHighlight() {
-  const [element, setElement] = useState<HTMLElement | undefined>(undefined);
-
-  useEffect(() => setElement(document.getElementById('to-highlight')), [targetRef.current]);
-
-  const target = targetElement && {
-    element: targetElement,
-    id: 'teambit.design/ui/icon-button',
-
-    // explicit overrides:
-    link: 'https://bit.dev/teambit/design/ui/icon-button',
-    scopeLink: 'https://bit.dev/teambit/design',
-  };
+  const targetRef = createRef<HTMLElement | undefined>(null);
 
   return (
     <div>
-      <div id="to-highlight">highlight target</div>
-      {target && <ElementHighlighter target={target} />}
+      <div ref={targetRef}>highlight target</div>
+      <ElementHighlighter targetRef={targetRef} components={['teambit.design/ui/icon-button']} />
     </div>
   );
 }

package/dist/children-highlighter/use-children-highlighter.d.ts

@@ -1,8 +1,12 @@
 import { RefObject } from 'react';
-import { HighlightTarget } from '../element-highlighter';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import { MatchRule, ComponentMatchRule } from '../rule-matcher';
+declare type HighlighterTarget = Record<string, {
+    element: HTMLElement;
+    components: ComponentMetaHolder[];
+}>;
 export declare type ChildrenHighlighterOptions = {
-    onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
+    onChange: (highlighterTargets: HighlighterTarget) => void;
     disabled?: boolean;
     scopeRef: RefObject<HTMLElement>;
     scopeClass?: string;
@@ -11,3 +15,4 @@ export declare type ChildrenHighlighterOptions = {
     componentRule?: ComponentMatchRule;
 };
 export declare function useChildrenHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector, rule, componentRule, }: ChildrenHighlighterOptions): void;
+export {};

package/dist/children-highlighter/use-children-highlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-children-highlighter.js","sourceRoot":"","sources":["../../children-highlighter/use-children-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA6C;AAC7C,0DAAiC;AACjC,oFAAiF;AACjF,oJAI6E;AAE7E,8DAAmE;AACnE,kDAAmG;AAenG,SAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,aAAa,GAAG,EAAE,EAC9B,IAAI,EACJ,aAAa,GACc;IAC3B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAoC,EAAE,CAAC;QACxD,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,YAAY,IAAI,QAAQ;YAAE,OAAO;QAEtC,wCAAwC;QACxC,IAAI,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAc,eAAe,CAAC,IAAI,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/G,uBAAuB;QACvB,IAAI,IAAI;YAAE,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAA,0BAAW,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9E,yBAAyB;QACzB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,0CAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvE,cAAc;QACd,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC;QAE1C,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC9B,IAAI,CAAC,OAAO;gBAAE,OAAO;YACrB,MAAM,KAAK,GAAG,IAAA,wCAAW,EAAC,OAAO,CAAC,CAAC;YACnC,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CACrC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,6EAAgB,EAAC,CAAC,CAAC,IAAI,IAAA,mCAAoB,EAAC,EAAE,IAAI,EAAE,CAAC,CAAC,+EAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACrE,CAAC;YAEhC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO;YAE1C,MAAM,GAAG,GAAG,IAAA,mBAAQ,EAAC,OAAO,CAAC,CAAC;YAE9B,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC;QACjE,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;AAChC,CAAC;AAtCD,wDAsCC;AAED,SAAS,eAAe;AACtB;;;GAGG;AACH,aAAa,GAAG,QAAQ;IAExB,OAAO,QAAQ,aAAa,IAAI,+CAA0B,KAAK,aAAa,IAAI,+CAA0B,KAAK,CAAC;AAClH,CAAC"}
+{"version":3,"file":"use-children-highlighter.js","sourceRoot":"","sources":["../../children-highlighter/use-children-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA6C;AAC7C,0DAAiC;AACjC,oFAAiF;AACjF,oJAK6E;AAC7E,8DAAmE;AACnE,kDAAmG;AAiBnG,SAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,aAAa,GAAG,EAAE,EAC9B,IAAI,EACJ,aAAa,GACc;IAC3B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAsB,EAAE,CAAC;QAC1C,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,YAAY,IAAI,QAAQ;YAAE,OAAO;QAEtC,wCAAwC;QACxC,IAAI,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAc,eAAe,CAAC,IAAI,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/G,uBAAuB;QACvB,IAAI,IAAI;YAAE,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAA,0BAAW,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9E,yBAAyB;QACzB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,0CAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvE,cAAc;QACd,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC;QAE1C,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC9B,IAAI,CAAC,OAAO;gBAAE,OAAO;YACrB,MAAM,KAAK,GAAG,IAAA,wCAAW,EAAC,OAAO,CAAC,CAAC;YACnC,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CACrC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,6EAAgB,EAAC,CAAC,CAAC,IAAI,IAAA,mCAAoB,EAAC,EAAE,IAAI,EAAE,CAAC,CAAC,+EAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACrE,CAAC;YAEhC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO;YAE1C,MAAM,GAAG,GAAG,IAAA,mBAAQ,EAAC,OAAO,CAAC,CAAC;YAE9B,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC;QACjE,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;AAChC,CAAC;AAtCD,wDAsCC;AAED,SAAS,eAAe;AACtB;;;GAGG;AACH,aAAa,GAAG,QAAQ;IAExB,OAAO,QAAQ,aAAa,IAAI,+CAA0B,KAAK,aAAa,IAAI,+CAA0B,KAAK,CAAC;AAClH,CAAC"}

package/dist/component-highlighter.docs.md

@@ -34,23 +34,12 @@ You can also use it manually, to have more control:
 import { ElementHighlighter } from '@teambit/react.ui.component-highlighter';
 
 function ManualHighlight() {
-  const [element, setElement] = useState<HTMLElement | undefined>(undefined);
-
-  useEffect(() => setElement(document.getElementById('to-highlight')), [targetRef.current]);
-
-  const target = targetElement && {
-    element: targetElement,
-    id: 'teambit.design/ui/icon-button',
-
-    // explicit overrides:
-    link: 'https://bit.dev/teambit/design/ui/icon-button',
-    scopeLink: 'https://bit.dev/teambit/design',
-  };
+  const targetRef = createRef<HTMLElement | undefined>(null);
 
   return (
     <div>
-      <div id="to-highlight">highlight target</div>
-      {target && <ElementHighlighter target={target} />}
+      <div ref={targetRef}>highlight target</div>
+      <ElementHighlighter targetRef={targetRef} components={['teambit.design/ui/icon-button']} />
     </div>
   );
 }

package/dist/element-highlighter/element-highlighter.compositions.d.ts

@@ -9,4 +9,6 @@ export declare const HighlightedElement: ({ style, targetStyle, watchMotion, cla
 export declare const Customized: () => JSX.Element;
 export declare const Sizes: () => JSX.Element;
 export declare const MovingElement: () => JSX.Element;
+export declare const ElementOnTheEdge: () => JSX.Element;
+export declare const FullscreenElement: () => JSX.Element;
 export {};

package/dist/element-highlighter/element-highlighter.compositions.js

@@ -19,27 +19,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MovingElement = exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
-const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
+exports.FullscreenElement = exports.ElementOnTheEdge = exports.MovingElement = exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
 const react_1 = __importStar(require("react"));
 const element_highlighter_1 = require("./element-highlighter");
-const mockTarget = {
-    components: [
-        {
-            [react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]: {
-                id: 'teambit.design/ui/icon-button@1.6.2',
-            },
-        },
-    ],
-};
+const mock_component_1 = require("../mock-component");
 const HighlightedElement = ({ style, targetStyle, watchMotion, className }) => {
-    const [targetElement, setTargetElement] = (0, react_1.useState)(undefined);
     const targetRef = (0, react_1.createRef)();
-    (0, react_1.useEffect)(() => setTargetElement(targetRef.current || undefined), [targetRef.current]);
-    const target = targetElement && Object.assign(Object.assign({}, mockTarget), { element: targetElement });
     return (react_1.default.createElement("div", { className: className, style: { padding: '16px 16px 40px 16px', width: 300, fontFamily: 'sans-serif' } },
         react_1.default.createElement("div", { ref: targetRef, style: Object.assign({ width: 100 }, targetStyle) }, "highlight target"),
-        target && react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, style: style, watchMotion: watchMotion, placement: "bottom" })));
+        react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: targetRef, components: [mock_component_1.MockTarget], style: style, watchMotion: watchMotion, placement: "bottom" })));
 };
 exports.HighlightedElement = HighlightedElement;
 const Customized = () => {
@@ -57,13 +45,41 @@ const Sizes = () => {
         react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: 18 } })));
 };
 exports.Sizes = Sizes;
+const fps = 30;
+const frameInterval = 1000 / fps;
 const MovingElement = () => {
     const [margin, setMargin] = (0, react_1.useState)(0);
     (0, react_1.useEffect)(() => {
-        const intervalId = setInterval(() => setMargin((x) => (x + 1) % 100), 80);
+        const intervalId = setInterval(() => setMargin((x) => (x + 1) % 100), frameInterval);
         return () => clearInterval(intervalId);
     }, []);
-    return react_1.default.createElement(exports.HighlightedElement, { targetStyle: { marginLeft: margin } });
+    return react_1.default.createElement(exports.HighlightedElement, { targetStyle: { marginLeft: margin }, watchMotion: true });
 };
 exports.MovingElement = MovingElement;
+const ElementOnTheEdge = () => {
+    const targetRef = (0, react_1.createRef)();
+    return (react_1.default.createElement("div", { style: { fontFamily: 'sans-serif' } },
+        react_1.default.createElement("div", { ref: targetRef, style: { width: '100%', border: '1px solid black', boxSizing: 'border-box' } },
+            "This element is on the edge of the document, making the highlighter overflow. ",
+            react_1.default.createElement("br", null),
+            "It should instead shrink to fit inside the document."),
+        react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: targetRef, components: [mock_component_1.MockTarget], watchMotion: true })));
+};
+exports.ElementOnTheEdge = ElementOnTheEdge;
+const FullscreenElement = () => {
+    const targetRef = (0, react_1.createRef)();
+    return (react_1.default.createElement("div", { style: { fontFamily: 'sans-serif' } },
+        react_1.default.createElement("div", { ref: targetRef, style: {
+                height: '100vh',
+                width: '100%',
+                background: '#bceed4',
+            } },
+            "This element will cover the entire document,",
+            react_1.default.createElement("br", null),
+            "pushing the highlighter to the edge of the window.",
+            react_1.default.createElement("br", null),
+            "The highlighter should remain inside and expand no further than the document."),
+        react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: targetRef, components: [mock_component_1.MockTarget], watchMotion: true })));
+};
+exports.FullscreenElement = FullscreenElement;
 //# sourceMappingURL=element-highlighter.compositions.js.map

package/dist/element-highlighter/element-highlighter.compositions.js.map

@@ -1 +1 @@
-{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,oJAAyG;AACzG,+CAA6E;AAC7E,+DAA4E;AAE5E,MAAM,UAAU,GAA6B;IAC3C,UAAU,EAAE;QACV;YACE,CAAC,+EAAkB,CAAC,EAAE;gBACpB,EAAE,EAAE,qCAAqC;aAC1C;SACF;KACF;CACF,CAAC;AASK,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAA2B,EAAE,EAAE;IAC5G,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAA0B,SAAS,CAAC,CAAC;IACvF,MAAM,SAAS,GAAG,IAAA,iBAAS,GAAkB,CAAC;IAE9C,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACvF,MAAM,MAAM,GAAG,aAAa,oCAAS,UAAU,KAAE,OAAO,EAAE,aAAa,GAAE,CAAC;IAE1E,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QACxG,uCAAK,GAAG,EAAE,SAAS,EAAE,KAAK,kBAAI,KAAK,EAAE,GAAG,IAAK,WAAW,wBAElD;QACL,MAAM,IAAI,8BAAC,wCAAkB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAC,QAAQ,GAAG,CACxG,CACP,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,kBAAkB,sBAe7B;AAEK,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,8BAAC,0BAAkB,IACjB,KAAK,EACH;YACE,yBAAyB,EAAE,SAAS;YACpC,+BAA+B,EAAE,SAAS;YAC1C,gCAAgC,EAAE,SAAS;SAC3B,GAEpB,CACH,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,UAAU,cAYrB;AAEK,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,CACL;QACE,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI;QAC/C,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI;QAC/C,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI,CAC3C,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,KAAK,SAQhB;AAEK,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAExC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1E,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,8BAAC,0BAAkB,IAAC,WAAW,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,GAAI,CAAC;AACrE,CAAC,CAAC;AATW,QAAA,aAAa,iBASxB"}
+{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":"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"}

package/dist/element-highlighter/element-highlighter.d.ts

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import { Placement } from '../label';
 export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** target element to highlight */
-    target: HighlightTarget;
+    /** highlight this element */
+    targetRef: RefObject<HTMLElement | null>;
+    /** components with metadata to show in the label */
+    components?: (ComponentMetaHolder | string)[];
     /** default location of the label */
     placement?: Placement;
     /** customize styles */
@@ -12,15 +14,9 @@ export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivEle
     watchMotion?: boolean;
 }
 export { Placement };
-export declare type HighlightTarget = {
-    /** element to show the highlight at */
-    element: HTMLElement;
-    /** components with metadata to show in the label */
-    components?: ComponentMetaHolder[];
-};
 export declare type HighlightClasses = {
     container?: string;
     frame?: string;
     label?: string;
 };
-export declare function ElementHighlighter({ target, placement, watchMotion, className, classes, ...props }: ElementHighlighterProps): JSX.Element;
+export declare function ElementHighlighter({ targetRef, components, placement, watchMotion, className, classes, ...props }: ElementHighlighterProps): JSX.Element;

package/dist/element-highlighter/element-highlighter.js

@@ -22,11 +22,11 @@ const label_1 = require("../label");
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const element_highlighter_module_scss_1 = __importDefault(require("./element-highlighter.module.scss"));
 function ElementHighlighter(_a) {
-    var { target, placement = 'top', watchMotion = true, className, classes } = _a, props = __rest(_a, ["target", "placement", "watchMotion", "className", "classes"]);
+    var { targetRef, components, placement = 'top', watchMotion, className, classes } = _a, props = __rest(_a, ["targetRef", "components", "placement", "watchMotion", "className", "classes"]);
     return (react_1.default.createElement("div", Object.assign({}, props, ignore_highlighter_1.excludeHighlighterAtt, { className: (0, classnames_1.default)(classes === null || classes === void 0 ? void 0 : classes.container, element_highlighter_module_scss_1.default.container, className) }),
-        react_1.default.createElement(frame_1.Frame, { targetRef: target.element, className: (0, classnames_1.default)(element_highlighter_module_scss_1.default.frame, classes === null || classes === void 0 ? void 0 : classes.frame), watchMotion: watchMotion }),
-        target.components && (react_1.default.createElement(label_1.LabelContainer, { className: element_highlighter_module_scss_1.default.label, targetRef: target.element, placement: placement, watchMotion: watchMotion },
-            react_1.default.createElement(label_1.Label, { components: target.components, className: classes === null || classes === void 0 ? void 0 : classes.label })))));
+        react_1.default.createElement(frame_1.Frame, { targetRef: targetRef, className: (0, classnames_1.default)(element_highlighter_module_scss_1.default.frame, classes === null || classes === void 0 ? void 0 : classes.frame), watchMotion: watchMotion }),
+        components && (react_1.default.createElement(label_1.LabelContainer, { targetRef: targetRef, className: element_highlighter_module_scss_1.default.label, placement: placement, watchMotion: watchMotion },
+            react_1.default.createElement(label_1.Label, { components: components, className: classes === null || classes === void 0 ? void 0 : classes.label })))));
 }
 exports.ElementHighlighter = ElementHighlighter;
 //# sourceMappingURL=element-highlighter.js.map

package/dist/element-highlighter/element-highlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,oCAAiC;AACjC,oCAA4D;AAC5D,8DAA8D;AAC9D,wGAAuD;AA4BvD,SAAgB,kBAAkB,CAAC,EAOT;QAPS,EACjC,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,OAAO,OAEiB,EADrB,KAAK,cANyB,8DAOlC,CADS;IAER,OAAO,CACL,uDAAS,KAAK,EAAM,0CAAqB,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,yCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/G,8BAAC,aAAK,IACJ,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,EACnD,WAAW,EAAE,WAAW,GACxB;QAED,MAAM,CAAC,UAAU,IAAI,CACpB,8BAAC,sBAAc,IACb,SAAS,EAAE,yCAAM,CAAC,KAAK,EACvB,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW;YAExB,8BAAC,aAAK,IAAC,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GAAI,CACpD,CAClB,CACG,CACP,CAAC;AACJ,CAAC;AA5BD,gDA4BC"}
+{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAAyC;AACzC,4DAAoC;AAEpC,oCAAiC;AACjC,oCAA4D;AAC5D,8DAA8D;AAC9D,wGAAuD;AAwBvD,SAAgB,kBAAkB,CAAC,EAQT;QARS,EACjC,SAAS,EACT,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,SAAS,EACT,OAAO,OAEiB,EADrB,KAAK,cAPyB,+EAQlC,CADS;IAER,OAAO,CACL,uDAAS,KAAK,EAAM,0CAAqB,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,yCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/G,8BAAC,aAAK,IAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,EAAE,WAAW,EAAE,WAAW,GAAI;QAE7G,UAAU,IAAI,CACb,8BAAC,sBAAc,IAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,yCAAM,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW;YAC3G,8BAAC,aAAK,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GAAI,CAC7C,CAClB,CACG,CACP,CAAC;AACJ,CAAC;AApBD,gDAoBC"}

package/dist/element-highlighter/index.d.ts

@@ -1,2 +1,2 @@
 export { ElementHighlighter } from './element-highlighter';
-export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
+export type { ElementHighlighterProps, Placement, HighlightClasses } from './element-highlighter';

package/dist/frame/frame.d.ts

@@ -1,9 +1,13 @@
-import React from 'react';
-import '@popperjs/core';
+import React, { RefObject } from 'react';
 export interface FrameProps extends React.HTMLAttributes<HTMLDivElement> {
-    targetRef: HTMLElement | null;
+    /** apply the frame to this element  */
+    targetRef: RefObject<HTMLElement | null>;
+    /**
+     * the specific flavor of the frame.
+     * @default "redBorderClass"
+     */
     stylesClass?: string;
     /** continually update frame position to match moving elements */
     watchMotion?: boolean;
 }
-export declare function Frame({ targetRef, watchMotion, className, stylesClass, style, }: FrameProps): JSX.Element;
+export declare function Frame({ targetRef, watchMotion, className, stylesClass, style }: FrameProps): JSX.Element;

package/dist/frame/frame.js

@@ -24,40 +24,78 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Frame = void 0;
 const react_1 = __importStar(require("react"));
-const react_popper_1 = require("react-popper");
 const classnames_1 = __importDefault(require("classnames"));
-require("@popperjs/core");
-const base_ui_utils_popper_js_ignore_popper_size_1 = require("@teambit/base-ui.utils.popper-js.ignore-popper-size");
-const base_ui_utils_popper_js_resize_to_match_reference_1 = require("@teambit/base-ui.utils.popper-js.resize-to-match-reference");
-const use_animation_frame_1 = require("../use-animation-frame");
+const react_dom_1 = require("@floating-ui/react-dom");
 const frame_module_scss_1 = __importDefault(require("./frame.module.scss"));
-const BASE_OFFSET = +frame_module_scss_1.default.offset;
-const popperModifiers = [
-    base_ui_utils_popper_js_ignore_popper_size_1.ignorePopperSize,
-    base_ui_utils_popper_js_resize_to_match_reference_1.resizeToMatchReference,
-    {
-        name: 'flip',
-        enabled: false,
-    },
-    {
-        name: 'offset',
-        options: {
-            // move box from above the target ('top-start')
-            // to directly cover the target.
-            offset: ({ reference }) => [BASE_OFFSET, BASE_OFFSET - reference.height],
-        },
-    },
-];
-function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_scss_1.default.overlayBorder, style, }) {
-    const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
-    const { styles, attributes, update } = (0, react_popper_1.usePopper)(targetRef, referenceElement, {
-        modifiers: popperModifiers,
-        placement: 'top-start',
+/** frame padding around the target */
+const MARGIN_FROM_TARGET = +frame_module_scss_1.default.offset || 6; // setting fallback 6, for tests
+/** min. distance from the edge of the screen. */
+const MARGIN_FROM_DOC_EDGE = 0;
+// position - bottom start (bottom left corner)
+// x - width - horizontal (cross axis)
+// y - height - vertical (main axis)
+function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_scss_1.default.overlayBorder, style }) {
+    const dimensionRef = (0, react_1.useRef)({ width: 0, height: 0 });
+    const shiftRef = (0, react_1.useRef)();
+    const { x, y, strategy, reference, floating, update, refs } = (0, react_dom_1.useFloating)({
+        placement: 'bottom-start',
+        middleware: [
+            // replace dimensions from previous iterations with the target's size
+            // this is only the measured size, not yet the applied size
+            {
+                name: 'align-to-target',
+                fn({ rects }) {
+                    rects.floating = Object.assign(Object.assign({}, rects.floating), { width: rects.reference.width + 2 * MARGIN_FROM_TARGET, height: rects.reference.height + 2 * MARGIN_FROM_TARGET });
+                    return {};
+                },
+            },
+            // reposition x,y, to the top of the reference
+            (0, react_dom_1.offset)((options) => -options.reference.height),
+            // offset the frame by its extra padding
+            (0, react_dom_1.offset)(() => ({ mainAxis: -MARGIN_FROM_TARGET, crossAxis: -MARGIN_FROM_TARGET })),
+            // push the frame inside the screen
+            (0, react_dom_1.shift)({ rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE, mainAxis: true, crossAxis: true }),
+            // read "shift" for the size-apply() method (because it doesn't forward middlewareData)
+            {
+                name: 'read-shift',
+                fn({ middlewareData }) {
+                    shiftRef.current = middlewareData.shift;
+                    return {};
+                },
+            },
+            // size also applies overflow detection via width and height
+            (0, react_dom_1.size)({
+                // apply overflow detection in reference to the document
+                rootBoundary: 'document',
+                padding: MARGIN_FROM_DOC_EDGE,
+                apply({ reference: referenceRect, height, width }) {
+                    var _a, _b, _c;
+                    const paddingX = 2 * MARGIN_FROM_TARGET - (((_a = shiftRef.current) === null || _a === void 0 ? void 0 : _a.x) || 0);
+                    const paddingY = 2 * MARGIN_FROM_TARGET - (((_b = shiftRef.current) === null || _b === void 0 ? void 0 : _b.y) || 0);
+                    dimensionRef.current = {
+                        width: Math.min(referenceRect.width + paddingX, width),
+                        height: Math.min(referenceRect.height + paddingY, height),
+                    };
+                    Object.assign((_c = refs.floating.current) === null || _c === void 0 ? void 0 : _c.style, dimensionRef.current);
+                },
+            }),
+        ],
     });
-    (0, use_animation_frame_1.useAnimationFrame)(!!watchMotion && update);
-    if (!targetRef)
-        return null;
-    return (react_1.default.createElement("div", Object.assign({ ref: setReferenceElement, className: (0, classnames_1.default)(className, stylesClass), style: Object.assign(Object.assign({}, styles.popper), style) }, attributes.popper)));
+    // set target as floating reference
+    (0, react_1.useLayoutEffect)(() => {
+        reference(targetRef.current);
+    }, [targetRef.current]);
+    // automatically update on scroll, resize, etc.
+    // `watchMotion` will trigger continuous updates using animation frame
+    (0, react_1.useEffect)(() => {
+        if (!refs.reference.current || !refs.floating.current)
+            return () => { };
+        return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update, { animationFrame: watchMotion });
+    }, [refs.reference.current, refs.floating.current, update, watchMotion]);
+    const isReady = x !== null;
+    return (react_1.default.createElement("div", { ref: floating, className: (0, classnames_1.default)(className, stylesClass, !isReady && frame_module_scss_1.default.hidden), style: Object.assign(Object.assign(Object.assign({}, style), dimensionRef.current), { position: strategy, 
+            // starting at pos [0,0] will ensure the label doesn't increase the document size.
+            top: y !== null && y !== void 0 ? y : 0, left: x !== null && x !== void 0 ? x : 0 }) }));
 }
 exports.Frame = Frame;
 //# sourceMappingURL=frame.js.map

package/dist/frame/frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"frame.js","sourceRoot":"","sources":["../../frame/frame.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,+CAAmD;AACnD,4DAAoC;AACpC,0BAAwB;AAExB,oHAAuF;AACvF,kIAAoG;AAEpG,gEAA2D;AAC3D,4EAA8C;AAE9C,MAAM,WAAW,GAAG,CAAC,2BAAW,CAAC,MAAM,CAAC;AAExC,MAAM,eAAe,GAAoB;IACvC,6DAAgB;IAChB,0EAAsB;IACtB;QACE,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;KACf;IACD;QACE,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,+CAA+C;YAC/C,gCAAgC;YAChC,MAAM,EAAE,CAAC,EAAE,SAAS,EAAO,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC;SAC9E;KACF;CACF,CAAC;AASF,SAAgB,KAAK,CAAC,EACpB,SAAS,EACT,WAAW,EACX,SAAS,EACT,WAAW,GAAG,2BAAW,CAAC,aAAa,EACvC,KAAK,GACM;IACX,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAEtF,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAA,wBAAS,EAAC,SAAS,EAAE,gBAAgB,EAAE;QAC5E,SAAS,EAAE,eAAe;QAC1B,SAAS,EAAE,WAAW;KACvB,CAAC,CAAC;IAEH,IAAA,uCAAiB,EAAC,CAAC,CAAC,WAAW,IAAI,MAAM,CAAC,CAAC;IAE3C,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,OAAO,CACL,qDACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,WAAW,CAAC,EAC7C,KAAK,kCAAO,MAAM,CAAC,MAAM,GAAK,KAAK,KAC/B,UAAU,CAAC,MAAM,EACrB,CACH,CAAC;AACJ,CAAC;AA1BD,sBA0BC"}
+{"version":3,"file":"frame.js","sourceRoot":"","sources":["../../frame/frame.tsx"],"names":[],"mappings":"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"}

package/dist/frame/frame.module.scss

@@ -2,6 +2,7 @@ $border: 2;
 $padding: 4;
 
 .overlayBorder {
+  box-sizing: border-box;
   border: $border * 1px solid var(--bit-highlighter-color, #eebcc9);
 
   border-radius: 11px;
@@ -11,6 +12,12 @@ $padding: 4;
   user-select: none;
 }
 
+.hidden {
+  // the frame's size is ignored anyways,
+  // and so we can use 'display: none' and not 'visibility: hidden'
+  display: none;
+}
+
 :export {
-  offset: -$border - $padding;
+  offset: $border + $padding;
 }

package/dist/hover-highlighter/bubble-to-component.d.ts

@@ -0,0 +1,19 @@
+import { ReactComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { MatchRule, ComponentMatchRule } from '../rule-matcher';
+declare 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 declare function bubbleToComponent(element: HTMLElement | null, { elementRule, componentRule, propagateSameParents }?: BubblingOptions): {
+    element: HTMLElement;
+    components: ReactComponentMetaHolder[];
+};
+export {};

package/dist/hover-highlighter/bubble-to-component.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bubbleToComponent = void 0;
+const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-react");
+const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
+const rule_matcher_1 = require("../rule-matcher");
+/** go up the dom tree until reaching a react bit component */
+function bubbleToComponent(element, { elementRule, componentRule, propagateSameParents = true } = {}) {
+    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 === null || current === void 0 ? void 0 : current.components.slice(-1).pop();
+        const parentPrimeComponent = parent === null || parent === void 0 ? void 0 : parent.components.slice(-1).pop();
+        if ((primeComponent === null || primeComponent === void 0 ? void 0 : primeComponent[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField].id) !== (parentPrimeComponent === null || parentPrimeComponent === void 0 ? void 0 : parentPrimeComponent[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField].id))
+            return current;
+        current = parent;
+    }
+    return undefined;
+}
+exports.bubbleToComponent = bubbleToComponent;
+/** go up the dom tree until reaching a react bit component */
+function bubbleToFirstComponent(element, elementRule, componentRule) {
+    for (let current = element; current; current = current.parentElement) {
+        current = (0, react_modules_dom_to_react_1.toRootElement)(current);
+        if (!current)
+            return undefined;
+        if ((0, rule_matcher_1.ruleMatcher)(current, elementRule)) {
+            const components = (0, react_modules_dom_to_react_1.domToReacts)(current);
+            const relevantComponents = components.filter((x) => (0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(x) && (0, rule_matcher_1.componentRuleMatcher)({ meta: x[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] }, componentRule));
+            if (relevantComponents.length < 1)
+                return undefined;
+            return {
+                element: current,
+                components: relevantComponents,
+            };
+        }
+    }
+    return undefined;
+}
+//# sourceMappingURL=bubble-to-component.js.map

package/dist/hover-highlighter/bubble-to-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble-to-component.js","sourceRoot":"","sources":["../../hover-highlighter/bubble-to-component.tsx"],"names":[],"mappings":";;;AAAA,oFAAiF;AACjF,oJAI6E;AAC7E,kDAAmG;AAcnG,8DAA8D;AAC9D,SAAgB,iBAAiB,CAC/B,OAA2B,EAC3B,EAAE,WAAW,EAAE,aAAa,EAAE,oBAAoB,GAAG,IAAI,KAAsB,EAAE;IAEjF,IAAI,OAAO,GAAG,sBAAsB,CAAC,OAAO,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;IAC1E,IAAI,CAAC,oBAAoB;QAAE,OAAO,OAAO,CAAC;IAE1C,OAAO,OAAO,EAAE;QACd,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC;QACpD,MAAM,MAAM,GAAG,sBAAsB,CAAC,aAAa,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;QAEjF,MAAM,cAAc,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;QAC3D,MAAM,oBAAoB,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;QAEhE,IAAI,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,+EAAkB,EAAE,EAAE,OAAK,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,+EAAkB,EAAE,EAAE,CAAA;YAAE,OAAO,OAAO,CAAC;QAE9G,OAAO,GAAG,MAAM,CAAC;KAClB;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AApBD,8CAoBC;AAED,8DAA8D;AAC9D,SAAS,sBAAsB,CAC7B,OAA2B,EAC3B,WAAuB,EACvB,aAAkC;IAElC,KAAK,IAAI,OAAO,GAAG,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,aAAa,EAAE;QACpE,OAAO,GAAG,IAAA,0CAAa,EAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAC/B,IAAI,IAAA,0BAAW,EAAC,OAAO,EAAE,WAAW,CAAC,EAAE;YACrC,MAAM,UAAU,GAAG,IAAA,wCAAW,EAAC,OAAO,CAAC,CAAC;YAExC,MAAM,kBAAkB,GAAG,UAAU,CAAC,MAAM,CAC1C,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,6EAAgB,EAAC,CAAC,CAAC,IAAI,IAAA,mCAAoB,EAAC,EAAE,IAAI,EAAE,CAAC,CAAC,+EAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACrE,CAAC;YAEhC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO,SAAS,CAAC;YACpD,OAAO;gBACL,OAAO,EAAE,OAAO;gBAChB,UAAU,EAAE,kBAAkB;aAC/B,CAAC;SACH;KACF;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/hover-highlighter/bubble-to-component.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hover-highlighter/bubble-to-component.spec.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const mock_component_1 = require("../mock-component");
+const bubble_to_component_1 = require("./bubble-to-component");
+it('should find component when starting from a div', () => {
+    const { getByText, getByTestId } = (0, react_2.render)(react_1.default.createElement(mock_component_1.MockTarget, { "data-testid": "expected-result" },
+        react_1.default.createElement("div", null, "hello world")));
+    const rendered = getByText('hello world');
+    const result = (0, bubble_to_component_1.bubbleToComponent)(rendered);
+    expect(result === null || result === void 0 ? void 0 : result.element).toBe(getByTestId('expected-result'));
+    expect(result === null || result === void 0 ? void 0 : result.components).toEqual([mock_component_1.MockTarget]);
+});
+it('should bubble to root component when it renders itself recursively', () => {
+    const { getByText, getByTestId } = (0, react_2.render)(react_1.default.createElement(mock_component_1.MockTarget, { "data-testid": "expected-result" },
+        react_1.default.createElement(mock_component_1.MockTarget, null,
+            react_1.default.createElement(mock_component_1.MockTarget, null,
+                react_1.default.createElement("div", null, "hello world")))));
+    const rendered = getByText('hello world');
+    const result = (0, bubble_to_component_1.bubbleToComponent)(rendered);
+    expect(result === null || result === void 0 ? void 0 : result.element).toBe(getByTestId('expected-result'));
+    expect(result === null || result === void 0 ? void 0 : result.components).toEqual([mock_component_1.MockTarget]);
+});
+it('should find first component, when parent propagation is disabled', () => {
+    const { getByText, getByTestId } = (0, react_2.render)(react_1.default.createElement(mock_component_1.MockTarget, null,
+        react_1.default.createElement(mock_component_1.MockTarget, null,
+            react_1.default.createElement(mock_component_1.MockTarget, { "data-testid": "expected-result" },
+                react_1.default.createElement("div", null, "hello world")))));
+    const rendered = getByText('hello world');
+    const result = (0, bubble_to_component_1.bubbleToComponent)(rendered, { propagateSameParents: false });
+    expect(result === null || result === void 0 ? void 0 : result.element).toBe(getByTestId('expected-result'));
+    expect(result === null || result === void 0 ? void 0 : result.components).toEqual([mock_component_1.MockTarget]);
+});
+//# sourceMappingURL=bubble-to-component.spec.js.map

package/dist/hover-highlighter/bubble-to-component.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble-to-component.spec.js","sourceRoot":"","sources":["../../hover-highlighter/bubble-to-component.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAChD,sDAA+C;AAC/C,+DAA0D;AAE1D,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;IACxD,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAA,cAAM,EACvC,8BAAC,2BAAU,mBAAa,iBAAiB;QACvC,yDAAsB,CACX,CACd,CAAC;IAEF,MAAM,QAAQ,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;IAE1C,MAAM,MAAM,GAAG,IAAA,uCAAiB,EAAC,QAAQ,CAAC,CAAC;IAE3C,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC7D,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,2BAAU,CAAC,CAAC,CAAC;AACnD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,oEAAoE,EAAE,GAAG,EAAE;IAC5E,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAA,cAAM,EACvC,8BAAC,2BAAU,mBAAa,iBAAiB;QACvC,8BAAC,2BAAU;YACT,8BAAC,2BAAU;gBACT,yDAAsB,CACX,CACF,CACF,CACd,CAAC;IAEF,MAAM,QAAQ,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;IAE1C,MAAM,MAAM,GAAG,IAAA,uCAAiB,EAAC,QAAQ,CAAC,CAAC;IAE3C,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC7D,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,2BAAU,CAAC,CAAC,CAAC;AACnD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,kEAAkE,EAAE,GAAG,EAAE;IAC1E,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAA,cAAM,EACvC,8BAAC,2BAAU;QACT,8BAAC,2BAAU;YACT,8BAAC,2BAAU,mBAAa,iBAAiB;gBACvC,yDAAsB,CACX,CACF,CACF,CACd,CAAC;IAEF,MAAM,QAAQ,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;IAE1C,MAAM,MAAM,GAAG,IAAA,uCAAiB,EAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC,CAAC;IAE5E,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC7D,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,2BAAU,CAAC,CAAC,CAAC;AACnD,CAAC,CAAC,CAAC"}

package/dist/hover-highlighter/use-hover-highlighter.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
-import { HighlightTarget } from '../element-highlighter';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import { MatchRule, ComponentMatchRule } from '../rule-matcher';
+declare type HighlightTarget = {
+    element: HTMLElement;
+    components: ComponentMetaHolder[];
+};
 export declare type useHoverHighlighterOptions = {
     debounceDuration: number;
     scopeClass: string;
@@ -18,3 +22,4 @@ export declare function useHoverHighlighter<T extends HTMLElement = HTMLElement>
     onMouseOver?: undefined;
     onMouseLeave?: undefined;
 };
+export {};