@teambit/react.ui.component-highlighter 0.0.490 → 0.0.494

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,8 +1,8 @@
 import { ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-export declare type ComponentMatchTarget = {
-    meta: ComponentMeta;
-};
 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,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 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') {

package/dist/rule-matcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"rule-matcher.js","sourceRoot":"","sources":["../rule-matcher.tsx"],"names":[],"mappings":";;;AAAA,wDAAoD;AAQpD,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;AAED,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"}
+{"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/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,8 +1,12 @@
 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';
@@ -64,10 +68,7 @@ function useHoverHandler({
 
     onChange({
       element: result.element,
-      id: result.meta.id,
-      scopeLink: undefined,
-      link: result.meta.homepage,
-      local: result.meta.exported === false,
+      components: result.components,
     });
   };
 
@@ -91,18 +92,17 @@ function bubbleToBitComponent(
     current = toRootElement(current);
     if (!current) return undefined;
     if (ruleMatcher(current, elementRule)) {
-      const component = domToReact(current);
-
-      if (hasComponentMeta(component)) {
-        const meta = component.__bit_component;
-
-        if (componentRuleMatcher({ meta }, componentRule))
-          return {
-            element: current,
-            component,
-            meta,
-          };
-      }
+      const components = domToReacts(current);
+
+      const relevantComponents = components.filter(
+        (x) => hasComponentMeta(x) && componentRuleMatcher({ meta: x[componentMetaField] }, componentRule)
+      ) as ReactComponentMetaHolder[];
+
+      if (relevantComponents.length < 1) return undefined;
+      return {
+        element: current,
+        components: relevantComponents,
+      };
     }
   }
 

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

@@ -3,8 +3,14 @@ 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 {
+  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> {
@@ -27,6 +33,7 @@ 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.
@@ -38,6 +45,7 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
   bgColor?: string;
   bgColorHover?: string;
   bgColorActive?: string;
+  size?: HighlighterSize;
 }
 
 /** automatically highlight components on hover */
@@ -57,6 +65,7 @@ export function HybridHighlighter({
   bgColor,
   bgColorHover,
   bgColorActive,
+  size,
   children,
   ...rest
 }: HybridHighlighterProps) {
@@ -78,17 +87,17 @@ export function HybridHighlighter({
       scopeClass,
       disabled: disabled || mode !== 'hover',
       rule,
-      componentRule
+      componentRule,
     }
   );
 
-  useMultiHighlighter({
+  useChildrenHighlighter({
     onChange: setTarget,
     scopeRef: ref,
     scopeClass,
     disabled: disabled || mode !== 'allChildren',
     rule,
-    componentRule
+    componentRule,
   });
 
   const _styles = useMemo(
@@ -123,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';

package/label/component-strip.module.scss

@@ -0,0 +1,64 @@
+$borderRadius: 8px;
+$gap: 2px;
+
+.componentStrip {
+  display: flex;
+
+  font-size: 14px;
+  line-height: 16px;
+  border-radius: $borderRadius;
+  box-shadow: 0px 11px 29px 0px rgba(0, 0, 0, 0.23);
+
+  &[data-size='s'] {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &[data-size='m'] {
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  &[data-size='l'] {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  > * {
+    padding: 4px 8px;
+
+    transition: filter 300ms, background-color 300ms;
+    transform: translateZ(0); //fix blurriness in Safari
+
+    background: var(--bit-highlighter-color, #eebcc9);
+
+    &:link,
+    &:visited {
+      text-decoration: inherit; // reset browser defaults
+      color: inherit; // reset browser defaults
+
+      &:hover {
+        background: var(--bit-highlighter-color-hover, #f6dae2);
+      }
+
+      &:active {
+        background: var(--bit-highlighter-color-active, #e79db1);
+        color: inherit;
+      }
+    }
+
+    &:first-child {
+      border-top-left-radius: $borderRadius;
+      border-bottom-left-radius: $borderRadius;
+    }
+
+    margin-right: $gap;
+
+    &:last-child {
+      border-top-right-radius: $borderRadius;
+      border-bottom-right-radius: $borderRadius;
+
+      margin-right: unset;
+    }
+  }
+}

package/label/component-strip.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo, ReactNode, forwardRef, ForwardedRef } from 'react';
+import { NativeLink } from '@teambit/base-ui.routing.native-link';
+import { ComponentID } from '@teambit/component-id';
+import { ScopeUrl } from '@teambit/component.modules.component-url';
+import {
+  componentMetaField,
+  ComponentMetaHolder,
+} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import styles from './component-strip.module.scss';
+import { calcComponentLink } from './links';
+
+export type ComponentStripSize = 's' | 'm' | 'l';
+
+interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
+  component: ComponentMetaHolder;
+  size?: ComponentStripSize;
+}
+export const ComponentStrip = forwardRef(function ComponentStrip(
+  { component, size = 'm', children }: ComponentStripProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const { id, homepage, exported } = component[componentMetaField];
+
+  const parsedId = useMemo(() => ComponentID.tryFromString(id), [id]);
+  const componentLink = homepage || calcComponentLink(parsedId, exported);
+
+  return (
+    <div className={styles.componentStrip} ref={ref} data-size={size}>
+      {!parsedId && <LabelBlock link={homepage}>{id}</LabelBlock>}
+      {parsedId && <LabelBlock link={ScopeUrl.toUrl(parsedId.scope)}>{parsedId.scope}</LabelBlock>}
+      {parsedId && (
+        <LabelBlock link={componentLink}>
+          {parsedId.fullName}
+          {parsedId.version && parsedId.version !== 'latest' && `@${parsedId.version}`}
+        </LabelBlock>
+      )}
+      {children}
+    </div>
+  );
+});
+
+function LabelBlock({ link, children }: { link?: string; children: ReactNode }) {
+  const Comp = link ? NativeLink : 'span';
+  return (
+    <Comp href={link} external={!!link}>
+      {children}
+    </Comp>
+  );
+}

package/label/index.ts

@@ -1,2 +1,5 @@
-export { LabelContainer, Label } from './label';
-export type { LabelContainerProps, LabelProps, Placement } from './label';
+export { Label } from './label';
+export type { LabelProps, LabelSize } from './label';
+
+export { LabelContainer } from './label-container';
+export type { LabelContainerProps, Placement } from './label-container';

package/label/label-container.tsx

@@ -0,0 +1,46 @@
+import React, { useMemo, useState } from 'react';
+import { usePopper } from 'react-popper';
+import type { Placement, Modifier } from '@popperjs/core';
+import '@popperjs/core';
+
+import { useAnimationFrame } from '../use-animation-frame';
+
+export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  targetRef: HTMLElement | null;
+  offset?: [number, number];
+  placement?: Placement;
+  flip?: boolean;
+  /** continually update label position to match moving elements */
+  watchMotion?: boolean;
+}
+
+export type { Placement };
+
+// TODO - replace this with TippyJS, when it supports a `targetElement={targetRef.current}` prop
+export function LabelContainer({
+  targetRef,
+  offset,
+  placement,
+  flip = true,
+  watchMotion,
+  className,
+  ...rest
+}: LabelContainerProps) {
+  const [sourceRef, setSourceRef] = useState<HTMLDivElement | null>(null);
+
+  const modifiers = useMemo<Partial<Modifier<any, any>>[]>(
+    () => [{ name: 'offset', options: { offset } }],
+    [flip, offset]
+  );
+
+  const { styles, attributes, update } = usePopper(targetRef, sourceRef, {
+    modifiers,
+    placement,
+  });
+
+  useAnimationFrame(!!watchMotion && update);
+
+  if (!targetRef) return null;
+
+  return <div {...rest} ref={setSourceRef} className={className} style={styles.popper} {...attributes.popper} />;
+}

package/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);
+  }
+}