@teambit/react.ui.component-highlighter 0.0.513 → 0.2.0

package/dist/ignore-highlighter.js

@@ -3,16 +3,23 @@ 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;
+exports.skipHighlighterSelector = exports.skipHighlighterAttr = exports.skipHighlighterAttrName = exports.ExcludeHighlighter = exports.excludeHighlighterAtt = exports.excludeHighlighterSelector = exports.excludeHighlighterAttrName = void 0;
 const react_1 = __importDefault(require("react"));
+/** name of ignore attribute */
 exports.excludeHighlighterAttrName = 'data-ignore-component-highlight';
-/** select elements matching the exclusion pattern */
+/** selector for elements with the ignore attribute */
 exports.excludeHighlighterSelector = `[${exports.excludeHighlighterAttrName}]`;
-/** elements with these attributes will be ignored by the automatic highlighter */
+/** highlighter will exclude elements with this attribute */
 exports.excludeHighlighterAtt = { [exports.excludeHighlighterAttrName]: true };
-/** elements under this element will be ignored by the automatic highlighter */
+/** 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));
 }
 exports.ExcludeHighlighter = ExcludeHighlighter;
+/** 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

@@ -1 +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"}
+{"version":3,"file":"ignore-highlighter.js","sourceRoot":"","sources":["../ignore-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,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;AAFD,gDAEC;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

@@ -6,5 +6,5 @@ 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, excludeHighlighterSelector, excludeHighlighterAttrName, } from './ignore-highlighter';
+export { ExcludeHighlighter, excludeHighlighterAtt, excludeHighlighterAttrName, skipHighlighterAttr, skipHighlighterAttrName, } from './ignore-highlighter';
 export type { MatchRule } from './rule-matcher';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.excludeHighlighterAttrName = exports.excludeHighlighterSelector = exports.excludeHighlighterAtt = exports.ExcludeHighlighter = exports.ElementHighlighter = exports.ChildrenHighlighter = exports.HoverHighlighter = exports.ComponentHighlighter = void 0;
+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");
@@ -12,6 +12,7 @@ Object.defineProperty(exports, "ElementHighlighter", { enumerable: true, get: fu
 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, "excludeHighlighterSelector", { enumerable: true, get: function () { return ignore_highlighter_1.excludeHighlighterSelector; } });
 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

@@ -1 +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,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,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 @@
+/// <reference types="react" />
+export declare const ComponentStripPreview: () => 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.js

@@ -37,14 +37,16 @@ exports.ComponentStrip = (0, react_1.forwardRef)(function ComponentStrip({ compo
     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 },
-            parsedId.fullName,
-            parsedId.version && parsedId.version !== 'latest' && `@${parsedId.version}`)),
+        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 }) {
+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 }, children));
+    return (react_1.default.createElement(Comp, { href: link, external: !!link, className: className }, children));
 }
 function extractMetadata(metadata) {
     if (typeof metadata === 'string') {

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

@@ -1 +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;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;AAED,SAAS,eAAe,CAAC,QAAsC;IAC7D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;QAChC,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACzC;IAED,OAAO,QAAQ,CAAC,+EAAkB,CAAC,CAAC;AACtC,CAAC"}
+{"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;QAChC,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACzC;IAED,OAAO,QAAQ,CAAC,+EAAkB,CAAC,CAAC;AACtC,CAAC"}

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

@@ -7,6 +7,7 @@ $gap: 0.125em;
 
   border-radius: $borderRadius;
   box-shadow: var(--bit-highlighter-shadow);
+  white-space: nowrap;
 
   > * {
     padding: 0 0.5em;
@@ -47,3 +48,21 @@ $gap: 0.125em;
     }
   }
 }
+
+.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/label-container.js

@@ -39,14 +39,18 @@ 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;
 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 } = (0, react_dom_1.useFloating)({
+    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)(),
-            (0, react_dom_1.shift)({ rootBoundary: 'viewport' }),
+            // 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, react_1.useLayoutEffect)(() => {
@@ -55,12 +59,14 @@ function LabelContainer(_a) {
     // 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)
+        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 = x !== null;
-    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: floating, className: (0, classnames_1.default)(className, !isReady && label_module_scss_1.default.hidden), style: Object.assign(Object.assign({}, style), { position: strategy, top: y !== null && y !== void 0 ? y : '', left: x !== null && x !== void 0 ? x : '' }) })));
+    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 }) })));
 }
 exports.LabelContainer = LabelContainer;
 //# sourceMappingURL=label-container.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"label-container.js","sourceRoot":"","sources":["../../label/label-container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqE;AACrE,4DAAoC;AACpC,oEAAqC;AACrC,sDAMgC;AAEhC,4EAAyC;AAazC,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,GAAG,IAAA,uBAAW,EAAC;QACxE,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,IAAA,iBAAK,EAAC,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;SACpC,CAAC;KACH,CAAC,CAAC;IAEH,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,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;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAEvE,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,KAAK,IAAI,CAAC;IAE3B,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,CAAC,OAAO,IAAI,2BAAM,CAAC,MAAM,CAAC,EAC3D,KAAK,kCAAO,KAAK,KAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,EAAE,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,OAClE,CACH,CAAC;AACJ,CAAC;AAzCD,wCAyCC"}
+{"version":3,"file":"label-container.js","sourceRoot":"","sources":["../../label/label-container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqE;AACrE,4DAAoC;AACpC,oEAAqC;AACrC,sDAOgC;AAEhC,4EAAyC;AAEzC,MAAM,mBAAmB,GAAG,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;AAarF,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,uBAAe,EAAC,GAAG,EAAE;QACnB,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;AA5CD,wCA4CC"}

package/dist/label/label.module.scss

@@ -24,6 +24,8 @@
 }
 
 .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/mock-component.d.ts

@@ -1,2 +1,4 @@
-import { PropsWithChildren } from 'react';
-export declare function MockTarget({ children, ...rest }: PropsWithChildren<{}>): JSX.Element;
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+export declare function MockTarget({ children, ...rest }: HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare function MockButton({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+export declare function MockSnap({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;

package/dist/mock-component.js

@@ -14,17 +14,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MockTarget = void 0;
+exports.MockSnap = exports.MockButton = exports.MockTarget = void 0;
 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),
-        "mocked ",
-        children);
+    return react_1.default.createElement("div", Object.assign({}, rest), children);
 }
 exports.MockTarget = MockTarget;
 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);
+}
+exports.MockButton = MockButton;
+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);
+}
+exports.MockSnap = MockSnap;
+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

@@ -1 +1 @@
-{"version":3,"file":"mock-component.js","sourceRoot":"","sources":["../mock-component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAAiD;AACjD,oJAAyG;AAEzG,SAAgB,UAAU,CAAC,EAA4C;QAA5C,EAAE,QAAQ,OAAkC,EAA7B,IAAI,cAAnB,YAAqB,CAAF;IAC5C,OAAO,uDAAS,IAAI;;QAAU,QAAQ,CAAO,CAAC;AAChD,CAAC;AAFD,gCAEC;AACD,UAAU,CAAC,+EAAkB,CAAC,GAAG;IAC/B,EAAE,EAAE,qCAAqC;CAC1C,CAAC"}
+{"version":3,"file":"mock-component.js","sourceRoot":"","sources":["../mock-component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,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;AAFD,gCAEC;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;AAFD,gCAEC;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;AAFD,4BAEC;AACD,QAAQ,CAAC,+EAAkB,CAAC,GAAG;IAC7B,EAAE,EAAE,wEAAwE;CAC5D,CAAC"}

package/dist/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "es2019",
+            "DOM",
+            "ES6",
+            "DOM.Iterable"
+        ],
+        "target": "es2015",
+        "module": "CommonJS",
+        "jsx": "react",
+        "allowJs": true,
+        "composite": true,
+        "declaration": true,
+        "sourceMap": true,
+        "skipLibCheck": true,
+        "experimentalDecorators": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "rootDir": ".",
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "dist",
+        "package.json"
+    ],
+    "include": [
+        "**/*",
+        "**/*.json"
+    ]
+}

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

@@ -67,16 +67,64 @@ export const MovingElement = () => {
   return <HighlightedElement targetStyle={{ marginLeft: margin }} watchMotion />;
 };
 
-export const ElementOnTheEdge = () => {
+export const FullscreenElement = () => {
   const targetRef = createRef<HTMLDivElement>();
 
   return (
     <div style={{ fontFamily: 'sans-serif' }}>
-      <div ref={targetRef} style={{ width: '100%', border: '1px solid black', boxSizing: 'border-box' }}>
-        This element is on the edge of the document, making the highlighter overflow. <br />
-        It should instead shrink to fit inside the document.
+      <div
+        ref={targetRef}
+        style={{
+          height: '100vh',
+          width: '100%',
+          background: '#bceed4',
+        }}
+      >
+        This element will cover the entire document,
+        <br />
+        pushing the highlighter to the edge of the window.
+        <br />
+        The highlighter should remain inside and expand no further than the document.
       </div>
       <ElementHighlighter targetRef={targetRef} components={[MockTarget]} watchMotion />
     </div>
   );
 };
+
+const edgeStyles = { position: 'absolute', background: 'cyan', padding: 30 } as const;
+const centerStyles = {
+  top: { top: -30, left: '50%', transform: 'translate(-50%,0)' },
+  right: { right: -30, top: '50%', transform: 'translate(0, -50%)' },
+  bottom: { bottom: -30, left: '50%', transform: 'translate(-50%,0)' },
+  left: { left: -30, top: '50%', transform: 'translate(0, -50%)' },
+};
+
+export function OffscreenElements() {
+  const target01 = createRef<HTMLDivElement>();
+  const target02 = createRef<HTMLDivElement>();
+  const target03 = createRef<HTMLDivElement>();
+  const target04 = createRef<HTMLDivElement>();
+
+  return (
+    <div style={{ fontFamily: 'sans-serif', height: '100%' }}>
+      <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
+        <div ref={target01} style={{ ...edgeStyles, ...centerStyles.top }}>
+          top
+        </div>
+        <div ref={target02} style={{ ...edgeStyles, ...centerStyles.right }}>
+          right
+        </div>
+        <div ref={target03} style={{ ...edgeStyles, ...centerStyles.bottom }}>
+          bottom
+        </div>
+        <div ref={target04} style={{ ...edgeStyles, ...centerStyles.left }}>
+          left
+        </div>
+        <ElementHighlighter targetRef={target01} components={[MockTarget]} watchMotion />
+        <ElementHighlighter targetRef={target02} components={[MockTarget]} watchMotion />
+        <ElementHighlighter targetRef={target03} components={[MockTarget]} watchMotion />
+        <ElementHighlighter targetRef={target04} components={[MockTarget]} watchMotion />
+      </div>
+    </div>
+  );
+}

package/element-highlighter/element-highlighter.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import { Frame } from '../frame';
 import { Label, LabelContainer, Placement } from '../label';
-import { excludeHighlighterAtt } from '../ignore-highlighter';
+import { skipHighlighterAttr } from '../ignore-highlighter';
 import styles from './element-highlighter.module.scss';
 
 export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -38,7 +38,7 @@ export function ElementHighlighter({
   ...props
 }: ElementHighlighterProps) {
   return (
-    <div {...props} {...excludeHighlighterAtt} className={classnames(classes?.container, styles.container, className)}>
+    <div {...props} {...skipHighlighterAttr} className={classnames(classes?.container, styles.container, className)}>
       <Frame targetRef={targetRef} className={classnames(styles.frame, classes?.frame)} watchMotion={watchMotion} />
 
       {components && (

package/frame/frame.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useLayoutEffect, useRef, RefObject } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, RefObject, CSSProperties } from 'react';
 import classnames from 'classnames';
-import { useFloating, autoUpdate, offset, size, shift } from '@floating-ui/react-dom';
+import { useFloating, autoUpdate, offset, size, detectOverflow, hide } from '@floating-ui/react-dom';
 import type { Coords } from '@floating-ui/react-dom';
 
 import styles from './frame.module.scss';
@@ -10,6 +10,11 @@ const MARGIN_FROM_TARGET = +styles.offset || 6; // setting fallback 6, for tests
 /** min. distance from the edge of the screen. */
 const MARGIN_FROM_DOC_EDGE = 0;
 
+const overflowParameters = { rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE } as const;
+const SHIFT_POSITIVE = 'shiftPositive';
+
+const HAS_RESIZE_OBSERVER = typeof window !== 'undefined' && !!window.ResizeObserver;
+
 export interface FrameProps extends React.HTMLAttributes<HTMLDivElement> {
   /** apply the frame to this element  */
   targetRef: RefObject<HTMLElement | null>;
@@ -26,11 +31,12 @@ export interface FrameProps extends React.HTMLAttributes<HTMLDivElement> {
 // x - width - horizontal (cross axis)
 // y - height - vertical (main axis)
 
+type DimensionsStyle = Pick<CSSProperties, 'width' | 'height' | 'maxWidth' | 'maxHeight'>;
+
 export function Frame({ targetRef, watchMotion, className, stylesClass = styles.overlayBorder, style }: FrameProps) {
-  const dimensionRef = useRef({ width: 0, height: 0 });
-  const shiftRef = useRef<Coords | undefined>();
+  const dimensionRef = useRef<DimensionsStyle>({ width: 0, height: 0 });
 
-  const { x, y, strategy, reference, floating, update, refs } = useFloating({
+  const { x, y, strategy, reference, floating, update, refs, middlewareData } = useFloating({
     placement: 'bottom-start',
     middleware: [
       // replace dimensions from previous iterations with the target's size
@@ -48,17 +54,28 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
         },
       },
       // reposition x,y, to the top of the reference
-      offset((options) => -options.reference.height),
+      offset(({ rects }) => -rects.reference.height),
       // offset the frame by its extra padding
       offset(() => ({ mainAxis: -MARGIN_FROM_TARGET, crossAxis: -MARGIN_FROM_TARGET })),
-      // push the frame inside the screen
-      shift({ rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE, mainAxis: true, crossAxis: true }),
-      // read "shift" for the size-apply() method (because it doesn't forward middlewareData)
+      // pushes the frame into the document. Similar to shift(), but only pushes when coods are negative
       {
-        name: 'read-shift',
-        fn({ middlewareData }) {
-          shiftRef.current = middlewareData.shift;
-          return {};
+        name: 'shiftPositive',
+        fn: async (args) => {
+          const overflow = await detectOverflow(args, overflowParameters);
+
+          const nextCoords = {
+            x: overflow.left > 0 ? args.x + overflow.left : args.x,
+            y: overflow.top > 0 ? args.y + overflow.top : args.y,
+          };
+          const shiftAmount = {
+            x: nextCoords.x - args.x,
+            y: nextCoords.y - args.y,
+          };
+
+          return {
+            ...nextCoords,
+            data: shiftAmount,
+          };
         },
       },
       // size also applies overflow detection via width and height
@@ -66,17 +83,26 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
         // apply overflow detection in reference to the document
         rootBoundary: 'document',
         padding: MARGIN_FROM_DOC_EDGE,
-        apply({ reference: referenceRect, height, width }) {
-          const paddingX = 2 * MARGIN_FROM_TARGET - (shiftRef.current?.x || 0);
-          const paddingY = 2 * MARGIN_FROM_TARGET - (shiftRef.current?.y || 0);
+        apply({ elements, rects, availableHeight, availableWidth, middlewareData }) {
+          const shift: Coords = middlewareData[SHIFT_POSITIVE] || { x: 0, y: 0 };
+          const paddingX = 2 * MARGIN_FROM_TARGET - shift.x;
+          const paddingY = 2 * MARGIN_FROM_TARGET - shift.y;
 
-          dimensionRef.current = {
-            width: Math.min(referenceRect.width + paddingX, width),
-            height: Math.min(referenceRect.height + paddingY, height),
+          const dimensions: DimensionsStyle = {
+            width: rects.reference.width + paddingX,
+            height: rects.reference.height + paddingY,
+            maxWidth: availableWidth,
+            maxHeight: availableHeight,
           };
-          Object.assign(refs.floating.current?.style, dimensionRef.current);
+
+          // per floating-ui docs, apply styles directly during apply()
+          Object.assign(elements.floating.style, dimensions);
+
+          // also store in reference, so react renders will have the same value
+          dimensionRef.current = dimensions;
         },
       }),
+      hide({ strategy: 'referenceHidden' }),
     ],
   });
 
@@ -88,12 +114,13 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
   // automatically update on scroll, resize, etc.
   // `watchMotion` will trigger continuous updates using animation frame
   useEffect(() => {
-    if (!refs.reference.current || !refs.floating.current) return () => {};
+    if (!refs.reference.current || !refs.floating.current || !HAS_RESIZE_OBSERVER) return () => {};
 
     return autoUpdate(refs.reference.current, refs.floating.current, update, { animationFrame: watchMotion });
   }, [refs.reference.current, refs.floating.current, update, watchMotion]);
 
-  const isReady = x !== null;
+  // could check if x !== null
+  const isReady = !middlewareData.hide?.referenceHidden;
 
   return (
     <div
@@ -103,8 +130,9 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
         ...style,
         ...dimensionRef.current,
         position: strategy,
-        top: y ?? '',
-        left: x ?? '',
+        // starting at pos [0,0] will ensure the label doesn't increase the document size.
+        top: y ?? 0,
+        left: x ?? 0,
       }}
     />
   );

package/hover-highlighter/hover-highlighter.compositions.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import { IconButton } from '@teambit/design.ui.icon-button';
+import React, { useEffect, useState } from 'react';
 import { HoverHighlighter } from './hover-highlighter';
+import { MockButton, MockTarget } from '../mock-component';
+import { excludeHighlighterAtt } from '../ignore-highlighter';
 
 export const ShowWhenHovering = () => {
   const [disabled, setDisabled] = useState<boolean>(false);
@@ -11,7 +12,7 @@ export const ShowWhenHovering = () => {
         <div>
           <br />
           <div>
-            <IconButton onClick={() => setDisabled((x) => !x)}>Hover here</IconButton>
+            <MockButton onClick={() => setDisabled((x) => !x)}>Hover here</MockButton>
           </div>
           <div>
             {disabled ? 'X' : '✓'} highlighter is {disabled ? 'disabled' : 'enabled'}
@@ -21,3 +22,44 @@ export const ShowWhenHovering = () => {
     </div>
   );
 };
+
+export const UnmountingElement = () => {
+  const [shown, setShown] = useState(true);
+  useEffect(() => {
+    const tid = setInterval(() => setShown((x) => !x), 1500);
+    return () => clearInterval(tid);
+  }, []);
+
+  return (
+    <div style={{ padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' }}>
+      <HoverHighlighter>
+        <div>{!shown && '(hidden)'}</div>
+
+        <div>{shown && <MockButton>Hover here</MockButton>}</div>
+        <br />
+        <MockTarget>
+          <div>{shown && <MockButton>Hover here</MockButton>}</div>
+          <div>same with a container</div>
+        </MockTarget>
+      </HoverHighlighter>
+    </div>
+  );
+};
+
+export const HoverExclusionZones = () => {
+  return (
+    <div style={{ padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' }}>
+      <HoverHighlighter>
+        <MockTarget>
+          container (target-able)
+          <div>{<MockButton>will be highlighted</MockButton>}</div>
+        </MockTarget>
+        <br />
+        <MockTarget>
+          container (target-able)
+          <div {...excludeHighlighterAtt}>{<MockButton>will be ignored</MockButton>}</div>
+        </MockTarget>
+      </HoverHighlighter>
+    </div>
+  );
+};

package/hover-highlighter/use-hover-highlighter.tsx

@@ -3,7 +3,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import { useHoverSelection } from '@teambit/react.ui.hover-selector';
 import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 
-import { excludeHighlighterSelector } from '../ignore-highlighter';
+import { excludeHighlighterSelector, skipHighlighterSelector } from '../ignore-highlighter';
 import { MatchRule, ComponentMatchRule } from '../rule-matcher';
 import { bubbleToComponent } from './bubble-to-component';
 
@@ -56,8 +56,14 @@ function useHoverHandler({
       return;
     }
 
-    // skip DOM trees having 'data-ignore-component-highlight'
-    if (element.closest(`.${scopeClass} ${excludeHighlighterSelector}`)) return;
+    // clear when ancestor has 'data-ignore-component-highlight'
+    if (element.closest(`.${scopeClass} ${excludeHighlighterSelector}`)) {
+      onChange(undefined);
+      return;
+    }
+
+    // skip DOM trees having 'data-skip-component-highlight'
+    if (element.closest(`.${scopeClass} ${skipHighlighterSelector}`)) return;
 
     const result = bubbleToComponent(element, { elementRule: rule, componentRule });
     if (!result) return;