@teambit/react.ui.component-highlighter 0.0.447 → 0.0.451

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

@@ -0,0 +1 @@
+{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8D;AAC9D,+DAA4E;AAE5E,MAAM,YAAY,GAAG,+BAA+B,CAAC;AAE9C,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAA0D,EAAE,EAAE;IACjH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAA0B,SAAS,CAAC,CAAC;IACvF,MAAM,SAAS,GAAG,IAAA,iBAAS,GAAkB,CAAC;IAE9C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QAC9B,gBAAgB,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IAExB,MAAM,MAAM,GAAgC,aAAa,IAAI;QAC3D,OAAO,EAAE,aAAa;QACtB,EAAE,EAAE,YAAY;QAChB,IAAI,EAAE,+CAA+C;QACrD,SAAS,EAAE,gCAAgC;KAC5C,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,sBAAsB,EAAE;QACnE,uCAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,uBAEpC;QACL,MAAM,IAAI,8BAAC,wCAAkB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,GAAG,CAC9E,CACP,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,kBAAkB,sBAwB7B;AAEK,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,8BAAC,0BAAkB,IACjB,KAAK,EAAE;YACL,yBAAyB,EAAE,SAAS;YACpC,+BAA+B,EAAE,SAAS;YAC1C,gCAAgC,EAAE,SAAS;SAC5C,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,UAAU,cAUrB;AAEK,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAI,CAAC;AAC7D,CAAC,CAAC;AAFW,QAAA,KAAK,SAEhB"}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Placement } from '../label';
+export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** target element to highlight */
+    target: HighlightTarget;
+    /** default location of the label */
+    placement?: Placement;
+    /** customize styles */
+    classes?: HighlightClasses;
+}
+export { Placement };
+export declare type HighlightTarget = {
+    id?: string;
+    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;
+};
+export declare type HighlightClasses = {
+    container?: string;
+    frame?: string;
+    label?: string;
+};
+export declare function ElementHighlighter({ target, placement, className, classes, ...props }: ElementHighlighterProps): JSX.Element;

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

@@ -0,0 +1,32 @@
+"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.ElementHighlighter = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const frame_1 = require("../frame");
+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', className, classes } = _a, props = __rest(_a, ["target", "placement", "className", "classes"]);
+    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: classes === null || classes === void 0 ? void 0 : classes.frame }),
+        target.id && (react_1.default.createElement(label_1.LabelContainer, { className: element_highlighter_module_scss_1.default.label, targetRef: target.element, placement: placement },
+            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 })))));
+}
+exports.ElementHighlighter = ElementHighlighter;
+//# sourceMappingURL=element-highlighter.js.map

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

@@ -0,0 +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;AA8BvD,SAAgB,kBAAkB,CAAC,EAMT;QANS,EACjC,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,OAAO,OAEiB,EADrB,KAAK,cALyB,+CAMlC,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,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GAAI;QAE9D,MAAM,CAAC,EAAE,IAAI,CACZ,8BAAC,sBAAc,IAAC,SAAS,EAAE,yCAAM,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS;YACtF,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;AAxBD,gDAwBC"}

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

@@ -0,0 +1,8 @@
+.container {
+  font-size: 12px;
+}
+
+.label {
+  font-family: sans-serif;
+  padding: 8px;
+}

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

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

package/dist/element-highlighter/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementHighlighter = void 0;
+var element_highlighter_1 = require("./element-highlighter");
+Object.defineProperty(exports, "ElementHighlighter", { enumerable: true, get: function () { return element_highlighter_1.ElementHighlighter; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../element-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA"}

package/dist/ignore-highlighter.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const excludeHighlighterAttrName = "data-ignore-component-highlight";
+/** select elements matching the exclusion pattern */
+export declare const excludeHighlighterSelector: string;
+/** elements with these attributes will be ignored by the automatic highlighter */
+export declare const excludeHighlighterAtt: {
+    "data-ignore-component-highlight": boolean;
+};
+/** elements under this element will be ignored by the automatic highlighter */
+export declare function ExcludeHighlighter(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;

package/dist/ignore-highlighter.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExcludeHighlighter = exports.excludeHighlighterAtt = exports.excludeHighlighterSelector = exports.excludeHighlighterAttrName = void 0;
+const react_1 = __importDefault(require("react"));
+exports.excludeHighlighterAttrName = 'data-ignore-component-highlight';
+/** select elements matching the exclusion pattern */
+exports.excludeHighlighterSelector = `[${exports.excludeHighlighterAttrName}]`;
+/** elements with these attributes will be ignored by the automatic highlighter */
+exports.excludeHighlighterAtt = { [exports.excludeHighlighterAttrName]: true };
+/** elements under this element will be ignored by the automatic highlighter */
+function ExcludeHighlighter(props) {
+    return react_1.default.createElement("div", Object.assign({}, props, exports.excludeHighlighterAtt));
+}
+exports.ExcludeHighlighter = ExcludeHighlighter;
+//# 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":";;;;;;AAAA,kDAA0B;AAEb,QAAA,0BAA0B,GAAG,iCAAiC,CAAC;AAE5E,qDAAqD;AACxC,QAAA,0BAA0B,GAAG,IAAI,kCAA0B,GAAG,CAAC;AAE5E,kFAAkF;AACrE,QAAA,qBAAqB,GAAG,EAAE,CAAC,kCAA0B,CAAC,EAAE,IAAI,EAAE,CAAC;AAE5E,+EAA+E;AAC/E,SAAgB,kBAAkB,CAAC,KAA2C;IAC5E,OAAO,uDAAS,KAAK,EAAM,6BAAqB,EAAI,CAAC;AACvD,CAAC;AAFD,gDAEC"}

package/dist/index.d.ts

@@ -1,2 +1,5 @@
-export { ComponentHighlighter } from './component-highlighter';
-export type { ComponentHighlightProps } from './component-highlighter';
+export { HoverHighlighter as ComponentHighlighter } from './component-highlighter';
+export type { HoverHighlighterProps as ComponentHighlightProps } from './component-highlighter';
+export { ElementHighlighter } from './element-highlighter';
+export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
+export { ExcludeHighlighter, excludeHighlighterAtt } from './ignore-highlighter';

package/dist/index.js

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentHighlighter = void 0;
+exports.excludeHighlighterAtt = exports.ExcludeHighlighter = exports.ElementHighlighter = exports.ComponentHighlighter = void 0;
 var component_highlighter_1 = require("./component-highlighter");
-Object.defineProperty(exports, "ComponentHighlighter", { enumerable: true, get: function () { return component_highlighter_1.ComponentHighlighter; } });
+Object.defineProperty(exports, "ComponentHighlighter", { enumerable: true, get: function () { return component_highlighter_1.HoverHighlighter; } });
+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; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iEAA+D;AAAtD,6HAAA,oBAAoB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iEAAmF;AAA1E,6HAAA,gBAAgB,OAAwB;AAGjD,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAG3B,2DAAiF;AAAxE,wHAAA,kBAAkB,OAAA;AAAE,2HAAA,qBAAqB,OAAA"}

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

@@ -24,9 +24,9 @@ const component_bubble_1 = require("./component-bubble");
 const scope_bubble_1 = require("./scope-bubble");
 function ComponentLabel(_a) {
     var { componentId, className, link, scopeLink, local } = _a, rest = __rest(_a, ["componentId", "className", "link", "scopeLink", "local"]);
-    return (react_1.default.createElement(base_ui_surfaces_card_1.Card, Object.assign({}, rest, { className: (0, classnames_1.default)(className, duo_component_bubble_module_scss_1.default.duoComponentBubble), "data-ignore-component-highlight": true }),
-        react_1.default.createElement(scope_bubble_1.ScopeBubble, { href: scopeLink, componentId: componentId, className: bubble_1.bubble, "data-ignore-component-highlight": true }),
-        react_1.default.createElement(component_bubble_1.ComponentBubble, { href: link, componentId: componentId, className: bubble_1.bubble, local: local, "data-ignore-component-highlight": true })));
+    return (react_1.default.createElement(base_ui_surfaces_card_1.Card, Object.assign({}, rest, { className: (0, classnames_1.default)(className, duo_component_bubble_module_scss_1.default.duoComponentBubble) }),
+        react_1.default.createElement(scope_bubble_1.ScopeBubble, { href: scopeLink, componentId: componentId, className: bubble_1.bubble }),
+        react_1.default.createElement(component_bubble_1.ComponentBubble, { href: link, componentId: componentId, className: bubble_1.bubble, local: local })));
 }
 exports.ComponentLabel = ComponentLabel;
 //# sourceMappingURL=component-label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component-label.js","sourceRoot":"","sources":["../../../label/component-label/component-label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AACpC,0EAAiE;AAGjE,yCAAsC;AACtC,0GAAwD;AAExD,yDAAqD;AACrD,iDAA6C;AAS7C,SAAgB,cAAc,CAAC,EAAgF;QAAhF,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,OAAgC,EAA3B,IAAI,cAAzD,0DAA2D,CAAF;IACtF,OAAO,CACL,8BAAC,4BAAI,oBAAK,IAAI,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,0CAAM,CAAC,kBAAkB,CAAC;QACzE,8BAAC,0BAAW,IAAC,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,eAAM,4CAAoC;QAC7G,8BAAC,kCAAe,IACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,eAAM,EACjB,KAAK,EAAE,KAAK,4CAEZ,CACG,CACR,CAAC;AACJ,CAAC;AAbD,wCAaC"}
+{"version":3,"file":"component-label.js","sourceRoot":"","sources":["../../../label/component-label/component-label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AACpC,0EAAiE;AAGjE,yCAAsC;AACtC,0GAAwD;AAExD,yDAAqD;AACrD,iDAA6C;AAS7C,SAAgB,cAAc,CAAC,EAAgF;QAAhF,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,OAAgC,EAA3B,IAAI,cAAzD,0DAA2D,CAAF;IACtF,OAAO,CACL,8BAAC,4BAAI,oBAAK,IAAI,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,0CAAM,CAAC,kBAAkB,CAAC;QACzE,8BAAC,0BAAW,IAAC,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,eAAM,GAAI;QAC7E,8BAAC,kCAAe,IACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,eAAM,EACjB,KAAK,EAAE,KAAK,GACZ,CACG,CACR,CAAC;AACJ,CAAC;AAZD,wCAYC"}

package/dist/label/default-label/default-label.js

@@ -18,14 +18,13 @@ exports.DefaultLabel = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const base_ui_surfaces_card_1 = require("@teambit/base-ui.surfaces.card");
-const base_ui_css_components_pill_1 = require("@teambit/base-ui.css-components.pill");
 const base_ui_routing_native_link_1 = require("@teambit/base-ui.routing.native-link");
 const bubble_1 = require("../../bubble");
 const default_label_module_scss_1 = __importDefault(require("./default-label.module.scss"));
 function DefaultLabel(_a) {
     var { className, href, children } = _a, rest = __rest(_a, ["className", "href", "children"]);
     return (react_1.default.createElement(base_ui_surfaces_card_1.Card, Object.assign({}, rest, { className: (0, classnames_1.default)(default_label_module_scss_1.default.container, className) }),
-        react_1.default.createElement(base_ui_routing_native_link_1.NativeLink, { external: true, href: href, className: (0, classnames_1.default)(base_ui_css_components_pill_1.pillClass, bubble_1.bubble) }, children)));
+        react_1.default.createElement(base_ui_routing_native_link_1.NativeLink, { external: true, href: href, className: bubble_1.bubble }, children)));
 }
 exports.DefaultLabel = DefaultLabel;
 //# sourceMappingURL=default-label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"default-label.js","sourceRoot":"","sources":["../../../label/default-label/default-label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,0EAAiE;AACjE,sFAAiE;AACjE,sFAAkE;AAElE,yCAAsC;AACtC,4FAAiD;AAMjD,SAAgB,YAAY,CAAC,EAAyD;QAAzD,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,OAA8B,EAAzB,IAAI,cAApC,iCAAsC,CAAF;IAC/D,OAAO,CACL,8BAAC,4BAAI,oBAAK,IAAI,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,mCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAChE,8BAAC,wCAAU,IAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,uCAAS,EAAE,eAAM,CAAC,IACtE,QAAQ,CACE,CACR,CACR,CAAC;AACJ,CAAC;AARD,oCAQC"}
+{"version":3,"file":"default-label.js","sourceRoot":"","sources":["../../../label/default-label/default-label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,0EAAiE;AACjE,sFAAkE;AAElE,yCAAsC;AACtC,4FAAiD;AAMjD,SAAgB,YAAY,CAAC,EAAyD;QAAzD,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,OAA8B,EAAzB,IAAI,cAApC,iCAAsC,CAAF;IAC/D,OAAO,CACL,8BAAC,4BAAI,oBAAK,IAAI,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,mCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAChE,8BAAC,wCAAU,IAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,eAAM,IAC/C,QAAQ,CACE,CACR,CACR,CAAC;AACJ,CAAC;AARD,oCAQC"}

package/dist/label/default-label/default-label.module.scss

@@ -5,4 +5,8 @@
   padding: 0;
   border: none;
   background: none;
+
+  > * {
+    border-radius: 4px;
+  }
 }

package/dist/label/index.d.ts

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

package/dist/label/label.d.ts

@@ -8,6 +8,7 @@ export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement
     placement?: Placement;
     flip?: boolean;
 }
+export type { Placement };
 export declare function LabelContainer({ targetRef, offset, placement, flip, className, ...rest }: LabelContainerProps): JSX.Element;
 export interface LabelProps extends CardProps {
     componentId: string;

package/dist/label/label.js

@@ -36,21 +36,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = exports.LabelContainer = void 0;
 const react_1 = __importStar(require("react"));
 const react_popper_1 = require("react-popper");
-const classnames_1 = __importDefault(require("classnames"));
 const component_id_1 = require("@teambit/component-id");
 const use_animation_frame_1 = __importDefault(require("use-animation-frame"));
 require("@popperjs/core");
 const default_label_1 = require("./default-label");
 const component_label_1 = require("./component-label");
-const label_module_scss_1 = __importDefault(require("./label.module.scss"));
 // TODO - replace this with TippyJS, when it supports a `targetElement={targetRef.current}` prop
 function LabelContainer(_a) {
     var { targetRef, offset, placement, flip = true, className } = _a, rest = __rest(_a, ["targetRef", "offset", "placement", "flip", "className"]);
     const [sourceRef, setSourceRef] = (0, react_1.useState)(null);
-    const modifiers = (0, react_1.useMemo)(() => [{ name: 'offset', options: { offset } }], [
-        flip,
-        offset,
-    ]);
+    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,
@@ -58,14 +53,14 @@ function LabelContainer(_a) {
     (0, use_animation_frame_1.default)(() => update === null || update === void 0 ? void 0 : update(), [update]);
     if (!targetRef)
         return null;
-    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: setSourceRef, className: (0, classnames_1.default)(label_module_scss_1.default.label, className), style: styles.popper }, attributes.popper)));
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: setSourceRef, className: className, style: styles.popper }, attributes.popper)));
 }
 exports.LabelContainer = LabelContainer;
 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, { href: link }, componentId);
+        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 }));
 }
 exports.Label = Label;

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,4DAAoC;AACpC,wDAAoD;AAEpD,8EAAoD;AAEpD,0BAAwB;AAExB,mDAA+C;AAC/C,uDAAmD;AAEnD,4EAA0C;AAS1C,gGAAgG;AAChG,SAAgB,cAAc,CAAC,EAAsF;QAAtF,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,OAAgC,EAA3B,IAAI,cAA/D,yDAAiE,CAAF;IAC5F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,IAAA,eAAO,EAAgC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE;QACxG,IAAI;QACJ,MAAM;KACP,CAAC,CAAC;IAEH,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,6BAAiB,EAAC,GAAG,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9C,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAAO,CAAC,KAAK,EAAE,SAAS,CAAC,EAC/C,KAAK,EAAE,MAAM,CAAC,MAAM,IAChB,UAAU,CAAC,MAAM,EACrB,CACH,CAAC;AACJ,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;QAAE,OAAO,8BAAC,4BAAY,IAAC,IAAI,EAAE,IAAI,IAAG,WAAW,CAAgB,CAAC;IAE7E,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;AAND,sBAMC"}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../label/label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,+CAAyC;AACzC,wDAAoD;AAEpD,8EAAoD;AAEpD,0BAAwB;AAExB,mDAA+C;AAC/C,uDAAmD;AAWnD,gGAAgG;AAChG,SAAgB,cAAc,CAAC,EAAsF;QAAtF,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,OAAgC,EAA3B,IAAI,cAA/D,yDAAiE,CAAF;IAC5F,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,6BAAiB,EAAC,GAAG,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9C,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,MAAM,IAChB,UAAU,CAAC,MAAM,EACrB,CACH,CAAC;AACJ,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"}

package/element-highlighter/element-highlighter.compositions.tsx

@@ -0,0 +1,46 @@
+import React, { useState, createRef, useEffect } from 'react';
+import { ElementHighlighter, HighlightTarget } from './element-highlighter';
+
+const mockTargetId = 'teambit.design/ui/icon-button';
+
+export const HighlightedElement = ({ style, className }: { style?: Record<string, string>; className?: string }) => {
+  const [targetElement, setTargetElement] = useState<HTMLElement | undefined>(undefined);
+  const targetRef = createRef<HTMLDivElement>();
+
+  useEffect(() => {
+    const { current } = targetRef;
+    setTargetElement(current || undefined);
+  }, [targetRef.current]);
+
+  const target: HighlightTarget | undefined = targetElement && {
+    element: targetElement,
+    id: mockTargetId,
+    link: 'https://bit.dev/teambit/design/ui/icon-button',
+    scopeLink: 'https://bit.dev/teambit/design',
+  };
+
+  return (
+    <div className={className} style={{ padding: '16px 160px 50px 16px' }}>
+      <div ref={targetRef} style={{ width: 100 }}>
+        highlight target
+      </div>
+      {target && <ElementHighlighter target={target} style={style} placement="bottom" />}
+    </div>
+  );
+};
+
+export const Customized = () => {
+  return (
+    <HighlightedElement
+      style={{
+        '--bit-highlighter-color': '#94deb4',
+        '--bit-highlighter-color-hover': '#d0f1de',
+        '--bit-highlighter-color-active': '#37b26c',
+      }}
+    />
+  );
+};
+
+export const Sizes = () => {
+  return <HighlightedElement style={{ fontSize: '16px' }} />;
+};

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

@@ -0,0 +1,8 @@
+.container {
+  font-size: 12px;
+}
+
+.label {
+  font-family: sans-serif;
+  padding: 8px;
+}

package/element-highlighter/element-highlighter.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Frame } from '../frame';
+import { Label, LabelContainer, Placement } from '../label';
+import { excludeHighlighterAtt } from '../ignore-highlighter';
+import styles from './element-highlighter.module.scss';
+
+export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** target element to highlight */
+  target: HighlightTarget;
+  /** default location of the label */
+  placement?: Placement;
+  /** customize styles */
+  classes?: HighlightClasses;
+}
+
+export { Placement };
+
+export type HighlightTarget = {
+  id?: string;
+  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;
+};
+
+export type HighlightClasses = {
+  container?: string;
+  frame?: string;
+  label?: string;
+};
+
+export function ElementHighlighter({
+  target,
+  placement = 'top',
+  className,
+  classes,
+  ...props
+}: ElementHighlighterProps) {
+  return (
+    <div {...props} {...excludeHighlighterAtt} className={classnames(classes?.container, styles.container, className)}>
+      <Frame targetRef={target.element} className={classes?.frame} />
+
+      {target.id && (
+        <LabelContainer className={styles.label} targetRef={target.element} placement={placement}>
+          <Label
+            componentId={target.id}
+            link={target.link}
+            scopeLink={target.scopeLink}
+            local={target.local}
+            className={classes?.label}
+          />
+        </LabelContainer>
+      )}
+    </div>
+  );
+}

package/element-highlighter/index.ts

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

package/ignore-highlighter.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const excludeHighlighterAttrName = 'data-ignore-component-highlight';
+
+/** select elements matching the exclusion pattern */
+export const excludeHighlighterSelector = `[${excludeHighlighterAttrName}]`;
+
+/** elements with these attributes will be ignored by the automatic highlighter */
+export const excludeHighlighterAtt = { [excludeHighlighterAttrName]: true };
+
+/** elements under this element will be ignored by the automatic highlighter */
+export function ExcludeHighlighter(props: React.HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} {...excludeHighlighterAtt} />;
+}

package/index.ts

@@ -1,2 +1,7 @@
-export { ComponentHighlighter } from './component-highlighter';
-export type { ComponentHighlightProps } from './component-highlighter';
+export { HoverHighlighter as ComponentHighlighter } from './component-highlighter';
+export type { HoverHighlighterProps as ComponentHighlightProps } from './component-highlighter';
+
+export { ElementHighlighter } from './element-highlighter';
+export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
+
+export { ExcludeHighlighter, excludeHighlighterAtt } from './ignore-highlighter';

package/label/component-label/component-label.tsx

@@ -18,14 +18,13 @@ export interface ComponentLabelProps extends CardProps {
 
 export function ComponentLabel({ componentId, className, link, scopeLink, local, ...rest }: ComponentLabelProps) {
   return (
-    <Card {...rest} className={classNames(className, styles.duoComponentBubble)} data-ignore-component-highlight>
-      <ScopeBubble href={scopeLink} componentId={componentId} className={bubble} data-ignore-component-highlight />
+    <Card {...rest} className={classNames(className, styles.duoComponentBubble)}>
+      <ScopeBubble href={scopeLink} componentId={componentId} className={bubble} />
       <ComponentBubble
         href={link}
         componentId={componentId}
         className={bubble}
         local={local}
-        data-ignore-component-highlight
       />
     </Card>
   );

package/label/default-label/default-label.module.scss

@@ -5,4 +5,8 @@
   padding: 0;
   border: none;
   background: none;
+
+  > * {
+    border-radius: 4px;
+  }
 }

package/label/default-label/default-label.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import classnames from 'classnames';
 
 import { Card, CardProps } from '@teambit/base-ui.surfaces.card';
-import { pillClass } from '@teambit/base-ui.css-components.pill';
 import { NativeLink } from '@teambit/base-ui.routing.native-link';
 
 import { bubble } from '../../bubble';
@@ -15,7 +14,7 @@ export interface DefaultLabelProps extends CardProps {
 export function DefaultLabel({ className, href, children, ...rest }: DefaultLabelProps) {
   return (
     <Card {...rest} className={classnames(styles.container, className)}>
-      <NativeLink external href={href} className={classnames(pillClass, bubble)}>
+      <NativeLink external href={href} className={bubble}>
         {children}
       </NativeLink>
     </Card>

package/label/index.ts

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

package/label/label.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo, useState } from 'react';
 import { usePopper } from 'react-popper';
-import classnames from 'classnames';
 import { ComponentID } from '@teambit/component-id';
 import type { CardProps } from '@teambit/base-ui.surfaces.card';
 import useAnimationFrame from 'use-animation-frame';
@@ -10,8 +9,6 @@ import '@popperjs/core';
 import { DefaultLabel } from './default-label';
 import { ComponentLabel } from './component-label';
 
-import classes from './label.module.scss';
-
 export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   targetRef: HTMLElement | null;
   offset?: [number, number];
@@ -19,14 +16,16 @@ export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement
   flip?: 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, className, ...rest }: LabelContainerProps) {
   const [sourceRef, setSourceRef] = useState<HTMLDivElement | null>(null);
 
-  const modifiers = useMemo<Partial<Modifier<any, any>>[]>(() => [{ name: 'offset', options: { offset } }], [
-    flip,
-    offset,
-  ]);
+  const modifiers = useMemo<Partial<Modifier<any, any>>[]>(
+    () => [{ name: 'offset', options: { offset } }],
+    [flip, offset]
+  );
 
   const { styles, attributes, update } = usePopper(targetRef, sourceRef, {
     modifiers,
@@ -41,7 +40,7 @@ export function LabelContainer({ targetRef, offset, placement, flip = true, clas
     <div
       {...rest}
       ref={setSourceRef}
-      className={classnames(classes.label, className)}
+      className={className}
       style={styles.popper}
       {...attributes.popper}
     />
@@ -58,7 +57,12 @@ export interface LabelProps extends CardProps {
 export function Label({ componentId, link, scopeLink, local, ...rest }: LabelProps) {
   const parsedId = useMemo(() => ComponentID.tryFromString(componentId), [componentId]);
 
-  if (!parsedId) return <DefaultLabel href={link}>{componentId}</DefaultLabel>;
+  if (!parsedId)
+    return (
+      <DefaultLabel {...rest} href={link}>
+        {componentId}
+      </DefaultLabel>
+    );
 
   return <ComponentLabel {...rest} local={local} componentId={parsedId} link={link} scopeLink={scopeLink} />;
 }

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.447",
+  "version": "0.0.451",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.447"
+    "version": "0.0.451"
   },
   "dependencies": {
-    "@popperjs/core": "2.6.0",
     "classnames": "2.2.6",
+    "@popperjs/core": "2.6.0",
     "react-popper": "2.2.4",
     "use-animation-frame": "0.1.0",
     "use-debounce": "6.0.1",
@@ -20,26 +20,26 @@
     "@teambit/base-ui.utils.popper-js.resize-to-match-reference": "1.0.0",
     "@teambit/base-ui.surfaces.card": "1.0.1",
     "@teambit/base-ui.routing.native-link": "1.0.0",
-    "@teambit/base-ui.css-components.pill": "1.0.0",
-    "@teambit/react.babel.bit-react-transformer": "0.0.444",
-    "@teambit/react.modules.dom-to-react": "0.0.439",
-    "@teambit/react.ui.hover-selector": "0.0.117",
+    "@teambit/react.babel.bit-react-transformer": "0.0.448",
     "@teambit/component-id": "0.0.369",
-    "@teambit/component.modules.component-url": "0.0.72"
+    "@teambit/react.modules.dom-to-react": "0.0.442",
+    "@teambit/react.ui.hover-selector": "0.0.121",
+    "@teambit/component.modules.component-url": "0.0.75"
   },
   "devDependencies": {
-    "@types/classnames": "2.2.11",
     "@types/react": "^17.0.8",
+    "@types/classnames": "2.2.11",
     "@types/url-join": "4.0.0",
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
     "@babel/runtime": "7.12.18",
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
-    "@types/node": "12.20.4"
+    "@types/node": "12.20.4",
+    "@teambit/design.ui.icon-button": "1.0.1"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.155",
+    "@teambit/legacy": "1.0.158",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -67,7 +67,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.155",
+        "@teambit/legacy": "1.0.158",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }