@teambit/react.ui.component-highlighter 0.0.511 → 0.0.514

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

@@ -3,11 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useHoverHighlighter = void 0;
 const react_1 = require("react");
 const use_debounce_1 = require("use-debounce");
-const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-react");
 const react_ui_hover_selector_1 = require("@teambit/react.ui.hover-selector");
-const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
 const ignore_highlighter_1 = require("../ignore-highlighter");
-const rule_matcher_1 = require("../rule-matcher");
+const bubble_to_component_1 = require("./bubble-to-component");
 /** fires onChange when targeting a new component */
 function useHoverHighlighter(onChange, props = {}, { debounceDuration, scopeClass, disabled, rule, componentRule }) {
     const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule, componentRule });
@@ -26,7 +24,7 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
         // skip DOM trees having 'data-ignore-component-highlight'
         if (element.closest(`.${scopeClass} ${ignore_highlighter_1.excludeHighlighterSelector}`))
             return;
-        const result = bubbleToBitComponent(element, rule, componentRule);
+        const result = (0, bubble_to_component_1.bubbleToComponent)(element, { elementRule: rule, componentRule });
         if (!result)
             return;
         onChange({
@@ -42,23 +40,4 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
     }, [disabled, handleElement]);
     return { handleElement };
 }
-/** go up the dom tree until reaching a react bit component */
-function bubbleToBitComponent(element, elementRule, componentRule) {
-    for (let current = element; current; current = current.parentElement) {
-        current = (0, react_modules_dom_to_react_1.toRootElement)(current);
-        if (!current)
-            return undefined;
-        if ((0, rule_matcher_1.ruleMatcher)(current, elementRule)) {
-            const components = (0, react_modules_dom_to_react_1.domToReacts)(current);
-            const relevantComponents = components.filter((x) => (0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(x) && (0, rule_matcher_1.componentRuleMatcher)({ meta: x[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] }, componentRule));
-            if (relevantComponents.length < 1)
-                return undefined;
-            return {
-                element: current,
-                components: relevantComponents,
-            };
-        }
-    }
-    return undefined;
-}
 //# sourceMappingURL=use-hover-highlighter.js.map

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

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

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

@@ -70,7 +70,7 @@ function HybridHighlighter(_a) {
     const _styles = (0, react_1.useMemo)(() => (Object.assign({ '--bit-highlighter-color': bgColor, '--bit-highlighter-color-hover': bgColorHover, '--bit-highlighter-color-active': bgColorActive }, style)), [bgColor, bgColorHover, bgColorActive, style]);
     return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, handlers, { style: _styles, className: (0, classnames_1.default)(className, scopeClass), "data-nullify-component-highlight": true }),
         children,
-        Object.entries(targets).map(([key, target]) => (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { key: key, target: target, classes: classes, style: highlightStyle, placement: placement, watchMotion: watchMotion })))));
+        Object.entries(targets).map(([key, target]) => (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { key: key, targetRef: { current: target.element }, components: target.components, classes: classes, style: highlightStyle, placement: placement, watchMotion: watchMotion })))));
 }
 exports.HybridHighlighter = HybridHighlighter;
 //# sourceMappingURL=hybrid-highlighter.js.map

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

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

package/dist/index.d.ts

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

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

@@ -1,7 +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;
+    component: ComponentMetaHolder | string;
 }
 export declare const ComponentStrip: React.ForwardRefExoticComponent<ComponentStripProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/label/component-strip.js

@@ -31,7 +31,7 @@ const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@t
 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 } = component[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField];
+    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 },
@@ -46,4 +46,10 @@ function LabelBlock({ link, children }) {
     const Comp = link ? base_ui_routing_native_link_1.NativeLink : 'span';
     return (react_1.default.createElement(Comp, { href: link, external: !!link }, children));
 }
+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

@@ -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,oJAG6E;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,SAAS,CAAC,+EAAkB,CAAC,CAAC;IAEjE,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,0BAAW,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,QAAQ,IAAI,IAAA,yBAAiB,EAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAExE,OAAO,CACL,uCAAK,SAAS,EAAE,qCAAM,CAAC,cAAc,EAAE,GAAG,EAAE,GAAG;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"}
+{"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"}

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

@@ -1,8 +1,7 @@
-import React from 'react';
-import type { Placement } from '@popperjs/core';
-import '@popperjs/core';
+import React, { RefObject } from 'react';
+import type { Placement } from '@floating-ui/react-dom';
 export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    targetRef: HTMLElement | null;
+    targetRef: RefObject<HTMLElement | null>;
     offset?: [number, number];
     placement?: Placement;
     flip?: boolean;
@@ -10,4 +9,4 @@ export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement
     watchMotion?: boolean;
 }
 export type { Placement };
-export declare function LabelContainer({ targetRef, offset, placement, flip, watchMotion, className, ...rest }: LabelContainerProps): JSX.Element;
+export declare function LabelContainer({ targetRef, offset, placement, flip, watchMotion, className, style, ...rest }: LabelContainerProps): JSX.Element;

package/dist/label/label-container.js

@@ -29,25 +29,41 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabelContainer = void 0;
 const react_1 = __importStar(require("react"));
-const react_popper_1 = require("react-popper");
-require("@popperjs/core");
-const use_animation_frame_1 = require("../use-animation-frame");
-// TODO - replace this with TippyJS, when it supports a `targetElement={targetRef.current}` prop
+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"));
 function LabelContainer(_a) {
-    var { targetRef, offset, placement, flip = true, watchMotion, className } = _a, rest = __rest(_a, ["targetRef", "offset", "placement", "flip", "watchMotion", "className"]);
-    const [sourceRef, setSourceRef] = (0, react_1.useState)(null);
-    const modifiers = (0, react_1.useMemo)(() => [{ name: 'offset', options: { offset } }], [flip, offset]);
-    const { styles, attributes, update } = (0, react_popper_1.usePopper)(targetRef, sourceRef, {
-        modifiers,
+    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)({
         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, use_animation_frame_1.useAnimationFrame)(!!watchMotion && update);
-    if (!targetRef)
-        return null;
-    return react_1.default.createElement("div", Object.assign({}, rest, { ref: setSourceRef, className: className, style: styles.popper }, attributes.popper));
+    (0, react_1.useLayoutEffect)(() => {
+        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)
+            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), 
+        // 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,+CAAiD;AACjD,+CAAyC;AAEzC,0BAAwB;AAExB,gEAA2D;AAa3D,gGAAgG;AAChG,SAAgB,cAAc,CAAC,EAQT;QARS,EAC7B,SAAS,EACT,MAAM,EACN,SAAS,EACT,IAAI,GAAG,IAAI,EACX,WAAW,EACX,SAAS,OAEW,EADjB,IAAI,cAPsB,wEAQ9B,CADQ;IAEP,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,IAAA,eAAO,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,EAC/C,CAAC,IAAI,EAAE,MAAM,CAAC,CACf,CAAC;IAEF,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAA,wBAAS,EAAC,SAAS,EAAE,SAAS,EAAE;QACrE,SAAS;QACT,SAAS;KACV,CAAC,CAAC;IAEH,IAAA,uCAAiB,EAAC,CAAC,CAAC,WAAW,IAAI,MAAM,CAAC,CAAC;IAE3C,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAE5B,OAAO,uDAAS,IAAI,IAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,IAAM,UAAU,CAAC,MAAM,EAAI,CAAC;AACjH,CAAC;AA1BD,wCA0BC"}
+{"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,4GAA4G;YAC5G,IAAA,iBAAK,EAAC,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;SACrE,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;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;AA3CD,wCA2CC"}

package/dist/label/label.d.ts

@@ -1,6 +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[];
+    components: (ComponentMetaHolder | string)[];
 }
 export declare function Label({ components, ...props }: LabelProps): JSX.Element;

package/dist/label/label.module.scss

@@ -22,3 +22,11 @@
     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/other-components.d.ts

@@ -2,7 +2,7 @@
 import { TippyProps } from '@tippyjs/react/headless';
 import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 export declare type OtherComponentsProps = {
-    components: ComponentMetaHolder[];
+    components: (ComponentMetaHolder | string)[];
     start?: number;
     end?: number;
 } & TippyProps;

package/dist/mock-component.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function MockTarget({ children, ...rest }: PropsWithChildren<{}>): JSX.Element;

package/dist/mock-component.js

@@ -0,0 +1,30 @@
+"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 = 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);
+}
+exports.MockTarget = MockTarget;
+MockTarget[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] = {
+    id: 'teambit.design/ui/icon-button@1.6.2',
+};
+//# 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":";;;;;;;;;;;;;;;;;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"}

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

@@ -1,16 +1,6 @@
-import { componentMetaField } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import React, { useState, createRef, useEffect, CSSProperties } from 'react';
-import { ElementHighlighter, HighlightTarget } from './element-highlighter';
-
-const mockTarget: Partial<HighlightTarget> = {
-  components: [
-    {
-      [componentMetaField]: {
-        id: 'teambit.design/ui/icon-button@1.6.2',
-      },
-    },
-  ],
-};
+import { ElementHighlighter } from './element-highlighter';
+import { MockTarget } from '../mock-component';
 
 type HighlightedElementProps = {
   style?: CSSProperties;
@@ -20,18 +10,21 @@ type HighlightedElementProps = {
 };
 
 export const HighlightedElement = ({ style, targetStyle, watchMotion, className }: HighlightedElementProps) => {
-  const [targetElement, setTargetElement] = useState<HTMLElement | undefined>(undefined);
   const targetRef = createRef<HTMLDivElement>();
 
-  useEffect(() => setTargetElement(targetRef.current || undefined), [targetRef.current]);
-  const target = targetElement && { ...mockTarget, element: targetElement };
-
   return (
     <div className={className} style={{ padding: '16px 16px 40px 16px', width: 300, fontFamily: 'sans-serif' }}>
       <div ref={targetRef} style={{ width: 100, ...targetStyle }}>
         highlight target
       </div>
-      {target && <ElementHighlighter target={target} style={style} watchMotion={watchMotion} placement="bottom" />}
+
+      <ElementHighlighter
+        targetRef={targetRef}
+        components={[MockTarget]}
+        style={style}
+        watchMotion={watchMotion}
+        placement="bottom"
+      />
     </div>
   );
 };
@@ -60,13 +53,54 @@ export const Sizes = () => {
   );
 };
 
+const fps = 30;
+const frameInterval = 1000 / fps;
+
 export const MovingElement = () => {
   const [margin, setMargin] = useState(0);
 
   useEffect(() => {
-    const intervalId = setInterval(() => setMargin((x) => (x + 1) % 100), 80);
+    const intervalId = setInterval(() => setMargin((x) => (x + 1) % 100), frameInterval);
     return () => clearInterval(intervalId);
   }, []);
 
-  return <HighlightedElement targetStyle={{ marginLeft: margin }} />;
+  return <HighlightedElement targetStyle={{ marginLeft: margin }} watchMotion />;
+};
+
+export const ElementOnTheEdge = () => {
+  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>
+      <ElementHighlighter targetRef={targetRef} components={[MockTarget]} watchMotion />
+    </div>
+  );
+};
+
+export const FullscreenElement = () => {
+  const targetRef = createRef<HTMLDivElement>();
+
+  return (
+    <div style={{ fontFamily: 'sans-serif' }}>
+      <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>
+  );
 };

package/element-highlighter/element-highlighter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import classnames from 'classnames';
 import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import { Frame } from '../frame';
@@ -7,8 +7,11 @@ 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;
+  /** highlight this element */
+  targetRef: RefObject<HTMLElement | null>;
+  /** components with metadata to show in the label */
+  components?: (ComponentMetaHolder | string)[];
+
   /** default location of the label */
   placement?: Placement;
   /** customize styles */
@@ -19,13 +22,6 @@ export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivEle
 
 export { Placement };
 
-export type HighlightTarget = {
-  /** element to show the highlight at */
-  element: HTMLElement;
-  /** components with metadata to show in the label */
-  components?: ComponentMetaHolder[];
-};
-
 export type HighlightClasses = {
   container?: string;
   frame?: string;
@@ -33,29 +29,21 @@ export type HighlightClasses = {
 };
 
 export function ElementHighlighter({
-  target,
+  targetRef,
+  components,
   placement = 'top',
-  watchMotion = true,
+  watchMotion,
   className,
   classes,
   ...props
 }: ElementHighlighterProps) {
   return (
     <div {...props} {...excludeHighlighterAtt} className={classnames(classes?.container, styles.container, className)}>
-      <Frame
-        targetRef={target.element}
-        className={classnames(styles.frame, classes?.frame)}
-        watchMotion={watchMotion}
-      />
+      <Frame targetRef={targetRef} className={classnames(styles.frame, classes?.frame)} watchMotion={watchMotion} />
 
-      {target.components && (
-        <LabelContainer
-          className={styles.label}
-          targetRef={target.element}
-          placement={placement}
-          watchMotion={watchMotion}
-        >
-          <Label components={target.components} className={classes?.label} />
+      {components && (
+        <LabelContainer targetRef={targetRef} className={styles.label} placement={placement} watchMotion={watchMotion}>
+          <Label components={components} className={classes?.label} />
         </LabelContainer>
       )}
     </div>

package/element-highlighter/index.ts

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

package/frame/frame.module.scss

@@ -2,6 +2,7 @@ $border: 2;
 $padding: 4;
 
 .overlayBorder {
+  box-sizing: border-box;
   border: $border * 1px solid var(--bit-highlighter-color, #eebcc9);
 
   border-radius: 11px;
@@ -11,6 +12,12 @@ $padding: 4;
   user-select: none;
 }
 
+.hidden {
+  // the frame's size is ignored anyways,
+  // and so we can use 'display: none' and not 'visibility: hidden'
+  display: none;
+}
+
 :export {
-  offset: -$border - $padding;
+  offset: $border + $padding;
 }