@teambit/react.ui.component-highlighter 0.0.0-3456ec42c20f5ecbc6cb251096040bd1c79ecc95

package/dist/ignore-highlighter.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+/** name of ignore attribute */
+export declare const excludeHighlighterAttrName = "data-ignore-component-highlight";
+/** selector for elements with the ignore attribute */
+export declare const excludeHighlighterSelector = "[data-ignore-component-highlight]";
+/** highlighter will exclude elements with this attribute */
+export declare const excludeHighlighterAtt: {
+    "data-ignore-component-highlight": boolean;
+};
+/** children of this element will be excluded by the automatic highlighter */
+export declare function ExcludeHighlighter(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** name of skip attribute */
+export declare const skipHighlighterAttrName = "data-skip-component-highlight";
+/** highlighter will skip (ignore) elements with these attributes */
+export declare const skipHighlighterAttr: {
+    "data-skip-component-highlight": boolean;
+};
+/** selector for elements with the skip attribute */
+export declare const skipHighlighterSelector = "[data-skip-component-highlight]";

package/dist/ignore-highlighter.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skipHighlighterSelector = exports.skipHighlighterAttr = exports.skipHighlighterAttrName = exports.excludeHighlighterAtt = exports.excludeHighlighterSelector = exports.excludeHighlighterAttrName = void 0;
+exports.ExcludeHighlighter = ExcludeHighlighter;
+const react_1 = __importDefault(require("react"));
+/** name of ignore attribute */
+exports.excludeHighlighterAttrName = 'data-ignore-component-highlight';
+/** selector for elements with the ignore attribute */
+exports.excludeHighlighterSelector = `[${exports.excludeHighlighterAttrName}]`;
+/** highlighter will exclude elements with this attribute */
+exports.excludeHighlighterAtt = { [exports.excludeHighlighterAttrName]: true };
+/** children of this element will be excluded by the automatic highlighter */
+function ExcludeHighlighter(props) {
+    return react_1.default.createElement("div", Object.assign({}, props, exports.excludeHighlighterAtt));
+}
+/** name of skip attribute */
+exports.skipHighlighterAttrName = 'data-skip-component-highlight';
+/** highlighter will skip (ignore) elements with these attributes */
+exports.skipHighlighterAttr = { [exports.skipHighlighterAttrName]: true };
+/** selector for elements with the skip attribute */
+exports.skipHighlighterSelector = `[${exports.skipHighlighterAttrName}]`;
+//# sourceMappingURL=ignore-highlighter.js.map

package/dist/ignore-highlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ignore-highlighter.js","sourceRoot":"","sources":["../ignore-highlighter.tsx"],"names":[],"mappings":";;;;;;AAYA,gDAEC;AAdD,kDAA0B;AAE1B,+BAA+B;AAClB,QAAA,0BAA0B,GAAG,iCAAiC,CAAC;AAE5E,sDAAsD;AACzC,QAAA,0BAA0B,GAAG,IAAI,kCAA0B,GAAG,CAAC;AAE5E,4DAA4D;AAC/C,QAAA,qBAAqB,GAAG,EAAE,CAAC,kCAA0B,CAAC,EAAE,IAAI,EAAE,CAAC;AAE5E,6EAA6E;AAC7E,SAAgB,kBAAkB,CAAC,KAA2C;IAC5E,OAAO,uDAAS,KAAK,EAAM,6BAAqB,EAAI,CAAC;AACvD,CAAC;AAED,6BAA6B;AAChB,QAAA,uBAAuB,GAAG,+BAA+B,CAAC;AACvE,oEAAoE;AACvD,QAAA,mBAAmB,GAAG,EAAE,CAAC,+BAAuB,CAAC,EAAE,IAAI,EAAE,CAAC;AACvE,oDAAoD;AACvC,QAAA,uBAAuB,GAAG,IAAI,+BAAuB,GAAG,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+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 { ChildrenHighlighter } from './children-highlighter';
+export type { ChildrenHighlighterProps } from './children-highlighter';
+export { ElementHighlighter } from './element-highlighter';
+export type { ElementHighlighterProps, Placement, HighlightClasses } from './element-highlighter';
+export { ExcludeHighlighter, excludeHighlighterAtt, excludeHighlighterAttrName, skipHighlighterAttr, skipHighlighterAttrName, } from './ignore-highlighter';
+export type { MatchRule } from './rule-matcher';

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skipHighlighterAttrName = exports.skipHighlighterAttr = exports.excludeHighlighterAttrName = 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 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");
+Object.defineProperty(exports, "ExcludeHighlighter", { enumerable: true, get: function () { return ignore_highlighter_1.ExcludeHighlighter; } });
+Object.defineProperty(exports, "excludeHighlighterAtt", { enumerable: true, get: function () { return ignore_highlighter_1.excludeHighlighterAtt; } });
+Object.defineProperty(exports, "excludeHighlighterAttrName", { enumerable: true, get: function () { return ignore_highlighter_1.excludeHighlighterAttrName; } });
+Object.defineProperty(exports, "skipHighlighterAttr", { enumerable: true, get: function () { return ignore_highlighter_1.skipHighlighterAttr; } });
+Object.defineProperty(exports, "skipHighlighterAttrName", { enumerable: true, get: function () { return ignore_highlighter_1.skipHighlighterAttrName; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"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,2DAM8B;AAL5B,wHAAA,kBAAkB,OAAA;AAClB,2HAAA,qBAAqB,OAAA;AACrB,gIAAA,0BAA0B,OAAA;AAC1B,yHAAA,mBAAmB,OAAA;AACnB,6HAAA,uBAAuB,OAAA"}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ComponentStripPreview: () => React.JSX.Element;

package/dist/label/component-strip.compositions.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.ComponentStripPreview = void 0;
+const react_1 = __importDefault(require("react"));
+const component_strip_1 = require("./component-strip");
+const mock_component_1 = require("../mock-component");
+const ComponentStripPreview = () => {
+    return (react_1.default.createElement("div", { style: { fontFamily: 'sans-serif', padding: 8 } },
+        react_1.default.createElement(component_strip_1.ComponentStrip, { component: mock_component_1.MockSnap }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(component_strip_1.ComponentStrip, { component: mock_component_1.MockButton })));
+};
+exports.ComponentStripPreview = ComponentStripPreview;
+//# sourceMappingURL=component-strip.compositions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component-strip.compositions.js","sourceRoot":"","sources":["../../label/component-strip.compositions.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAAmD;AACnD,sDAAyD;AAElD,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE;QAClD,8BAAC,gCAAc,IAAC,SAAS,EAAE,yBAAQ,GAAI;QACvC,yCAAM;QACN,8BAAC,gCAAc,IAAC,SAAS,EAAE,2BAAU,GAAI,CACrC,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,qBAAqB,yBAQhC"}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
+    component: ComponentMetaHolder | string;
+}
+export declare const ComponentStrip: React.ForwardRefExoticComponent<ComponentStripProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/label/component-strip.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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, children }, ref) {
+    const { id, homepage, exported } = extractMetadata(component);
+    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 },
+        !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, className: component_strip_module_scss_1.default.nameBlock },
+            react_1.default.createElement("span", null, parsedId.fullName),
+            parsedId.version && parsedId.version !== 'latest' && (react_1.default.createElement("span", { className: component_strip_module_scss_1.default.version },
+                "@",
+                parsedId.version)))),
+        children));
+});
+function LabelBlock({ link, children, className }) {
+    const Comp = link ? base_ui_routing_native_link_1.NativeLink : 'span';
+    return (react_1.default.createElement(Comp, { href: link, external: !!link, className: className }, children));
+}
+function extractMetadata(metadata) {
+    if (typeof metadata === 'string') {
+        return { id: metadata, exported: true };
+    }
+    return metadata[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField];
+}
+//# 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,oJAI6E;AAC7E,gGAAmD;AACnD,mCAA4C;AAK/B,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAC,SAAS,cAAc,CAC9D,EAAE,SAAS,EAAE,QAAQ,EAAuB,EAC5C,GAAiC;IAEjC,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAE9D,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;QAC5C,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,EAAE,SAAS,EAAE,qCAAM,CAAC,SAAS;YAC1D,4CAAO,QAAQ,CAAC,QAAQ,CAAQ;YAC/B,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,QAAQ,IAAI,CACpD,wCAAM,SAAS,EAAE,qCAAM,CAAC,OAAO;;gBAAI,QAAQ,CAAC,OAAO,CAAQ,CAC5D,CACU,CACd;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAA8D;IAC3G,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,EAAE,SAAS,EAAE,SAAS,IACrD,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,QAAsC;IAC7D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC1C,CAAC;IAED,OAAO,QAAQ,CAAC,+EAAkB,CAAC,CAAC;AACtC,CAAC"}

package/dist/label/component-strip.module.scss

@@ -0,0 +1,68 @@
+$borderRadius: 0.5em;
+$gap: 0.125em;
+
+.componentStrip {
+  display: flex;
+  width: fit-content; // for correct shadow size
+
+  border-radius: $borderRadius;
+  box-shadow: var(--bit-highlighter-shadow);
+  white-space: nowrap;
+
+  > * {
+    padding: 0 0.5em;
+    line-height: 1.5; //use line height to get rounder values than 0.25em padding
+
+    transition: filter 300ms, background-color 300ms;
+    transform: translateZ(0); //fix blurriness in Safari
+
+    background: var(--bit-highlighter-color, #eebcc9);
+
+    margin-right: $gap;
+
+    &: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;
+    }
+
+    &:last-child {
+      border-top-right-radius: $borderRadius;
+      border-bottom-right-radius: $borderRadius;
+
+      margin-right: unset;
+    }
+  }
+}
+
+.nameBlock {
+  display: flex;
+
+  .version {
+    // leave room for 9 digits + 3 "."
+    max-width: 13ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    
+    transition: max-width 480ms;
+
+    &:hover {
+      max-width: 61ch;
+    }
+  }
+}

package/dist/label/index.d.ts

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

package/dist/label/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelContainer = exports.Label = void 0;
+var label_1 = require("./label");
+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

@@ -0,0 +1 @@
+{"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, { RefObject } from 'react';
+import type { Placement } from '@floating-ui/react-dom';
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    targetRef: RefObject<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, style, ...rest }: LabelContainerProps): React.JSX.Element;

package/dist/label/label-container.js

@@ -0,0 +1,77 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsomorphicLayoutEffect = void 0;
+exports.LabelContainer = LabelContainer;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const lodash_compact_1 = __importDefault(require("lodash.compact"));
+const react_dom_1 = require("@floating-ui/react-dom");
+const label_module_scss_1 = __importDefault(require("./label.module.scss"));
+const HAS_RESIZE_OBSERVER = typeof window !== 'undefined' && !!window.ResizeObserver;
+exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;
+function LabelContainer(_a) {
+    var _b;
+    var { targetRef, offset, placement, flip = true, watchMotion, className, style } = _a, rest = __rest(_a, ["targetRef", "offset", "placement", "flip", "watchMotion", "className", "style"]);
+    const { x, y, strategy, floating, reference, refs, update, middlewareData } = (0, react_dom_1.useFloating)({
+        placement,
+        middleware: (0, lodash_compact_1.default)([
+            offset && (0, react_dom_1.offset)({ mainAxis: offset[0], crossAxis: offset[1] }),
+            flip && (0, react_dom_1.flip)(),
+            // enabling 'shift' for 'crossAxis' will make floating-ui push the label _inside_, when it has nowhere to go
+            (0, react_dom_1.shift)({ rootBoundary: 'document', mainAxis: true, crossAxis: true }),
+            (0, react_dom_1.hide)({ strategy: 'referenceHidden' }),
+        ]),
+    });
+    (0, exports.useIsomorphicLayoutEffect)(() => {
+        reference(targetRef.current);
+    }, [targetRef.current, reference]);
+    // automatically update on scroll, resize, etc.
+    // `watchMotion` will trigger continuous updates using animation frame
+    (0, react_1.useEffect)(() => {
+        if (!refs.reference.current || !refs.floating.current || !HAS_RESIZE_OBSERVER)
+            return () => { };
+        return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update, { animationFrame: !!watchMotion });
+    }, [refs.reference.current, refs.floating.current, update, watchMotion]);
+    const isReady = !((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: floating, className: (0, classnames_1.default)(className, !isReady && label_module_scss_1.default.hidden), 
+        // starting at pos [0,0] will ensure the label doesn't increase the document size.
+        style: Object.assign(Object.assign({}, style), { position: strategy, top: y !== null && y !== void 0 ? y : 0, left: x !== null && x !== void 0 ? x : 0 }) })));
+}
+//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,wCA4CC;AAzED,+CAAqE;AACrE,4DAAoC;AACpC,oEAAqC;AACrC,sDAOgC;AAEhC,4EAAyC;AAEzC,MAAM,mBAAmB,GAAG,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;AACxE,QAAA,yBAAyB,GACpC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,uBAAe,CAAC,CAAC,CAAC,iBAAS,CAAA;AAa7D,SAAgB,cAAc,CAAC,EAST;;QATS,EAC7B,SAAS,EACT,MAAM,EACN,SAAS,EACT,IAAI,GAAG,IAAI,EACX,WAAW,EACX,SAAS,EACT,KAAK,OAEe,EADjB,IAAI,cARsB,iFAS9B,CADQ;IAEP,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,uBAAW,EAAC;QACxF,SAAS;QACT,UAAU,EAAE,IAAA,wBAAO,EAAC;YAClB,MAAM,IAAI,IAAA,kBAAgB,EAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACzE,IAAI,IAAI,IAAA,gBAAc,GAAE;YACxB,4GAA4G;YAC5G,IAAA,iBAAK,EAAC,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;YACpE,IAAA,gBAAI,EAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC;SACtC,CAAC;KACH,CAAC,CAAC;IAEH,IAAA,iCAAyB,EAAC,GAAG,EAAE;QAC7B,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,+CAA+C;IAC/C,sEAAsE;IACtE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,mBAAmB;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAE/F,OAAO,IAAA,sBAAU,EAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;IAC9G,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,OAAO,GAAG,CAAC,CAAA,MAAA,cAAc,CAAC,IAAI,0CAAE,eAAe,CAAA,CAAC;IAEtD,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,CAAC,OAAO,IAAI,2BAAM,CAAC,MAAM,CAAC;QAC3D,kFAAkF;QAClF,KAAK,kCAAO,KAAK,KAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC,EAAE,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC,OAChE,CACH,CAAC;AACJ,CAAC"}

package/dist/label/label.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    components: (ComponentMetaHolder | string)[];
+}
+export declare function Label({ components, ...props }: LabelProps): React.JSX.Element;

package/dist/label/label.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = Label;
+const react_1 = __importStar(require("react"));
+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 { components } = _a, props = __rest(_a, ["components"]);
+    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" },
+        react_1.default.createElement(component_strip_1.ComponentStrip, Object.assign({}, props, { component: last }), 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) })))));
+}
+//# sourceMappingURL=label.js.map

package/dist/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../label/label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,sBAwBC;AApCD,+CAAmD;AACnD,4DAAoC;AAGpC,4EAAyC;AACzC,uDAAmD;AACnD,yDAA2D;AAM3D,SAAgB,KAAK,CAAC,EAAoC;QAApC,EAAE,UAAU,OAAwB,EAAnB,KAAK,cAAtB,cAAwB,CAAF;IAC1C,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;QACxF,8BAAC,gCAAc,oBAAK,KAAK,IAAE,SAAS,EAAE,IAAI,KACvC,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"}

package/dist/label/label.module.scss

@@ -0,0 +1,32 @@
+.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);
+  }
+}
+
+.hidden {
+  // label size is needed for position calculations,
+  // so it can't be removed by `display: none`
+  visibility: hidden;
+  pointer-events: none;
+  user-select: none;
+}

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,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcComponentLink = calcComponentLink;
+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);
+}
+//# 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":";;;;;AAIA,8CAIC;AARD,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"}

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

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

package/dist/label/other-components.js

@@ -0,0 +1,34 @@
+"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 = OtherComponentsPopper;
+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, placement = 'bottom', interactive = true } = _a, tippyProps = __rest(_a, ["components", "children", "start", "end", "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 })))));
+    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));
+}
+//# 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":";;;;;;;;;;;;;;;;AAcA,sDAoCC;AAlDD,kDAA0B;AAC1B,uEAA4D;AAG5D,uDAAmD;AACnD,4EAAyC;AAQzC,8FAA8F;AAC9F,SAAgB,qBAAqB,CAAC,EAQf;QARe,EACpC,UAAU,EACV,QAAQ,EACR,KAAK,EACL,GAAG,GAAG,CAAC,CAAC,EACR,SAAS,GAAG,QAAQ,EACpB,WAAW,GAAG,IAAI,OAEG,EADlB,UAAU,cAPuB,sEAQrC,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,GAAI,CAC9C,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"}

package/dist/mock-component.d.ts

@@ -0,0 +1,14 @@
+import React, { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import { ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+export declare function MockTarget({ children, ...rest }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace MockTarget {
+    var __bit_component: ComponentMeta;
+}
+export declare function MockButton({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+export declare namespace MockButton {
+    var __bit_component: ComponentMeta;
+}
+export declare function MockSnap({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+export declare namespace MockSnap {
+    var __bit_component: ComponentMeta;
+}

package/dist/mock-component.js

@@ -0,0 +1,43 @@
+"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.MockTarget = MockTarget;
+exports.MockButton = MockButton;
+exports.MockSnap = MockSnap;
+const react_1 = __importDefault(require("react"));
+const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
+function MockTarget(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return react_1.default.createElement("div", Object.assign({}, rest), children);
+}
+MockTarget[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] = {
+    id: 'teambit.design/ui/mock-target@1.6.2',
+};
+function MockButton(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return react_1.default.createElement("button", Object.assign({}, rest), children);
+}
+MockButton[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] = {
+    id: 'teambit.design/ui/icon-button@1.6.2',
+};
+function MockSnap(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return react_1.default.createElement("button", Object.assign({}, rest), children);
+}
+MockSnap[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] = {
+    id: 'teambit.design/ui/icon-button@a21594d5cc63fd24d2b4763fa7d817b131f0edbb',
+};
+//# sourceMappingURL=mock-component.js.map

package/dist/mock-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mock-component.js","sourceRoot":"","sources":["../mock-component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAGA,gCAEC;AAKD,gCAEC;AAKD,4BAEC;AAnBD,kDAAoE;AACpE,oJAAwH;AAExH,SAAgB,UAAU,CAAC,EAAqD;QAArD,EAAE,QAAQ,OAA2C,EAAtC,IAAI,cAAnB,YAAqB,CAAF;IAC5C,OAAO,uDAAS,IAAI,GAAG,QAAQ,CAAO,CAAC;AACzC,CAAC;AACD,UAAU,CAAC,+EAAkB,CAAC,GAAG;IAC/B,EAAE,EAAE,qCAAqC;CACzB,CAAC;AAEnB,SAAgB,UAAU,CAAC,EAA8D;QAA9D,EAAE,QAAQ,OAAoD,EAA/C,IAAI,cAAnB,YAAqB,CAAF;IAC5C,OAAO,0DAAY,IAAI,GAAG,QAAQ,CAAU,CAAC;AAC/C,CAAC;AACD,UAAU,CAAC,+EAAkB,CAAC,GAAG;IAC/B,EAAE,EAAE,qCAAqC;CACzB,CAAC;AAEnB,SAAgB,QAAQ,CAAC,EAA8D;QAA9D,EAAE,QAAQ,OAAoD,EAA/C,IAAI,cAAnB,YAAqB,CAAF;IAC1C,OAAO,0DAAY,IAAI,GAAG,QAAQ,CAAU,CAAC;AAC/C,CAAC;AACD,QAAQ,CAAC,+EAAkB,CAAC,GAAG;IAC7B,EAAE,EAAE,wEAAwE;CAC5D,CAAC"}