@teambit/react.ui.component-highlighter 0.0.492 → 0.0.493

package/dist/label/label.js

@@ -29,36 +29,29 @@ 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;
+exports.Label = void 0;
 const react_1 = __importStar(require("react"));
-const react_popper_1 = require("react-popper");
-const component_id_1 = require("@teambit/component-id");
-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, 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.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));
-}
-exports.LabelContainer = LabelContainer;
+const classnames_1 = __importDefault(require("classnames"));
+const label_module_scss_1 = __importDefault(require("./label.module.scss"));
+const component_strip_1 = require("./component-strip");
+const other_components_1 = require("./other-components");
 function Label(_a) {
-    var { componentId, link, scopeLink, local } = _a, rest = __rest(_a, ["componentId", "link", "scopeLink", "local"]);
-    const parsedId = (0, react_1.useMemo)(() => component_id_1.ComponentID.tryFromString(componentId), [componentId]);
-    if (!parsedId)
-        return (react_1.default.createElement(default_label_1.DefaultLabel, Object.assign({}, rest, { href: link }), componentId));
-    return react_1.default.createElement(component_label_1.ComponentLabel, Object.assign({}, rest, { local: local, componentId: parsedId, link: link, scopeLink: scopeLink }));
+    var { components, size } = _a, props = __rest(_a, ["components", "size"]);
+    const [showMore, setShowMore] = (0, react_1.useState)(false);
+    const last = components.slice(-1).pop();
+    if (!last)
+        return null;
+    const hasMore = components.length > 1;
+    // reset when switching targets
+    (0, react_1.useEffect)(() => {
+        setShowMore(false);
+    }, [components]);
+    return (react_1.default.createElement(other_components_1.OtherComponentsPopper, { components: components, visible: showMore, placement: "bottom-start", size: size },
+        react_1.default.createElement(component_strip_1.ComponentStrip, Object.assign({}, props, { component: last, size: size }), hasMore && (react_1.default.createElement("span", { className: (0, classnames_1.default)(label_module_scss_1.default.othersTooltip, showMore && label_module_scss_1.default.active), onClick: () => setShowMore((x) => !x) })))));
 }
 exports.Label = Label;
 //# sourceMappingURL=label.js.map

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;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"}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../label/label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,4DAAoC;AAGpC,4EAAyC;AACzC,uDAAuE;AACvE,yDAA2D;AAQ3D,SAAgB,KAAK,CAAC,EAA0C;QAA1C,EAAE,UAAU,EAAE,IAAI,OAAwB,EAAnB,KAAK,cAA5B,sBAA8B,CAAF;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;IACxC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtC,+BAA+B;IAC/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,8BAAC,wCAAqB,IAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,IAAI;QACnG,8BAAC,gCAAc,oBAAK,KAAK,IAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,KACnD,OAAO,IAAI,CACV,wCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAAM,CAAC,aAAa,EAAE,QAAQ,IAAI,2BAAM,CAAC,MAAM,CAAC,EACtE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GACrC,CACH,CACc,CACK,CACzB,CAAC;AACJ,CAAC;AAxBD,sBAwBC"}

package/dist/label/label.module.scss

@@ -0,0 +1,24 @@
+.othersContainer {
+  > * {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: unset;
+    }
+  }
+}
+
+.othersTooltip {
+  user-select: none;
+  cursor: pointer;
+
+  &::before {
+    display: inline-block;
+    transition: transform 300ms;
+    content: '▾';
+  }
+
+  &.active::before {
+    transform: rotate(-180deg);
+  }
+}

package/dist/label/links.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentID } from '@teambit/component-id';
+export declare function calcComponentLink(id: ComponentID | undefined, exported: boolean | undefined): string;

package/dist/label/links.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcComponentLink = void 0;
+const url_join_1 = __importDefault(require("url-join"));
+const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
+function calcComponentLink(id, exported) {
+    if (!id)
+        return undefined;
+    if (exported)
+        return component_modules_component_url_1.ComponentUrl.toUrl(id);
+    return (0, url_join_1.default)('/', id.fullName);
+}
+exports.calcComponentLink = calcComponentLink;
+//# sourceMappingURL=links.js.map

package/dist/label/links.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"links.js","sourceRoot":"","sources":["../../label/links.tsx"],"names":[],"mappings":";;;;;;AAAA,wDAA+B;AAE/B,8FAAwE;AAExE,SAAgB,iBAAiB,CAAC,EAA2B,EAAE,QAA6B;IAC1F,IAAI,CAAC,EAAE;QAAE,OAAO,SAAS,CAAC;IAC1B,IAAI,QAAQ;QAAE,OAAO,8CAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC5C,OAAO,IAAA,kBAAO,EAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC;AACnC,CAAC;AAJD,8CAIC"}

package/dist/label/other-components.d.ts

@@ -0,0 +1,10 @@
+import { TippyProps } from '@tippyjs/react/headless';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { ComponentStripSize } from './component-strip';
+export declare type OtherComponentsProps = {
+    components: ComponentMetaHolder[];
+    size?: ComponentStripSize;
+    start?: number;
+    end?: number;
+} & TippyProps;
+export declare function OtherComponentsPopper({ components, children, start, end, size, placement, interactive, ...tippyProps }: OtherComponentsProps): JSX.Element;

package/dist/label/other-components.js

@@ -0,0 +1,35 @@
+"use strict";
+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.OtherComponentsPopper = void 0;
+const react_1 = __importDefault(require("react"));
+const headless_1 = __importDefault(require("@tippyjs/react/headless"));
+const component_strip_1 = require("./component-strip");
+const label_module_scss_1 = __importDefault(require("./label.module.scss"));
+// a popper ("tooltip") that shows the additional React Components related to this dom element
+function OtherComponentsPopper(_a) {
+    var { components, children, start, end = -1, size, placement = 'bottom', interactive = true } = _a, tippyProps = __rest(_a, ["components", "children", "start", "end", "size", "placement", "interactive"]);
+    const content = (react_1.default.createElement(react_1.default.Fragment, null, components
+        .slice(start, end)
+        .reverse()
+        .map((comp, idx) => (react_1.default.createElement(component_strip_1.ComponentStrip, { key: idx, component: comp, size: size })))));
+    return (react_1.default.createElement(headless_1.default, Object.assign({ placement: placement, interactive: interactive }, tippyProps, { 
+        // second parameter "content" is always undefined, use content inline
+        // https://github.com/atomiks/tippyjs-react/issues/341
+        render: (attrs) => (react_1.default.createElement("div", Object.assign({}, attrs, { className: label_module_scss_1.default.othersContainer }), content)) }), children));
+}
+exports.OtherComponentsPopper = OtherComponentsPopper;
+//# sourceMappingURL=other-components.js.map

package/dist/label/other-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"other-components.js","sourceRoot":"","sources":["../../label/other-components.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uEAA4D;AAG5D,uDAAuE;AACvE,4EAAyC;AASzC,8FAA8F;AAC9F,SAAgB,qBAAqB,CAAC,EASf;QATe,EACpC,UAAU,EACV,QAAQ,EACR,KAAK,EACL,GAAG,GAAG,CAAC,CAAC,EACR,IAAI,EACJ,SAAS,GAAG,QAAQ,EACpB,WAAW,GAAG,IAAI,OAEG,EADlB,UAAU,cARuB,8EASrC,CADc;IAEb,MAAM,OAAO,GAAG,CACd,8DACG,UAAU;SACR,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC;SACjB,OAAO,EAAE;SACT,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAClB,8BAAC,gCAAc,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAC1D,CAAC,CACH,CACJ,CAAC;IAEF,OAAO,CACL,8BAAC,kBAAK,kBACJ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,IACpB,UAAU;QACd,qEAAqE;QACrE,sDAAsD;QACtD,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACjB,uDAAS,KAAK,IAAE,SAAS,EAAE,2BAAM,CAAC,eAAe,KAC9C,OAAO,CACJ,CACP,KAEA,QAAQ,CACH,CACT,CAAC;AACJ,CAAC;AArCD,sDAqCC"}

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

@@ -2,3 +2,4 @@ export declare const MultiHighlighterPreview: () => JSX.Element;
 export declare const MultiHighlighterWithCustomColors: () => JSX.Element;
 export declare const MultiHighlighterInsideIgnore: () => JSX.Element;
 export declare const MultiHighlighterWithRule: () => JSX.Element;
+export declare const MultiHighlighterWithComponentRule: () => JSX.Element;

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

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiHighlighterWithRule = exports.MultiHighlighterInsideIgnore = exports.MultiHighlighterWithCustomColors = exports.MultiHighlighterPreview = void 0;
+exports.MultiHighlighterWithComponentRule = exports.MultiHighlighterWithRule = exports.MultiHighlighterInsideIgnore = 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 design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const multi_highlighter_1 = require("./multi-highlighter");
 const MultiHighlighterPreview = () => {
@@ -15,7 +16,7 @@ const MultiHighlighterPreview = () => {
         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")));
+        react_1.default.createElement(design_ui_icon_button_1.IconButton, null, "this will be highlighted with dropdown")));
 };
 exports.MultiHighlighterPreview = MultiHighlighterPreview;
 const MultiHighlighterWithCustomColors = () => {
@@ -45,9 +46,10 @@ const MultiHighlighterInsideIgnore = () => {
 };
 exports.MultiHighlighterInsideIgnore = MultiHighlighterInsideIgnore;
 const MultiHighlighterWithRule = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { rule: "#someSubTree *" },
-        react_1.default.createElement("br", null),
-        react_1.default.createElement("br", null),
+    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { rule: "#someSubTree *", style: { minWidth: 300 } },
+        react_1.default.createElement("div", null,
+            "element filter: ",
+            react_1.default.createElement("code", null, "\"#someSubTree *\"")),
         react_1.default.createElement("br", null),
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "no highlighter"),
         react_1.default.createElement("br", null),
@@ -57,6 +59,19 @@ const MultiHighlighterWithRule = () => {
             react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "this will be highlighted"))));
 };
 exports.MultiHighlighterWithRule = MultiHighlighterWithRule;
+const MultiHighlighterWithComponentRule = () => {
+    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { componentRule: "teambit.design/ui/icon-button", style: { minWidth: 300 } },
+        react_1.default.createElement("div", null,
+            "component filter: ",
+            react_1.default.createElement("code", null, "\"teambit.design/ui/icon-button\"")),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "no highlighter"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(design_ui_icon_button_1.IconButton, null, "this will be highlighted")));
+};
+exports.MultiHighlighterWithComponentRule = MultiHighlighterWithComponentRule;
 // export const HighlightingAllElementsInTheEnterprisePage = () => {
 //   return (
 //     <MultiHighlighter>

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

@@ -1 +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,8DAA2D;AAC3D,2DAAuD;AAEhD,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,OAAO,CACL,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QACrD,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,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EACtD,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;AAEK,MAAM,4BAA4B,GAAG,GAAG,EAAE;IAC/C,OAAO,CACL,8BAAC,uCAAkB;QACjB,8BAAC,oCAAgB;;YACiC,4CAAO,sBAAsB,CAAQ;YACrF,yCAAM;;YAEN,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,qBAAqC;YAC7D,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,oBAAoC,CAC3C,CACA,CACtB,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,4BAA4B,gCAkBvC;AAEK,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,OAAO,CACL,8BAAC,oCAAgB,IAAC,IAAI,EAAC,gBAAgB;QACrC,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,uCAAK,EAAE,EAAC,aAAa;YACnB,8BAAC,oFAAuB,mCAAmD,CACvE,CACW,CACpB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,wBAAwB,4BAenC;AAEF,oEAAoE;AACpE,aAAa;AACb,yBAAyB;AACzB,uDAAuD;AACvD,0BAA0B;AAC1B,OAAO;AACP,KAAK"}
+{"version":3,"file":"multi-highlighter.composition.js","sourceRoot":"","sources":["../../multi-highlighter/multi-highlighter.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAAsF;AACtF,oJAA8G;AAC9G,0EAA4D;AAC5D,8DAA2D;AAC3D,2DAAuD;AAEhD,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,OAAO,CACL,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QACrD,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,iDAAoD,CAC9C,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,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EACtD,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;AAEK,MAAM,4BAA4B,GAAG,GAAG,EAAE;IAC/C,OAAO,CACL,8BAAC,uCAAkB;QACjB,8BAAC,oCAAgB;;YACiC,4CAAO,sBAAsB,CAAQ;YACrF,yCAAM;;YAEN,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,qBAAqC;YAC7D,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,oBAAoC,CAC3C,CACA,CACtB,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,4BAA4B,gCAkBvC;AAEK,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,OAAO,CACL,8BAAC,oCAAgB,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QAC9D;;YACkB,iEAA6B,CACzC;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,uCAAK,EAAE,EAAC,aAAa;YACnB,8BAAC,oFAAuB,mCAAmD,CACvE,CACW,CACpB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,wBAAwB,4BAgBnC;AAEK,MAAM,iCAAiC,GAAG,GAAG,EAAE;IACpD,OAAO,CACL,8BAAC,oCAAgB,IAAC,aAAa,EAAC,+BAA+B,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QACtF;;YACoB,gFAA4C,CAC1D;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,mCAAsC,CAChC,CACpB,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,iCAAiC,qCAc5C;AAEF,oEAAoE;AACpE,aAAa;AACb,yBAAyB;AACzB,uDAAuD;AACvD,0BAA0B;AAC1B,OAAO;AACP,KAAK"}

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

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { HighlightTarget } from '../element-highlighter';
-import { MatchRule } from '../rule-matcher';
+import { MatchRule, ComponentMatchRule } from '../rule-matcher';
 declare type useMultiHighlighterProps = {
     onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
     disabled?: boolean;
@@ -8,6 +8,7 @@ declare type useMultiHighlighterProps = {
     scopeClass?: string;
     /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
     rule?: MatchRule;
+    componentRule?: ComponentMatchRule;
 };
-export declare function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector, rule, }: useMultiHighlighterProps): void;
+export declare function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector, rule, componentRule, }: useMultiHighlighterProps): void;
 export {};

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

@@ -10,7 +10,7 @@ const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-reac
 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");
 const rule_matcher_1 = require("../rule-matcher");
-function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector = '', rule, }) {
+function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector = '', rule, componentRule, }) {
     (0, react_1.useEffect)(() => {
         const nextTargets = {};
         const scopeElement = scopeRef.current;
@@ -26,15 +26,14 @@ function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSe
         // deduplicate
         const uniqueRoots = new Set(rootElements);
         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))
+            if (!element)
+                return;
+            const comps = (0, react_modules_dom_to_react_1.domToReacts)(element);
+            const componentsWithMeta = comps.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 (componentsWithMeta.length < 1)
                 return;
             const key = (0, get_xpath_1.default)(element);
-            const meta = comp[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField];
-            const compId = meta[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaProperties.componentId];
-            const link = meta[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaProperties.homepageUrl];
-            const local = meta[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaProperties.isExported] === false;
-            nextTargets[key] = { element, id: compId, link, local };
+            nextTargets[key] = { element, components: componentsWithMeta };
         });
         onChange(nextTargets);
     }, [disabled, scopeSelector]);

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

@@ -1 +1 @@
-{"version":3,"file":"use-multi-highlighter.js","sourceRoot":"","sources":["../../multi-highlighter/use-multi-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA6C;AAC7C,0DAAiC;AACjC,oFAAgF;AAChF,oJAI6E;AAE7E,8DAAmE;AACnE,kDAAyD;AAczD,SAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,aAAa,GAAG,EAAE,EAC9B,IAAI,GACqB;IACzB,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,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,MAAM,IAAI,GAAG,IAAI,CAAC,+EAAkB,CAAC,CAAC;YACtC,MAAM,MAAM,GAAG,IAAI,CAAC,oFAAuB,CAAC,WAAW,CAAC,CAAC;YACzD,MAAM,IAAI,GAAG,IAAI,CAAC,oFAAuB,CAAC,WAAW,CAAC,CAAC;YACvD,MAAM,KAAK,GAAG,IAAI,CAAC,oFAAuB,CAAC,UAAU,CAAC,KAAK,KAAK,CAAC;YACjE,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;AAChC,CAAC;AAnCD,kDAmCC;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-multi-highlighter.js","sourceRoot":"","sources":["../../multi-highlighter/use-multi-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA6C;AAC7C,0DAAiC;AACjC,oFAAiF;AACjF,oJAI6E;AAE7E,8DAAmE;AACnE,kDAAmG;AAenG,SAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,aAAa,GAAG,EAAE,EAC9B,IAAI,EACJ,aAAa,GACY;IACzB,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,kDAsCC;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/rule-matcher.d.ts

@@ -1,2 +1,8 @@
+import { ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 export declare type MatchRule = undefined | string | ((element: HTMLElement) => boolean);
+export declare type ComponentMatchRule = undefined | string | string[] | ((target: ComponentMatchTarget) => boolean);
 export declare function ruleMatcher(element: HTMLElement, rule: MatchRule): boolean;
+export declare type ComponentMatchTarget = {
+    meta: ComponentMeta;
+};
+export declare function componentRuleMatcher(target: ComponentMatchTarget, rule: ComponentMatchRule): boolean;

package/dist/rule-matcher.js

@@ -1,7 +1,8 @@
 "use strict";
-// in the future, we will add more options here, like include / exclude objects.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ruleMatcher = void 0;
+exports.componentRuleMatcher = exports.ruleMatcher = void 0;
+// in the future, we will add more options here, like include / exclude objects.
+const component_id_1 = require("@teambit/component-id");
 function ruleMatcher(element, rule) {
     if (typeof rule === 'string') {
         return element.matches(rule);
@@ -12,4 +13,21 @@ function ruleMatcher(element, rule) {
     return true;
 }
 exports.ruleMatcher = ruleMatcher;
+function componentRuleMatcher(target, rule) {
+    if (typeof rule === 'string') {
+        const targetCmpId = component_id_1.ComponentID.tryFromString(target.meta.id);
+        const ruleCmpId = component_id_1.ComponentID.tryFromString(rule);
+        return component_id_1.ComponentID.isEqual(ruleCmpId, targetCmpId, { ignoreVersion: true });
+    }
+    if (Array.isArray(rule)) {
+        const targetCmpId = component_id_1.ComponentID.tryFromString(target.meta.id);
+        const ruleCmpIds = rule.map((x) => component_id_1.ComponentID.tryFromString(x));
+        return ruleCmpIds.some((cmdId) => component_id_1.ComponentID.isEqual(targetCmpId, cmdId, { ignoreVersion: true }));
+    }
+    if (typeof rule === 'function') {
+        return rule(target);
+    }
+    return true;
+}
+exports.componentRuleMatcher = componentRuleMatcher;
 //# sourceMappingURL=rule-matcher.js.map

package/dist/rule-matcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"rule-matcher.js","sourceRoot":"","sources":["../rule-matcher.tsx"],"names":[],"mappings":";AAAA,gFAAgF;;;AAIhF,SAAgB,WAAW,CAAC,OAAoB,EAAE,IAAe;IAC/D,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC;KACtB;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAVD,kCAUC"}
+{"version":3,"file":"rule-matcher.js","sourceRoot":"","sources":["../rule-matcher.tsx"],"names":[],"mappings":";;;AAAA,gFAAgF;AAChF,wDAAoD;AAMpD,SAAgB,WAAW,CAAC,OAAoB,EAAE,IAAe;IAC/D,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC;KACtB;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAVD,kCAUC;AAID,SAAgB,oBAAoB,CAAC,MAA4B,EAAE,IAAwB;IACzF,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,MAAM,WAAW,GAAG,0BAAW,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9D,MAAM,SAAS,GAAG,0BAAW,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAElD,OAAO,0BAAW,CAAC,OAAO,CAAC,SAAS,EAAE,WAAW,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;KAC7E;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACvB,MAAM,WAAW,GAAG,0BAAW,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,0BAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QAEjE,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,0BAAW,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;KACrG;IAED,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC;KACrB;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AApBD,oDAoBC"}

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

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

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

@@ -1 +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"}
+{"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/element-highlighter/element-highlighter.compositions.tsx

@@ -1,10 +1,15 @@
+import { componentMetaField } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import React, { useState, createRef, useEffect, CSSProperties } from 'react';
-import { ElementHighlighter, HighlightTarget } from './element-highlighter';
+import { ElementHighlighter, HighlighterSize, HighlightTarget } from './element-highlighter';
 
 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',
+  components: [
+    {
+      [componentMetaField]: {
+        id: 'teambit.design/ui/icon-button@1.6.2',
+      },
+    },
+  ],
 };
 
 type HighlightedElementProps = {
@@ -12,9 +17,10 @@ type HighlightedElementProps = {
   targetStyle?: CSSProperties;
   className?: string;
   watchMotion?: boolean;
+  size?: HighlighterSize;
 };
 
-export const HighlightedElement = ({ style, targetStyle, watchMotion, className }: HighlightedElementProps) => {
+export const HighlightedElement = ({ style, targetStyle, watchMotion, className, size }: HighlightedElementProps) => {
   const [targetElement, setTargetElement] = useState<HTMLElement | undefined>(undefined);
   const targetRef = createRef<HTMLDivElement>();
 
@@ -22,11 +28,13 @@ export const HighlightedElement = ({ style, targetStyle, watchMotion, className
   const target = targetElement && { ...mockTarget, element: targetElement };
 
   return (
-    <div className={className} style={{ padding: '16px 16px 50px 16px', width: 300 }}>
+    <div className={className} style={{ padding: '16px 16px 40px 16px', width: 300 }}>
       <div ref={targetRef} style={{ width: 100, ...targetStyle }}>
         highlight target
       </div>
-      {target && <ElementHighlighter target={target} style={style} watchMotion={watchMotion} placement="bottom" />}
+      {target && (
+        <ElementHighlighter target={target} style={style} watchMotion={watchMotion} placement="bottom" size={size} />
+      )}
     </div>
   );
 };
@@ -46,7 +54,13 @@ export const Customized = () => {
 };
 
 export const Sizes = () => {
-  return <HighlightedElement style={{ fontSize: '16px' }} />;
+  return (
+    <div>
+      <HighlightedElement size="s" />
+      <HighlightedElement size="m" />
+      <HighlightedElement size="l" />
+    </div>
+  );
 };
 
 export const MovingElement = () => {

package/element-highlighter/element-highlighter.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import classnames from 'classnames';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import { Frame } from '../frame';
-import { Label, LabelContainer, Placement } from '../label';
+import { Label, LabelContainer, Placement, LabelSize } from '../label';
 import { excludeHighlighterAtt } from '../ignore-highlighter';
 import styles from './element-highlighter.module.scss';
 
+export type HighlighterSize = LabelSize;
+
 export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
   /** target element to highlight */
   target: HighlightTarget;
@@ -14,19 +17,16 @@ export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivEle
   classes?: HighlightClasses;
   /** continually update highlighter to match moving elements */
   watchMotion?: boolean;
+  size?: HighlighterSize;
 }
 
 export { Placement };
 
 export type HighlightTarget = {
-  id?: string;
+  /** element to show the highlight at */
   element: HTMLElement;
-  /** e.g. 'https://bit.dev/teambit/base-ui/elements/dots-loader', */
-  link?: string;
-  /** e.g. 'https://bit.dev/teambit/base-ui' */
-  scopeLink?: string;
-  /** use full production url, or local workspace url */
-  local?: boolean;
+  /** components with metadata to show in the label */
+  components?: ComponentMetaHolder[];
 };
 
 export type HighlightClasses = {
@@ -41,6 +41,7 @@ export function ElementHighlighter({
   watchMotion = true,
   className,
   classes,
+  size,
   ...props
 }: ElementHighlighterProps) {
   return (
@@ -51,20 +52,14 @@ export function ElementHighlighter({
         watchMotion={watchMotion}
       />
 
-      {target.id && (
+      {target.components && (
         <LabelContainer
           className={styles.label}
           targetRef={target.element}
           placement={placement}
           watchMotion={watchMotion}
         >
-          <Label
-            componentId={target.id}
-            link={target.link}
-            scopeLink={target.scopeLink}
-            local={target.local}
-            className={classes?.label}
-          />
+          <Label components={target.components} className={classes?.label} size={size} />
         </LabelContainer>
       )}
     </div>

package/element-highlighter/index.ts

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

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

@@ -1,27 +1,34 @@
 import React, { useEffect } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
-import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
+import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
 import { useHoverSelection } from '@teambit/react.ui.hover-selector';
-import { hasComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import {
+  componentMetaField,
+  hasComponentMeta,
+  ReactComponentMetaHolder,
+} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 
 import { excludeHighlighterSelector } from '../ignore-highlighter';
 import { HighlightTarget } from '../element-highlighter';
-import { ruleMatcher, MatchRule } from '../rule-matcher';
+import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
 
 export type useHoverHighlighterOptions = {
   debounceDuration: number;
   scopeClass: string;
   disabled?: boolean;
+  /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
   rule?: MatchRule;
+  /** filter targets by this component match rule */
+  componentRule?: ComponentMatchRule;
 };
 
 /** fires onChange when targeting a new component */
 export function useHoverHighlighter<T extends HTMLElement = HTMLElement>(
   onChange: (target?: HighlightTarget) => void,
   props: React.HTMLAttributes<T> = {},
-  { debounceDuration, scopeClass, disabled, rule }: useHoverHighlighterOptions
+  { debounceDuration, scopeClass, disabled, rule, componentRule }: useHoverHighlighterOptions
 ) {
-  const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule });
+  const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule, componentRule });
 
   const handlers = useHoverSelection(disabled ? undefined : handleElement, props);
 
@@ -34,9 +41,17 @@ type useHoverHighlighterProps = {
   debounceDuration?: number;
   disabled?: boolean;
   rule?: MatchRule;
+  componentRule?: ComponentMatchRule;
 };
 
-function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled, rule }: useHoverHighlighterProps) {
+function useHoverHandler({
+  onChange,
+  scopeClass = '',
+  debounceDuration,
+  disabled,
+  rule,
+  componentRule,
+}: useHoverHighlighterProps) {
   // debounced method is ref'ed, so no need for useCallback
   const _handleElement = (element: HTMLElement | null) => {
     // clear highlighter at the edges:
@@ -48,15 +63,12 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
     // skip DOM trees having 'data-ignore-component-highlight'
     if (element.closest(`.${scopeClass} ${excludeHighlighterSelector}`)) return;
 
-    const result = bubbleToBitComponent(element, rule ? (current) => ruleMatcher(current, rule) : undefined);
+    const result = bubbleToBitComponent(element, rule, componentRule);
     if (!result) return;
 
     onChange({
       element: result.element,
-      id: result.meta.id,
-      scopeLink: undefined,
-      link: result.meta.homepage,
-      local: result.meta.exported === false,
+      components: result.components,
     });
   };
 
@@ -71,20 +83,25 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
 }
 
 /** go up the dom tree until reaching a react bit component */
-function bubbleToBitComponent(element: HTMLElement | null, filter?: (elem: HTMLElement) => boolean) {
+function bubbleToBitComponent(
+  element: HTMLElement | null,
+  elementRule?: MatchRule,
+  componentRule?: ComponentMatchRule
+) {
   for (let current = element; current; current = current.parentElement) {
     current = toRootElement(current);
-    if (!current || filter?.(current) === false) return undefined;
-
-    const component = domToReact(current);
+    if (!current) return undefined;
+    if (ruleMatcher(current, elementRule)) {
+      const components = domToReacts(current);
 
-    if (hasComponentMeta(component)) {
-      const meta = component.__bit_component;
+      const relevantComponents = components.filter(
+        (x) => hasComponentMeta(x) && componentRuleMatcher({ meta: x[componentMetaField] }, componentRule)
+      ) as ReactComponentMetaHolder[];
 
+      if (relevantComponents.length < 1) return undefined;
       return {
         element: current,
-        component,
-        meta,
+        components: relevantComponents,
       };
     }
   }