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

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

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Placement } from '../label';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { Placement, LabelSize } from '../label';
+export declare type HighlighterSize = LabelSize;
 export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
     /** target element to highlight */
     target: HighlightTarget;
@@ -9,21 +11,18 @@ export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivEle
     classes?: HighlightClasses;
     /** continually update highlighter to match moving elements */
     watchMotion?: boolean;
+    size?: HighlighterSize;
 }
 export { Placement };
 export declare 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 declare type HighlightClasses = {
     container?: string;
     frame?: string;
     label?: string;
 };
-export declare function ElementHighlighter({ target, placement, watchMotion, className, classes, ...props }: ElementHighlighterProps): JSX.Element;
+export declare function ElementHighlighter({ target, placement, watchMotion, className, classes, size, ...props }: ElementHighlighterProps): JSX.Element;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AACpC,oCAAiC;AACjC,oCAA4D;AAC5D,8DAA8D;AAC9D,wGAAuD;AAgCvD,SAAgB,kBAAkB,CAAC,EAOT;QAPS,EACjC,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,OAAO,OAEiB,EADrB,KAAK,cANyB,8DAOlC,CADS;IAER,OAAO,CACL,uDAAS,KAAK,EAAM,0CAAqB,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,yCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/G,8BAAC,aAAK,IACJ,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,EACnD,WAAW,EAAE,WAAW,GACxB;QAED,MAAM,CAAC,EAAE,IAAI,CACZ,8BAAC,sBAAc,IACb,SAAS,EAAE,yCAAM,CAAC,KAAK,EACvB,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW;YAExB,8BAAC,aAAK,IACJ,WAAW,EAAE,MAAM,CAAC,EAAE,EACtB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GACzB,CACa,CAClB,CACG,CACP,CAAC;AACJ,CAAC;AAlCD,gDAkCC"}
+{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,oCAAiC;AACjC,oCAAuE;AACvE,8DAA8D;AAC9D,wGAAuD;AA+BvD,SAAgB,kBAAkB,CAAC,EAQT;QARS,EACjC,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,OAAO,EACP,IAAI,OAEoB,EADrB,KAAK,cAPyB,sEAQlC,CADS;IAER,OAAO,CACL,uDAAS,KAAK,EAAM,0CAAqB,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,yCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/G,8BAAC,aAAK,IACJ,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,EACnD,WAAW,EAAE,WAAW,GACxB;QAED,MAAM,CAAC,UAAU,IAAI,CACpB,8BAAC,sBAAc,IACb,SAAS,EAAE,yCAAM,CAAC,KAAK,EACvB,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW;YAExB,8BAAC,aAAK,IAAC,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI,CAChE,CAClB,CACG,CACP,CAAC;AACJ,CAAC;AA7BD,gDA6BC"}

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

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

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ShowWhenHovering: () => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { HybridHighlighterProps } from '../hybrid-highligher';
+import { HybridHighlighterProps } from '../hybrid-highlighter';
 export declare type HoverHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
 export declare function HoverHighlighter({ ...props }: HoverHighlighterProps): JSX.Element;

package/dist/hover-highlighter/hover-highlighter.js

@@ -16,10 +16,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HoverHighlighter = void 0;
 const react_1 = __importDefault(require("react"));
-const hybrid_highligher_1 = require("../hybrid-highligher");
+const hybrid_highlighter_1 = require("../hybrid-highlighter");
 function HoverHighlighter(_a) {
     var props = __rest(_a, []);
-    return react_1.default.createElement(hybrid_highligher_1.HybridHighlighter, Object.assign({}, props, { mode: 'hover' }));
+    return react_1.default.createElement(hybrid_highlighter_1.HybridHighlighter, Object.assign({}, props, { mode: 'hover' }));
 }
 exports.HoverHighlighter = HoverHighlighter;
 //# sourceMappingURL=hover-highlighter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAiF;AAIjF,SAAgB,gBAAgB,CAAC,EAAmC;QAA9B,KAAK,cAAV,EAAY,CAAF;IACzC,OAAO,8BAAC,qCAAiB,oBAAK,KAAK,IAAE,IAAI,EAAE,OAAO,IAAI,CAAC;AACzD,CAAC;AAFD,4CAEC"}
+{"version":3,"file":"hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,8DAAkF;AAIlF,SAAgB,gBAAgB,CAAC,EAAmC;QAA9B,KAAK,cAAV,EAAY,CAAF;IACzC,OAAO,8BAAC,sCAAiB,oBAAK,KAAK,IAAE,IAAI,EAAE,OAAO,IAAI,CAAC;AACzD,CAAC;AAFD,4CAEC"}

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

@@ -12,9 +12,9 @@ export declare type useHoverHighlighterOptions = {
 };
 /** fires onChange when targeting a new component */
 export declare function useHoverHighlighter<T extends HTMLElement = HTMLElement>(onChange: (target?: HighlightTarget) => void, props: React.HTMLAttributes<T>, { debounceDuration, scopeClass, disabled, rule, componentRule }: useHoverHighlighterOptions): {
-    onMouseOver?: undefined;
-    onMouseLeave?: undefined;
-} | {
     onMouseOver: (event: React.MouseEvent<T, MouseEvent>) => void;
     onMouseLeave: (event: React.MouseEvent<T, MouseEvent>) => void;
+} | {
+    onMouseOver?: undefined;
+    onMouseLeave?: undefined;
 };

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

@@ -31,10 +31,7 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
             return;
         onChange({
             element: result.element,
-            id: result.meta.id,
-            scopeLink: undefined,
-            link: result.meta.homepage,
-            local: result.meta.exported === false,
+            components: result.components,
         });
     };
     const handleElement = (0, use_debounce_1.useDebouncedCallback)(_handleElement, debounceDuration);
@@ -52,16 +49,14 @@ function bubbleToBitComponent(element, elementRule, componentRule) {
         if (!current)
             return undefined;
         if ((0, rule_matcher_1.ruleMatcher)(current, elementRule)) {
-            const component = (0, react_modules_dom_to_react_1.domToReact)(current);
-            if ((0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(component)) {
-                const meta = component.__bit_component;
-                if ((0, rule_matcher_1.componentRuleMatcher)({ meta }, componentRule))
-                    return {
-                        element: current,
-                        component,
-                        meta,
-                    };
-            }
+            const components = (0, react_modules_dom_to_react_1.domToReacts)(current);
+            const relevantComponents = components.filter((x) => (0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(x) && (0, rule_matcher_1.componentRuleMatcher)({ meta: x[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] }, componentRule));
+            if (relevantComponents.length < 1)
+                return undefined;
+            return {
+                element: current,
+                components: relevantComponents,
+            };
         }
     }
     return undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"use-hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/use-hover-highlighter.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/use-hover-highlighter.tsx"],"names":[],"mappings":";;;AAAA,iCAAyC;AACzC,+CAAoD;AACpD,oFAAiF;AACjF,8EAAqE;AACrE,oJAI6E;AAE7E,8DAAmE;AAEnE,kDAAmG;AAYnG,oDAAoD;AACpD,SAAgB,mBAAmB,CACjC,QAA4C,EAC5C,QAAiC,EAAE,EACnC,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAA8B;IAE3F,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;IAErH,MAAM,QAAQ,GAAG,IAAA,2CAAiB,EAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAEhF,OAAO,QAAQ,CAAC;AAClB,CAAC;AAVD,kDAUC;AAWD,SAAS,eAAe,CAAC,EACvB,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,gBAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,aAAa,GACY;IACzB,yDAAyD;IACzD,MAAM,cAAc,GAAG,CAAC,OAA2B,EAAE,EAAE;QACrD,kCAAkC;QAClC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,kCAAkC,CAAC,EAAE;YACxE,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO;SACR;QAED,0DAA0D;QAC1D,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,UAAU,IAAI,+CAA0B,EAAE,CAAC;YAAE,OAAO;QAE5E,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,EAAE,IAAI,EAAE,aAAa,CAAC,CAAC;QAClE,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,QAAQ,CAAC;YACP,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mCAAoB,EAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;IAE7E,uBAAuB;IACvB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,aAAa,CAAC,MAAM,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,aAAa,EAAE,CAAC;AAC3B,CAAC;AAED,8DAA8D;AAC9D,SAAS,oBAAoB,CAC3B,OAA2B,EAC3B,WAAuB,EACvB,aAAkC;IAElC,KAAK,IAAI,OAAO,GAAG,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,aAAa,EAAE;QACpE,OAAO,GAAG,IAAA,0CAAa,EAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAC/B,IAAI,IAAA,0BAAW,EAAC,OAAO,EAAE,WAAW,CAAC,EAAE;YACrC,MAAM,UAAU,GAAG,IAAA,wCAAW,EAAC,OAAO,CAAC,CAAC;YAExC,MAAM,kBAAkB,GAAG,UAAU,CAAC,MAAM,CAC1C,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,6EAAgB,EAAC,CAAC,CAAC,IAAI,IAAA,mCAAoB,EAAC,EAAE,IAAI,EAAE,CAAC,CAAC,+EAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACrE,CAAC;YAEhC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO,SAAS,CAAC;YACpD,OAAO;gBACL,OAAO,EAAE,OAAO;gBAChB,UAAU,EAAE,kBAAkB;aAC/B,CAAC;SACH;KACF;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/{hybrid-highligher → hybrid-highlighter}/hybrid-highlighter.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { Placement, HighlightClasses } from '../element-highlighter';
+import { Placement, HighlightClasses, HighlighterSize } from '../element-highlighter';
 import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
     /** stop all highlighting and drop listeners */
@@ -20,6 +20,7 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
     watchMotion?: boolean;
     /** 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.
@@ -30,6 +31,7 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
     bgColor?: string;
     bgColorHover?: string;
     bgColorActive?: string;
+    size?: HighlighterSize;
 }
 /** automatically highlight components on hover */
-export declare function HybridHighlighter({ disabled, mode, debounceSelection, watchMotion, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children, ...rest }: HybridHighlighterProps): JSX.Element;
+export declare function HybridHighlighter({ disabled, mode, debounceSelection, watchMotion, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, size, children, ...rest }: HybridHighlighterProps): JSX.Element;

package/dist/{hybrid-highligher → hybrid-highlighter}/hybrid-highlighter.js

@@ -39,10 +39,10 @@ const classnames_1 = __importDefault(require("classnames"));
 const uuid_1 = require("uuid");
 const hover_highlighter_1 = require("../hover-highlighter");
 const element_highlighter_1 = require("../element-highlighter");
-const use_multi_highlighter_1 = require("../multi-highlighter/use-multi-highlighter");
+const children_highlighter_1 = require("../children-highlighter");
 /** automatically highlight components on hover */
 function HybridHighlighter(_a) {
-    var { disabled, mode = 'hover', debounceSelection = 80, watchMotion = true, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children } = _a, rest = __rest(_a, ["disabled", "mode", "debounceSelection", "watchMotion", "placement", "rule", "componentRule", "classes", "highlightStyle", "className", "style", "bgColor", "bgColorHover", "bgColorActive", "children"]);
+    var { disabled, mode = 'hover', debounceSelection = 80, watchMotion = true, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, size, children } = _a, rest = __rest(_a, ["disabled", "mode", "debounceSelection", "watchMotion", "placement", "rule", "componentRule", "classes", "highlightStyle", "className", "style", "bgColor", "bgColorHover", "bgColorActive", "size", "children"]);
     const ref = (0, react_1.createRef)();
     const [targets, setTarget] = (0, react_1.useState)({});
     const scopeClass = (0, react_1.useRef)(`hl-scope-${(0, uuid_1.v4)()}`).current;
@@ -57,20 +57,20 @@ function HybridHighlighter(_a) {
         scopeClass,
         disabled: disabled || mode !== 'hover',
         rule,
-        componentRule
+        componentRule,
     });
-    (0, use_multi_highlighter_1.useMultiHighlighter)({
+    (0, children_highlighter_1.useChildrenHighlighter)({
         onChange: setTarget,
         scopeRef: ref,
         scopeClass,
         disabled: disabled || mode !== 'allChildren',
         rule,
-        componentRule
+        componentRule,
     });
     const _styles = (0, react_1.useMemo)(() => (Object.assign({ '--bit-highlighter-color': bgColor, '--bit-highlighter-color-hover': bgColorHover, '--bit-highlighter-color-active': bgColorActive }, style)), [bgColor, bgColorHover, bgColorActive, style]);
     return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, handlers, { style: _styles, className: (0, classnames_1.default)(className, scopeClass), "data-nullify-component-highlight": true }),
         children,
-        Object.entries(targets).map(([key, target]) => (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { key: key, target: target, classes: classes, style: highlightStyle, placement: placement, watchMotion: watchMotion })))));
+        Object.entries(targets).map(([key, target]) => (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { key: key, target: target, classes: classes, style: highlightStyle, placement: placement, watchMotion: watchMotion, size: size })))));
 }
 exports.HybridHighlighter = HybridHighlighter;
 //# sourceMappingURL=hybrid-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hybrid-highlighter.js","sourceRoot":"","sources":["../../hybrid-highlighter/hybrid-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8F;AAC9F,4DAAoC;AACpC,+BAA0B;AAE1B,4DAA2D;AAC3D,gEAMgC;AAChC,kEAAiE;AAsCjE,kDAAkD;AAClD,SAAgB,iBAAiB,CAAC,EAmBT;QAnBS,EAChC,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,iBAAiB,GAAG,EAAE,EACtB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,IAAI,EACJ,aAAa,EAEb,OAAO,EACP,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,QAAQ,OAEe,EADpB,IAAI,cAlByB,iNAmBjC,CADQ;IAEP,MAAM,GAAG,GAAG,IAAA,iBAAS,GAAkB,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAkC,EAAE,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,YAAY,IAAA,SAAE,GAAE,EAAE,CAAC,CAAC,OAAO,CAAC;IACtD,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtD,8BAA8B;IAC9B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,SAAS,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,QAAQ,GAAG,IAAA,uCAAmB,EAClC,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,IAAI,EACJ;QACE,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACpD,UAAU;QACV,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,OAAO;QACtC,IAAI;QACJ,aAAa;KACd,CACF,CAAC;IAEF,IAAA,6CAAsB,EAAC;QACrB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,GAAG;QACb,UAAU;QACV,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,aAAa;QAC5C,IAAI;QACJ,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CAAC,iBACJ,yBAAyB,EAAE,OAAO,EAClC,+BAA+B,EAAE,YAAY,EAC7C,gCAAgC,EAAE,aAAa,IAC5C,KAAK,EACR,EACF,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,CAAC,CAC9C,CAAC;IAEF,OAAO,CACL,qDACE,GAAG,EAAE,GAAG,IACJ,IAAI,EACJ,QAAQ,IACZ,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,UAAU,CAAC;QAG3C,QAAQ;QAKR,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC9C,8BAAC,wCAAkB,IACjB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAxFD,8CAwFC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../hybrid-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,2DAAyD;AAAhD,uHAAA,iBAAiB,OAAA"}

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-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';
 export { ExcludeHighlighter, excludeHighlighterAtt, excludeHighlighterSelector, excludeHighlighterAttrName, } from './ignore-highlighter';

package/dist/index.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.excludeHighlighterAttrName = exports.excludeHighlighterSelector = exports.excludeHighlighterAtt = exports.ExcludeHighlighter = exports.ElementHighlighter = exports.MultiHighlighter = exports.HoverHighlighter = exports.ComponentHighlighter = void 0;
-var hybrid_highligher_1 = require("./hybrid-highligher");
-Object.defineProperty(exports, "ComponentHighlighter", { enumerable: true, get: function () { return hybrid_highligher_1.HybridHighlighter; } });
+exports.excludeHighlighterAttrName = exports.excludeHighlighterSelector = exports.excludeHighlighterAtt = exports.ExcludeHighlighter = exports.ElementHighlighter = exports.ChildrenHighlighter = exports.HoverHighlighter = exports.ComponentHighlighter = void 0;
+var hybrid_highlighter_1 = require("./hybrid-highlighter");
+Object.defineProperty(exports, "ComponentHighlighter", { enumerable: true, get: function () { return hybrid_highlighter_1.HybridHighlighter; } });
 var hover_highlighter_1 = require("./hover-highlighter");
 Object.defineProperty(exports, "HoverHighlighter", { enumerable: true, get: function () { return hover_highlighter_1.HoverHighlighter; } });
-var multi_highlighter_1 = require("./multi-highlighter");
-Object.defineProperty(exports, "MultiHighlighter", { enumerable: true, get: function () { return multi_highlighter_1.MultiHighlighter; } });
+var children_highlighter_1 = require("./children-highlighter");
+Object.defineProperty(exports, "ChildrenHighlighter", { enumerable: true, get: function () { return children_highlighter_1.ChildrenHighlighter; } });
 var element_highlighter_1 = require("./element-highlighter");
 Object.defineProperty(exports, "ElementHighlighter", { enumerable: true, get: function () { return element_highlighter_1.ElementHighlighter; } });
 var ignore_highlighter_1 = require("./ignore-highlighter");

package/dist/index.js.map

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

package/dist/label/component-strip.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+export declare type ComponentStripSize = 's' | 'm' | 'l';
+interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
+    component: ComponentMetaHolder;
+    size?: ComponentStripSize;
+}
+export declare const ComponentStrip: React.ForwardRefExoticComponent<ComponentStripProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/label/component-strip.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentStrip = void 0;
+const react_1 = __importStar(require("react"));
+const base_ui_routing_native_link_1 = require("@teambit/base-ui.routing.native-link");
+const component_id_1 = require("@teambit/component-id");
+const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
+const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
+const component_strip_module_scss_1 = __importDefault(require("./component-strip.module.scss"));
+const links_1 = require("./links");
+exports.ComponentStrip = (0, react_1.forwardRef)(function ComponentStrip({ component, size = 'm', children }, ref) {
+    const { id, homepage, exported } = component[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField];
+    const parsedId = (0, react_1.useMemo)(() => component_id_1.ComponentID.tryFromString(id), [id]);
+    const componentLink = homepage || (0, links_1.calcComponentLink)(parsedId, exported);
+    return (react_1.default.createElement("div", { className: component_strip_module_scss_1.default.componentStrip, ref: ref, "data-size": size },
+        !parsedId && react_1.default.createElement(LabelBlock, { link: homepage }, id),
+        parsedId && react_1.default.createElement(LabelBlock, { link: component_modules_component_url_1.ScopeUrl.toUrl(parsedId.scope) }, parsedId.scope),
+        parsedId && (react_1.default.createElement(LabelBlock, { link: componentLink },
+            parsedId.fullName,
+            parsedId.version && parsedId.version !== 'latest' && `@${parsedId.version}`)),
+        children));
+});
+function LabelBlock({ link, children }) {
+    const Comp = link ? base_ui_routing_native_link_1.NativeLink : 'span';
+    return (react_1.default.createElement(Comp, { href: link, external: !!link }, children));
+}
+//# sourceMappingURL=component-strip.js.map

package/dist/label/component-strip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-strip.js","sourceRoot":"","sources":["../../label/component-strip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4E;AAC5E,sFAAkE;AAClE,wDAAoD;AACpD,8FAAoE;AACpE,oJAG6E;AAC7E,gGAAmD;AACnD,mCAA4C;AAQ/B,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAC,SAAS,cAAc,CAC9D,EAAE,SAAS,EAAE,IAAI,GAAG,GAAG,EAAE,QAAQ,EAAuB,EACxD,GAAiC;IAEjC,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC,+EAAkB,CAAC,CAAC;IAEjE,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,0BAAW,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,QAAQ,IAAI,IAAA,yBAAiB,EAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAExE,OAAO,CACL,uCAAK,SAAS,EAAE,qCAAM,CAAC,cAAc,EAAE,GAAG,EAAE,GAAG,eAAa,IAAI;QAC7D,CAAC,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,QAAQ,IAAG,EAAE,CAAc;QAC1D,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,0CAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAG,QAAQ,CAAC,KAAK,CAAc;QAC3F,QAAQ,IAAI,CACX,8BAAC,UAAU,IAAC,IAAI,EAAE,aAAa;YAC5B,QAAQ,CAAC,QAAQ;YACjB,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,QAAQ,CAAC,OAAO,EAAE,CACjE,CACd;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAA0C;IAC5E,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,wCAAU,CAAC,CAAC,CAAC,MAAM,CAAC;IACxC,OAAO,CACL,8BAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,IAC/B,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/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/dist/label/index.d.ts

@@ -1,2 +1,4 @@
-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/dist/label/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = exports.LabelContainer = void 0;
+exports.LabelContainer = exports.Label = void 0;
 var label_1 = require("./label");
-Object.defineProperty(exports, "LabelContainer", { enumerable: true, get: function () { return label_1.LabelContainer; } });
 Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return label_1.Label; } });
+var label_container_1 = require("./label-container");
+Object.defineProperty(exports, "LabelContainer", { enumerable: true, get: function () { return label_container_1.LabelContainer; } });
 //# sourceMappingURL=index.js.map

package/dist/label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../label/index.ts"],"names":[],"mappings":";;;AAAA,iCAAgD;AAAvC,uGAAA,cAAc,OAAA;AAAE,8FAAA,KAAK,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../label/index.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AAGd,qDAAmD;AAA1C,iHAAA,cAAc,OAAA"}

package/dist/label/label-container.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Placement } from '@popperjs/core';
+import '@popperjs/core';
+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 };
+export declare function LabelContainer({ targetRef, offset, placement, flip, watchMotion, className, ...rest }: LabelContainerProps): JSX.Element;

package/dist/label/label-container.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelContainer = void 0;
+const react_1 = __importStar(require("react"));
+const react_popper_1 = require("react-popper");
+require("@popperjs/core");
+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;
+//# sourceMappingURL=label-container.js.map

package/dist/label/label-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-container.js","sourceRoot":"","sources":["../../label/label-container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,+CAAyC;AAEzC,0BAAwB;AAExB,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"}

package/dist/label/label.d.ts

@@ -1,21 +1,9 @@
 import React from 'react';
-import type { CardProps } from '@teambit/base-ui.surfaces.card';
-import type { Placement } from '@popperjs/core';
-import '@popperjs/core';
-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;
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { ComponentStripSize } from './component-strip';
+export declare type LabelSize = ComponentStripSize;
+export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    components: ComponentMetaHolder[];
+    size?: LabelSize;
 }
-export type { Placement };
-export declare function LabelContainer({ targetRef, offset, placement, flip, watchMotion, className, ...rest }: LabelContainerProps): JSX.Element;
-export interface LabelProps extends CardProps {
-    componentId: string;
-    link?: string;
-    scopeLink?: string;
-    local?: boolean;
-}
-export declare function Label({ componentId, link, scopeLink, local, ...rest }: LabelProps): JSX.Element;
+export declare function Label({ components, size, ...props }: LabelProps): JSX.Element;

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