@teambit/react.ui.component-highlighter 0.0.479 → 0.0.483

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;AACpC,oCAAiC;AACjC,oCAA4D;AAC5D,8DAA8D;AAC9D,wGAAuD;AA8BvD,SAAgB,kBAAkB,CAAC,EAMT;QANS,EACjC,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,OAAO,OAEiB,EADrB,KAAK,cALyB,+CAMlC,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,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GAAI;QAE9D,MAAM,CAAC,EAAE,IAAI,CACZ,8BAAC,sBAAc,IAAC,SAAS,EAAE,yCAAM,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS;YACtF,8BAAC,aAAK,IACJ,WAAW,EAAE,MAAM,CAAC,EAAE,EACtB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GACzB,CACa,CAClB,CACG,CACP,CAAC;AACJ,CAAC;AAxBD,gDAwBC"}
+{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AACpC,oCAAiC;AACjC,oCAA4D;AAC5D,8DAA8D;AAC9D,wGAAuD;AAgCvD,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,EAAE,IAAI,CACZ,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,IACJ,WAAW,EAAE,MAAM,CAAC,EAAE,EACtB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GACzB,CACa,CAClB,CACG,CACP,CAAC;AACJ,CAAC;AAlCD,gDAkCC"}

package/dist/element-highlighter/element-highlighter.module.scss

@@ -1,3 +1,5 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
 .container {
   font-size: 12px;
 }
@@ -6,3 +8,8 @@
   font-family: sans-serif;
   padding: 8px;
 }
+
+.frame,
+.label {
+  z-index: $highlighter-z-index;
+}

package/dist/frame/frame.d.ts

@@ -3,6 +3,7 @@ import '@popperjs/core';
 export interface FrameProps extends React.HTMLAttributes<HTMLDivElement> {
     targetRef: HTMLElement | null;
     stylesClass?: string;
-    motionTracking?: boolean;
+    /** continually update frame position to match moving elements */
+    watchMotion?: boolean;
 }
-export declare function Frame({ targetRef, motionTracking, className, stylesClass, style, }: FrameProps): JSX.Element;
+export declare function Frame({ targetRef, watchMotion, className, stylesClass, style, }: FrameProps): JSX.Element;

package/dist/frame/frame.js

@@ -25,11 +25,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Frame = void 0;
 const react_1 = __importStar(require("react"));
 const react_popper_1 = require("react-popper");
-const use_animation_frame_1 = __importDefault(require("use-animation-frame"));
 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 frame_module_scss_1 = __importDefault(require("./frame.module.scss"));
 const BASE_OFFSET = +frame_module_scss_1.default.offset;
 const popperModifiers = [
@@ -48,28 +48,13 @@ const popperModifiers = [
         },
     },
 ];
-function Frame({ targetRef, motionTracking, className, stylesClass = frame_module_scss_1.default.overlayBorder, style, }) {
+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',
     });
-    (0, react_1.useEffect)(() => {
-        const triggerRefocus = update;
-        if (!triggerRefocus || !motionTracking)
-            return () => { };
-        let animationFrameId = 0;
-        const f = () => {
-            triggerRefocus().catch(() => { });
-            animationFrameId = window.requestAnimationFrame(f);
-        };
-        f();
-        return () => {
-            if (animationFrameId > -1)
-                window.cancelAnimationFrame(animationFrameId);
-        };
-    }, [update, motionTracking]);
-    (0, use_animation_frame_1.default)(() => update === null || update === void 0 ? void 0 : update(), [update]);
+    (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)));

package/dist/frame/frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"frame.js","sourceRoot":"","sources":["../../frame/frame.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,+CAAmD;AACnD,8EAAoD;AACpD,4DAAoC;AACpC,0BAAwB;AAExB,oHAAuF;AACvF,kIAAoG;AAEpG,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;AAQF,SAAgB,KAAK,CAAC,EACpB,SAAS,EACT,cAAc,EACd,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,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,cAAc,IAAI,CAAC,cAAc;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAExD,IAAI,gBAAgB,GAAG,CAAC,CAAC;QACzB,MAAM,CAAC,GAAG,GAAG,EAAE;YACb,cAAc,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;YACjC,gBAAgB,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QACrD,CAAC,CAAC;QACF,CAAC,EAAE,CAAC;QAEJ,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,GAAG,CAAC,CAAC;gBAAE,MAAM,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;QAC3E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAE7B,IAAA,6BAAiB,EAAC,GAAG,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9C,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;AA1CD,sBA0CC"}
+{"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"}

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { HoverHighlighter as ComponentHighlighter } from './component-highlighter';
 export type { HoverHighlighterProps as ComponentHighlightProps } from './component-highlighter';
+export { MultiHighlighter } from './multi-highlighter';
+export type { MultiHighlighterProps } from './multi-highlighter';
 export { ElementHighlighter } from './element-highlighter';
 export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
-export { ExcludeHighlighter, excludeHighlighterAtt } from './ignore-highlighter';
+export { ExcludeHighlighter, excludeHighlighterAtt, excludeHighlighterSelector, excludeHighlighterAttrName, } from './ignore-highlighter';

package/dist/index.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.excludeHighlighterAtt = exports.ExcludeHighlighter = exports.ElementHighlighter = exports.ComponentHighlighter = void 0;
+exports.excludeHighlighterAttrName = exports.excludeHighlighterSelector = exports.excludeHighlighterAtt = exports.ExcludeHighlighter = exports.ElementHighlighter = exports.MultiHighlighter = exports.ComponentHighlighter = void 0;
 var component_highlighter_1 = require("./component-highlighter");
 Object.defineProperty(exports, "ComponentHighlighter", { enumerable: true, get: function () { return component_highlighter_1.HoverHighlighter; } });
+var multi_highlighter_1 = require("./multi-highlighter");
+Object.defineProperty(exports, "MultiHighlighter", { enumerable: true, get: function () { return multi_highlighter_1.MultiHighlighter; } });
 var element_highlighter_1 = require("./element-highlighter");
 Object.defineProperty(exports, "ElementHighlighter", { enumerable: true, get: function () { return element_highlighter_1.ElementHighlighter; } });
 var ignore_highlighter_1 = require("./ignore-highlighter");
 Object.defineProperty(exports, "ExcludeHighlighter", { enumerable: true, get: function () { return ignore_highlighter_1.ExcludeHighlighter; } });
 Object.defineProperty(exports, "excludeHighlighterAtt", { enumerable: true, get: function () { return ignore_highlighter_1.excludeHighlighterAtt; } });
+Object.defineProperty(exports, "excludeHighlighterSelector", { enumerable: true, get: function () { return ignore_highlighter_1.excludeHighlighterSelector; } });
+Object.defineProperty(exports, "excludeHighlighterAttrName", { enumerable: true, get: function () { return ignore_highlighter_1.excludeHighlighterAttrName; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iEAAmF;AAA1E,6HAAA,gBAAgB,OAAwB;AAGjD,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAG3B,2DAAiF;AAAxE,wHAAA,kBAAkB,OAAA;AAAE,2HAAA,qBAAqB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iEAAmF;AAA1E,6HAAA,gBAAgB,OAAwB;AAGjD,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AAGzB,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAG3B,2DAK8B;AAJ5B,wHAAA,kBAAkB,OAAA;AAClB,2HAAA,qBAAqB,OAAA;AACrB,gIAAA,0BAA0B,OAAA;AAC1B,gIAAA,0BAA0B,OAAA"}

package/dist/label/label.d.ts

@@ -7,9 +7,11 @@ export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement
     offset?: [number, number];
     placement?: Placement;
     flip?: boolean;
+    /** continually update label position to match moving elements */
+    watchMotion?: boolean;
 }
 export type { Placement };
-export declare function LabelContainer({ targetRef, offset, placement, flip, className, ...rest }: LabelContainerProps): JSX.Element;
+export declare function LabelContainer({ targetRef, offset, placement, flip, watchMotion, className, ...rest }: LabelContainerProps): JSX.Element;
 export interface LabelProps extends CardProps {
     componentId: string;
     link?: string;

package/dist/label/label.js

@@ -29,31 +29,28 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = exports.LabelContainer = void 0;
 const react_1 = __importStar(require("react"));
 const react_popper_1 = require("react-popper");
 const component_id_1 = require("@teambit/component-id");
-const use_animation_frame_1 = __importDefault(require("use-animation-frame"));
 require("@popperjs/core");
 const default_label_1 = require("./default-label");
 const component_label_1 = require("./component-label");
+const use_animation_frame_1 = require("../use-animation-frame");
 // TODO - replace this with TippyJS, when it supports a `targetElement={targetRef.current}` prop
 function LabelContainer(_a) {
-    var { targetRef, offset, placement, flip = true, className } = _a, rest = __rest(_a, ["targetRef", "offset", "placement", "flip", "className"]);
+    var { targetRef, offset, placement, flip = true, watchMotion, className } = _a, rest = __rest(_a, ["targetRef", "offset", "placement", "flip", "watchMotion", "className"]);
     const [sourceRef, setSourceRef] = (0, react_1.useState)(null);
     const modifiers = (0, react_1.useMemo)(() => [{ name: 'offset', options: { offset } }], [flip, offset]);
     const { styles, attributes, update } = (0, react_popper_1.usePopper)(targetRef, sourceRef, {
         modifiers,
         placement,
     });
-    (0, use_animation_frame_1.default)(() => update === null || update === void 0 ? void 0 : update(), [update]);
+    (0, use_animation_frame_1.useAnimationFrame)(!!watchMotion && update);
     if (!targetRef)
         return null;
-    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: setSourceRef, className: className, style: styles.popper }, attributes.popper)));
+    return react_1.default.createElement("div", Object.assign({}, rest, { ref: setSourceRef, className: className, style: styles.popper }, attributes.popper));
 }
 exports.LabelContainer = LabelContainer;
 function Label(_a) {

package/dist/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../label/label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,+CAAyC;AACzC,wDAAoD;AAEpD,8EAAoD;AAEpD,0BAAwB;AAExB,mDAA+C;AAC/C,uDAAmD;AAWnD,gGAAgG;AAChG,SAAgB,cAAc,CAAC,EAAsF;QAAtF,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,OAAgC,EAA3B,IAAI,cAA/D,yDAAiE,CAAF;IAC5F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,IAAA,eAAO,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,EAC/C,CAAC,IAAI,EAAE,MAAM,CAAC,CACf,CAAC;IAEF,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAA,wBAAS,EAAC,SAAS,EAAE,SAAS,EAAE;QACrE,SAAS;QACT,SAAS;KACV,CAAC,CAAC;IAEH,IAAA,6BAAiB,EAAC,GAAG,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9C,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,MAAM,IAChB,UAAU,CAAC,MAAM,EACrB,CACH,CAAC;AACJ,CAAC;AA1BD,wCA0BC;AASD,SAAgB,KAAK,CAAC,EAA4D;QAA5D,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,OAAuB,EAAlB,IAAI,cAA9C,6CAAgD,CAAF;IAClE,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,0BAAW,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEtF,IAAI,CAAC,QAAQ;QACX,OAAO,CACL,8BAAC,4BAAY,oBAAK,IAAI,IAAE,IAAI,EAAE,IAAI,KAC/B,WAAW,CACC,CAChB,CAAC;IAEJ,OAAO,8BAAC,gCAAc,oBAAK,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,IAAI,CAAC;AAC7G,CAAC;AAXD,sBAWC"}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../label/label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,+CAAyC;AACzC,wDAAoD;AAGpD,0BAAwB;AAExB,mDAA+C;AAC/C,uDAAmD;AACnD,gEAA2D;AAa3D,gGAAgG;AAChG,SAAgB,cAAc,CAAC,EAQT;QARS,EAC7B,SAAS,EACT,MAAM,EACN,SAAS,EACT,IAAI,GAAG,IAAI,EACX,WAAW,EACX,SAAS,OAEW,EADjB,IAAI,cAPsB,wEAQ9B,CADQ;IAEP,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,IAAA,eAAO,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,EAC/C,CAAC,IAAI,EAAE,MAAM,CAAC,CACf,CAAC;IAEF,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAA,wBAAS,EAAC,SAAS,EAAE,SAAS,EAAE;QACrE,SAAS;QACT,SAAS;KACV,CAAC,CAAC;IAEH,IAAA,uCAAiB,EAAC,CAAC,CAAC,WAAW,IAAI,MAAM,CAAC,CAAC;IAE3C,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,OAAO,uDAAS,IAAI,IAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,IAAM,UAAU,CAAC,MAAM,EAAI,CAAC;AACjH,CAAC;AA1BD,wCA0BC;AASD,SAAgB,KAAK,CAAC,EAA4D;QAA5D,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,OAAuB,EAAlB,IAAI,cAA9C,6CAAgD,CAAF;IAClE,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,0BAAW,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEtF,IAAI,CAAC,QAAQ;QACX,OAAO,CACL,8BAAC,4BAAY,oBAAK,IAAI,IAAE,IAAI,EAAE,IAAI,KAC/B,WAAW,CACC,CAChB,CAAC;IAEJ,OAAO,8BAAC,gCAAc,oBAAK,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,IAAI,CAAC;AAC7G,CAAC;AAXD,sBAWC"}

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

@@ -0,0 +1,2 @@
+export { MultiHighlighter } from './multi-highlighter';
+export type { MultiHighlighterProps } from './multi-highlighter';

package/dist/multi-highlighter/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiHighlighter = void 0;
+var multi_highlighter_1 = require("./multi-highlighter");
+Object.defineProperty(exports, "MultiHighlighter", { enumerable: true, get: function () { return multi_highlighter_1.MultiHighlighter; } });
+//# sourceMappingURL=index.js.map

package/dist/multi-highlighter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../multi-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA"}

package/dist/multi-highlighter/multi-highlighter.composition.d.ts

@@ -0,0 +1,2 @@
+export declare const MultiHighlighterPreview: () => JSX.Element;
+export declare const MultiHighlighterWithCustomColors: () => JSX.Element;

package/dist/multi-highlighter/multi-highlighter.composition.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiHighlighterWithCustomColors = exports.MultiHighlighterPreview = void 0;
+const react_1 = __importDefault(require("react"));
+// import { EnterpriseOffering } from '@teambit/evangelist.pages.enterprise-offering';
+const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
+const multi_highlighter_1 = require("./multi-highlighter");
+const MultiHighlighterPreview = () => {
+    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { style: { padding: 40 } },
+        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "also here")));
+};
+exports.MultiHighlighterPreview = MultiHighlighterPreview;
+const MultiHighlighterWithCustomColors = () => {
+    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { style: { padding: 40, color: 'yellow' }, bgColor: "cornflowerblue", bgColorHover: "blue", bgColorActive: "DarkSlateBlue" },
+        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "also here")));
+};
+exports.MultiHighlighterWithCustomColors = MultiHighlighterWithCustomColors;
+// export const HighlightingAllElementsInTheEnterprisePage = () => {
+//   return (
+//     <MultiHighlighter>
+//       <EnterpriseOffering style={{ height: 300 }} />
+//     </MultiHighlighter>
+//   );
+// };
+//# sourceMappingURL=multi-highlighter.composition.js.map

package/dist/multi-highlighter/multi-highlighter.composition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-highlighter.composition.js","sourceRoot":"","sources":["../../multi-highlighter/multi-highlighter.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAAsF;AACtF,oJAA8G;AAC9G,2DAAuD;AAEhD,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,OAAO,CACL,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QACtC,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CAC3C,CACpB,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,uBAAuB,2BAUlC;AAEK,MAAM,gCAAgC,GAAG,GAAG,EAAE;IACnD,OAAO,CACL,8BAAC,oCAAgB,IACf,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EACvC,OAAO,EAAC,gBAAgB,EACxB,YAAY,EAAC,MAAM,EACnB,aAAa,EAAC,eAAe;QAE7B,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CAC3C,CACpB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,gCAAgC,oCAe3C;AAEF,oEAAoE;AACpE,aAAa;AACb,yBAAyB;AACzB,uDAAuD;AACvD,0BAA0B;AAC1B,OAAO;AACP,KAAK"}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ElementHighlighterProps } from '@teambit/react.ui.component-highlighter';
+export interface MultiHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+    /**
+     * continually update highlighter position to match dom elements as they move. Use with caution, might be slow
+     * @default false
+     */
+    watchMotion?: boolean;
+    bgColor?: string;
+    bgColorHover?: string;
+    bgColorActive?: string;
+    highlighterOptions?: ElementHighlighterProps;
+}
+export declare function MultiHighlighter({ children, disabled, watchMotion, style, bgColor, bgColorActive, bgColorHover, highlighterOptions, ...rest }: MultiHighlighterProps): JSX.Element;

package/dist/multi-highlighter/multi-highlighter.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiHighlighter = void 0;
+const react_1 = __importStar(require("react"));
+const get_xpath_1 = __importDefault(require("get-xpath"));
+const react_ui_component_highlighter_1 = require("@teambit/react.ui.component-highlighter");
+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 ignore_highlighter_1 = require("../ignore-highlighter");
+// TODO - reuse selector from @teambit/react.ui.component-highlighter
+const allExceptHighlighterQuery = `:not(${ignore_highlighter_1.excludeHighlighterSelector}, ${ignore_highlighter_1.excludeHighlighterSelector} *)`;
+function MultiHighlighter(_a) {
+    var { children, disabled, watchMotion = false, style, bgColor, bgColorActive, bgColorHover, highlighterOptions } = _a, rest = __rest(_a, ["children", "disabled", "watchMotion", "style", "bgColor", "bgColorActive", "bgColorHover", "highlighterOptions"]);
+    const ref = (0, react_1.createRef)();
+    const [targets, setTargets] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        if (disabled) {
+            setTargets({});
+            return;
+        }
+        const { current } = ref;
+        if (!current)
+            return;
+        // select all non-highlighter elements
+        const allElements = Array.from(current.querySelectorAll(allExceptHighlighterQuery));
+        // converge on the root element of components
+        const rootElements = allElements.map(react_modules_dom_to_react_1.toRootElement).filter((x) => !!x);
+        // deduplicate
+        const uniqueRoots = new Set(rootElements);
+        const nextTargets = {};
+        uniqueRoots.forEach((element) => {
+            const comp = (0, react_modules_dom_to_react_1.domToReact)(element);
+            if (!element || !(0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(comp))
+                return;
+            const key = (0, get_xpath_1.default)(element);
+            // eslint-disable-next-line no-underscore-dangle
+            nextTargets[key] = { element, id: comp.__bit_component.id };
+        });
+        setTargets(nextTargets);
+    }, [disabled]);
+    const colors = {
+        '--bit-highlighter-color': bgColor,
+        '--bit-highlighter-color-hover': bgColorHover,
+        '--bit-highlighter-color-active': bgColorActive,
+    };
+    return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, { style: Object.assign(Object.assign({}, colors), style) }),
+        children,
+        Object.entries(targets).map(([key, target]) => (react_1.default.createElement(react_ui_component_highlighter_1.ElementHighlighter, Object.assign({ key: key, target: target, watchMotion: watchMotion }, highlighterOptions))))));
+}
+exports.MultiHighlighter = MultiHighlighter;
+//# sourceMappingURL=multi-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-highlighter.js","sourceRoot":"","sources":["../../multi-highlighter/multi-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8D;AAC9D,0DAAiC;AACjC,4FAAuH;AACvH,oFAAgF;AAChF,oJAAuG;AACvG,8DAAmE;AAEnE,qEAAqE;AACrE,MAAM,yBAAyB,GAAG,QAAQ,+CAA0B,KAAK,+CAA0B,KAAK,CAAC;AAkBzG,SAAgB,gBAAgB,CAAC,EAUT;QAVS,EAC/B,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,KAAK,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,kBAAkB,OAEI,EADnB,IAAI,cATwB,kHAUhC,CADQ;IAEP,MAAM,GAAG,GAAG,IAAA,iBAAS,GAAkB,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAkC,EAAE,CAAC,CAAC;IAE5E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE;YACZ,UAAU,CAAC,EAAE,CAAC,CAAC;YACf,OAAO;SACR;QAED,MAAM,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC;QACxB,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,sCAAsC;QACtC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAc,yBAAyB,CAAC,CAAC,CAAC;QAEjG,6CAA6C;QAC7C,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,MAAM,WAAW,GAAoC,EAAE,CAAC;QACxD,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC9B,MAAM,IAAI,GAAG,IAAA,uCAAU,EAAC,OAAO,CAAC,CAAC;YACjC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAA,6EAAgB,EAAC,IAAI,CAAC;gBAAE,OAAO;YAEhD,MAAM,GAAG,GAAG,IAAA,mBAAQ,EAAC,OAAO,CAAC,CAAC;YAC9B,gDAAgD;YAChD,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC;QAC9D,CAAC,CAAC,CAAC;QAEH,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,MAAM,GAAG;QACb,yBAAyB,EAAE,OAAO;QAClC,+BAA+B,EAAE,YAAY;QAC7C,gCAAgC,EAAE,aAAa;KAChD,CAAC;IAEF,OAAO,CACL,qDAAK,GAAG,EAAE,GAAG,IAAM,IAAI,IAAE,KAAK,kCAAO,MAAM,GAAK,KAAK;QAClD,QAAQ;QACR,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC9C,8BAAC,mDAAkB,kBAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,IAAM,kBAAkB,EAAI,CACnG,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AA1DD,4CA0DC"}

package/dist/multi-highlighter/multi-highlighter.spec.d.ts

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

package/dist/multi-highlighter/multi-highlighter.spec.js

@@ -0,0 +1,22 @@
+"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 multi_highlighter_composition_1 = require("./multi-highlighter.composition");
+it('should not throw when rendering the multi-highlighter', () => {
+    const { getByText } = (0, react_2.render)(react_1.default.createElement(multi_highlighter_composition_1.MultiHighlighterPreview, null));
+    const rendered = getByText('hover here');
+    expect(rendered).toBeInstanceOf(HTMLElement);
+});
+// .querySelectorAll() is not working as expected during the test, ignoring for now :(
+// it('should render highlighter for all children components', async () => {
+//   const { queryAllByText } = render(<Preview />);
+//   // allow useEffect to run
+//   await new Promise((res) => setTimeout(res, 200));
+//   const rendered = queryAllByText('input/button');
+//   expect(rendered).toHaveLength(2);
+// });
+//# sourceMappingURL=multi-highlighter.spec.js.map

package/dist/multi-highlighter/multi-highlighter.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-highlighter.spec.js","sourceRoot":"","sources":["../../multi-highlighter/multi-highlighter.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAChD,mFAA0E;AAE1E,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;IAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,uDAAuB,OAAG,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;IAEzC,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,sFAAsF;AACtF,4EAA4E;AAC5E,oDAAoD;AAEpD,8BAA8B;AAC9B,sDAAsD;AAEtD,qDAAqD;AACrD,sCAAsC;AACtC,MAAM"}

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

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

package/dist/use-animation-frame.js

@@ -0,0 +1,23 @@
+"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

@@ -0,0 +1 @@
+{"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,OAAW,EAAE;IAC9E,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/element-highlighter/element-highlighter.compositions.tsx

@@ -1,30 +1,32 @@
-import React, { useState, createRef, useEffect } from 'react';
+import React, { useState, createRef, useEffect, CSSProperties } from 'react';
 import { ElementHighlighter, HighlightTarget } from './element-highlighter';
 
-const mockTargetId = 'teambit.design/ui/icon-button';
+const mockTarget: Partial<HighlightTarget> = {
+  id: 'teambit.design/ui/icon-button',
+  link: 'https://bit.dev/teambit/design/ui/icon-button',
+  scopeLink: 'https://bit.dev/teambit/design',
+};
+
+type HighlightedElementProps = {
+  style?: CSSProperties;
+  targetStyle?: CSSProperties;
+  className?: string;
+  watchMotion?: boolean;
+};
 
-export const HighlightedElement = ({ style, className }: { style?: Record<string, string>; className?: string }) => {
+export const HighlightedElement = ({ style, targetStyle, watchMotion, className }: HighlightedElementProps) => {
   const [targetElement, setTargetElement] = useState<HTMLElement | undefined>(undefined);
   const targetRef = createRef<HTMLDivElement>();
 
-  useEffect(() => {
-    const { current } = targetRef;
-    setTargetElement(current || undefined);
-  }, [targetRef.current]);
-
-  const target: HighlightTarget | undefined = targetElement && {
-    element: targetElement,
-    id: mockTargetId,
-    link: 'https://bit.dev/teambit/design/ui/icon-button',
-    scopeLink: 'https://bit.dev/teambit/design',
-  };
+  useEffect(() => setTargetElement(targetRef.current || undefined), [targetRef.current]);
+  const target = targetElement && { ...mockTarget, element: targetElement };
 
   return (
-    <div className={className} style={{ padding: '16px 160px 50px 16px' }}>
-      <div ref={targetRef} style={{ width: 100 }}>
+    <div className={className} style={{ padding: '16px 16px 50px 16px', width: 300 }}>
+      <div ref={targetRef} style={{ width: 100, ...targetStyle }}>
         highlight target
       </div>
-      {target && <ElementHighlighter target={target} style={style} placement="bottom" />}
+      {target && <ElementHighlighter target={target} style={style} watchMotion={watchMotion} placement="bottom" />}
     </div>
   );
 };
@@ -32,11 +34,13 @@ export const HighlightedElement = ({ style, className }: { style?: Record<string
 export const Customized = () => {
   return (
     <HighlightedElement
-      style={{
-        '--bit-highlighter-color': '#94deb4',
-        '--bit-highlighter-color-hover': '#d0f1de',
-        '--bit-highlighter-color-active': '#37b26c',
-      }}
+      style={
+        {
+          '--bit-highlighter-color': '#94deb4',
+          '--bit-highlighter-color-hover': '#d0f1de',
+          '--bit-highlighter-color-active': '#37b26c',
+        } as CSSProperties
+      }
     />
   );
 };
@@ -44,3 +48,14 @@ export const Customized = () => {
 export const Sizes = () => {
   return <HighlightedElement style={{ fontSize: '16px' }} />;
 };
+
+export const MovingElement = () => {
+  const [margin, setMargin] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => setMargin((x) => (x + 1) % 100), 80);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return <HighlightedElement targetStyle={{ marginLeft: margin }} />;
+};

package/element-highlighter/element-highlighter.module.scss

@@ -1,3 +1,5 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
 .container {
   font-size: 12px;
 }
@@ -6,3 +8,8 @@
   font-family: sans-serif;
   padding: 8px;
 }
+
+.frame,
+.label {
+  z-index: $highlighter-z-index;
+}

package/element-highlighter/element-highlighter.tsx

@@ -12,6 +12,8 @@ export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivEle
   placement?: Placement;
   /** customize styles */
   classes?: HighlightClasses;
+  /** continually update highlighter to match moving elements */
+  watchMotion?: boolean;
 }
 
 export { Placement };
@@ -36,16 +38,26 @@ export type HighlightClasses = {
 export function ElementHighlighter({
   target,
   placement = 'top',
+  watchMotion = true,
   className,
   classes,
   ...props
 }: ElementHighlighterProps) {
   return (
     <div {...props} {...excludeHighlighterAtt} className={classnames(classes?.container, styles.container, className)}>
-      <Frame targetRef={target.element} className={classes?.frame} />
+      <Frame
+        targetRef={target.element}
+        className={classnames(styles.frame, classes?.frame)}
+        watchMotion={watchMotion}
+      />
 
       {target.id && (
-        <LabelContainer className={styles.label} targetRef={target.element} placement={placement}>
+        <LabelContainer
+          className={styles.label}
+          targetRef={target.element}
+          placement={placement}
+          watchMotion={watchMotion}
+        >
           <Label
             componentId={target.id}
             link={target.link}

package/frame/frame.tsx

@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { usePopper, Modifier } from 'react-popper';
-import useAnimationFrame from 'use-animation-frame';
 import classnames from 'classnames';
 import '@popperjs/core';
 
 import { ignorePopperSize } from '@teambit/base-ui.utils.popper-js.ignore-popper-size';
 import { resizeToMatchReference } from '@teambit/base-ui.utils.popper-js.resize-to-match-reference';
 
+import { useAnimationFrame } from '../use-animation-frame';
 import classStyles from './frame.module.scss';
 
 const BASE_OFFSET = +classStyles.offset;
@@ -31,12 +31,13 @@ const popperModifiers: Modifier<any>[] = [
 export interface FrameProps extends React.HTMLAttributes<HTMLDivElement> {
   targetRef: HTMLElement | null;
   stylesClass?: string;
-  motionTracking?: boolean;
+  /** continually update frame position to match moving elements */
+  watchMotion?: boolean;
 }
 
 export function Frame({
   targetRef,
-  motionTracking,
+  watchMotion,
   className,
   stylesClass = classStyles.overlayBorder,
   style,
@@ -48,23 +49,7 @@ export function Frame({
     placement: 'top-start',
   });
 
-  useEffect(() => {
-    const triggerRefocus = update;
-    if (!triggerRefocus || !motionTracking) return () => {};
-
-    let animationFrameId = 0;
-    const f = () => {
-      triggerRefocus().catch(() => {});
-      animationFrameId = window.requestAnimationFrame(f);
-    };
-    f();
-
-    return () => {
-      if (animationFrameId > -1) window.cancelAnimationFrame(animationFrameId);
-    };
-  }, [update, motionTracking]);
-
-  useAnimationFrame(() => update?.(), [update]);
+  useAnimationFrame(!!watchMotion && update);
 
   if (!targetRef) return null;
 

package/index.ts

@@ -1,7 +1,15 @@
 export { HoverHighlighter as ComponentHighlighter } from './component-highlighter';
 export type { HoverHighlighterProps as ComponentHighlightProps } from './component-highlighter';
 
+export { MultiHighlighter } from './multi-highlighter';
+export type { MultiHighlighterProps } from './multi-highlighter';
+
 export { ElementHighlighter } from './element-highlighter';
 export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
 
-export { ExcludeHighlighter, excludeHighlighterAtt } from './ignore-highlighter';
+export {
+  ExcludeHighlighter,
+  excludeHighlighterAtt,
+  excludeHighlighterSelector,
+  excludeHighlighterAttrName,
+} from './ignore-highlighter';