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

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/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, fontFamily: 'sans-serif' }}>
       <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 style={{ fontSize: 10 }} />
+      <HighlightedElement style={{ fontSize: 14 }} />
+      <HighlightedElement style={{ fontSize: 18 }} />
+    </div>
+  );
 };
 
 export const MovingElement = () => {

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

@@ -1,11 +1,8 @@
 @import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
 
-.container {
-  font-size: 12px;
-}
-
 .label {
-  font-family: sans-serif;
+  // space between the label and the target
+  // keep this space so users can move their cursor in this space.
   padding: 8px;
 }
 

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/hover-highlighter.compositions.tsx

@@ -6,7 +6,7 @@ export const ShowWhenHovering = () => {
   const [disabled, setDisabled] = useState<boolean>(false);
 
   return (
-    <div style={{ padding: '16px 50px 32px 16px', minWidth: 300 }}>
+    <div style={{ padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' }}>
       <HoverHighlighter style={{ padding: 16 }} disabled={disabled}>
         <div>
           <br />

package/hover-highlighter/hover-highlighter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HybridHighlighter, HybridHighlighterProps } from '../hybrid-highligher';
+import { HybridHighlighter, HybridHighlighterProps } from '../hybrid-highlighter';
 
 export type HoverHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
 

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,
       };
     }
   }

package/{hybrid-highligher → hybrid-highlighter}/hybrid-highlighter.tsx

@@ -3,9 +3,15 @@ import classnames from 'classnames';
 import { v4 } from 'uuid';
 
 import { useHoverHighlighter } from '../hover-highlighter';
-import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../element-highlighter';
-import { useMultiHighlighter } from '../multi-highlighter/use-multi-highlighter';
-import type { MatchRule } from '../rule-matcher';
+import {
+  ElementHighlighter,
+  HighlightTarget,
+  Placement,
+  HighlightClasses,
+  HighlighterSize,
+} from '../element-highlighter';
+import { useChildrenHighlighter } from '../children-highlighter';
+import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
   /** stop all highlighting and drop listeners */
@@ -27,6 +33,8 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
 
   /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
   rule?: MatchRule;
+  /** filter components to match this rule. Can be id, array of ids, or a function */
+  componentRule?: ComponentMatchRule;
 
   /** set the behavior of the highlighter.
    * `disabled` - stops highlighting.
@@ -37,6 +45,7 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
   bgColor?: string;
   bgColorHover?: string;
   bgColorActive?: string;
+  size?: HighlighterSize;
 }
 
 /** automatically highlight components on hover */
@@ -47,6 +56,7 @@ export function HybridHighlighter({
   watchMotion = true,
   placement,
   rule,
+  componentRule,
 
   classes,
   highlightStyle,
@@ -55,6 +65,7 @@ export function HybridHighlighter({
   bgColor,
   bgColorHover,
   bgColorActive,
+  size,
   children,
   ...rest
 }: HybridHighlighterProps) {
@@ -76,15 +87,17 @@ export function HybridHighlighter({
       scopeClass,
       disabled: disabled || mode !== 'hover',
       rule,
+      componentRule,
     }
   );
 
-  useMultiHighlighter({
+  useChildrenHighlighter({
     onChange: setTarget,
     scopeRef: ref,
     scopeClass,
     disabled: disabled || mode !== 'allChildren',
     rule,
+    componentRule,
   });
 
   const _styles = useMemo(
@@ -119,6 +132,7 @@ export function HybridHighlighter({
           style={highlightStyle}
           placement={placement}
           watchMotion={watchMotion}
+          size={size}
         />
       ))}
     </div>

package/index.ts

@@ -1,11 +1,11 @@
-export { HybridHighlighter as ComponentHighlighter } from './hybrid-highligher';
-export type { HybridHighlighterProps as ComponentHighlightProps } from './hybrid-highligher';
+export { HybridHighlighter as ComponentHighlighter } from './hybrid-highlighter';
+export type { HybridHighlighterProps as ComponentHighlightProps } from './hybrid-highlighter';
 
 export { HoverHighlighter } from './hover-highlighter';
 export type { HoverHighlighterProps } from './hover-highlighter';
 
-export { MultiHighlighter } from './multi-highlighter';
-export type { MultiHighlighterProps } from './multi-highlighter';
+export { ChildrenHighlighter } from './children-highlighter';
+export type { ChildrenHighlighterProps } from './children-highlighter';
 
 export { ElementHighlighter } from './element-highlighter';
 export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';