@teambit/react.ui.component-highlighter 0.0.485 → 0.0.489

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

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HybridHighlighter = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const uuid_1 = require("uuid");
+const hover_highlighter_1 = require("../hover-highlighter");
+const element_highlighter_1 = require("../element-highlighter");
+const use_multi_highlighter_1 = require("../multi-highlighter/use-multi-highlighter");
+/** automatically highlight components on hover */
+function HybridHighlighter(_a) {
+    var { disabled, mode = 'hover', debounceSelection = 80, watchMotion = true, placement, rule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children } = _a, rest = __rest(_a, ["disabled", "mode", "debounceSelection", "watchMotion", "placement", "rule", "classes", "highlightStyle", "className", "style", "bgColor", "bgColorHover", "bgColorActive", "children"]);
+    const ref = (0, react_1.createRef)();
+    const [targets, setTarget] = (0, react_1.useState)({});
+    const scopeClass = (0, react_1.useRef)(`hl-scope-${(0, uuid_1.v4)()}`).current;
+    const hasTargets = Object.entries(targets).length > 0;
+    // clear targets when disabled
+    (0, react_1.useEffect)(() => {
+        if (disabled)
+            setTarget({});
+    }, [disabled]);
+    const handlers = (0, hover_highlighter_1.useHoverHighlighter)((nextTarget) => setTarget(nextTarget ? { 'hover-target': nextTarget } : {}), rest, {
+        debounceDuration: hasTargets ? debounceSelection : 0,
+        scopeClass,
+        disabled: disabled || mode !== 'hover',
+        rule,
+    });
+    (0, use_multi_highlighter_1.useMultiHighlighter)({
+        onChange: setTarget,
+        scopeRef: ref,
+        scopeClass,
+        disabled: disabled || mode !== 'allChildren',
+        rule,
+    });
+    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 })))));
+}
+exports.HybridHighlighter = HybridHighlighter;
+//# sourceMappingURL=hybrid-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hybrid-highlighter.js","sourceRoot":"","sources":["../../hybrid-highligher/hybrid-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8F;AAC9F,4DAAoC;AACpC,+BAA0B;AAE1B,4DAA2D;AAC3D,gEAA0G;AAC1G,sFAAiF;AAmCjF,kDAAkD;AAClD,SAAgB,iBAAiB,CAAC,EAiBT;QAjBS,EAChC,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,iBAAiB,GAAG,EAAE,EACtB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,IAAI,EAEJ,OAAO,EACP,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,QAAQ,OAEe,EADpB,IAAI,cAhByB,wLAiBjC,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;KACL,CACF,CAAC;IAEF,IAAA,2CAAmB,EAAC;QAClB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,GAAG;QACb,UAAU;QACV,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,aAAa;QAC5C,IAAI;KACL,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;AAnFD,8CAmFC"}

package/dist/hybrid-highligher/index.d.ts

@@ -0,0 +1,2 @@
+export { HybridHighlighter } from './hybrid-highlighter';
+export type { HybridHighlighterProps } from './hybrid-highlighter';

package/dist/hybrid-highligher/index.js

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

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

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

package/dist/index.d.ts

@@ -1,7 +1,10 @@
-export { HoverHighlighter as ComponentHighlighter } from './component-highlighter';
-export type { HoverHighlighterProps as ComponentHighlightProps } from './component-highlighter';
+export { HybridHighlighter as ComponentHighlighter } from './hybrid-highligher';
+export type { HybridHighlighterProps as ComponentHighlightProps } from './hybrid-highligher';
+export { HoverHighlighter } from './hover-highlighter';
+export type { HoverHighlighterProps } from './hover-highlighter';
 export { MultiHighlighter } from './multi-highlighter';
 export type { MultiHighlighterProps } from './multi-highlighter';
 export { ElementHighlighter } from './element-highlighter';
 export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
 export { ExcludeHighlighter, excludeHighlighterAtt, excludeHighlighterSelector, excludeHighlighterAttrName, } from './ignore-highlighter';
+export type { MatchRule } from './rule-matcher';

package/dist/index.js

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

package/dist/index.js.map

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

package/dist/multi-highlighter/multi-highlighter.composition.d.ts

@@ -1,2 +1,4 @@
 export declare const MultiHighlighterPreview: () => JSX.Element;
 export declare const MultiHighlighterWithCustomColors: () => JSX.Element;
+export declare const MultiHighlighterInsideIgnore: () => JSX.Element;
+export declare const MultiHighlighterWithRule: () => JSX.Element;

package/dist/multi-highlighter/multi-highlighter.composition.js

@@ -3,13 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiHighlighterWithCustomColors = exports.MultiHighlighterPreview = void 0;
+exports.MultiHighlighterWithRule = exports.MultiHighlighterInsideIgnore = exports.MultiHighlighterWithCustomColors = exports.MultiHighlighterPreview = void 0;
 const react_1 = __importDefault(require("react"));
 // import { EnterpriseOffering } from '@teambit/evangelist.pages.enterprise-offering';
 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 multi_highlighter_1 = require("./multi-highlighter");
 const MultiHighlighterPreview = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { style: { padding: 40 } },
+    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { style: { padding: 40, minWidth: 200 } },
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
@@ -18,7 +19,7 @@ const MultiHighlighterPreview = () => {
 };
 exports.MultiHighlighterPreview = MultiHighlighterPreview;
 const MultiHighlighterWithCustomColors = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { style: { padding: 40, color: 'yellow' }, bgColor: "cornflowerblue", bgColorHover: "blue", bgColorActive: "DarkSlateBlue" },
+    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { style: { padding: 40, minWidth: 200, color: 'yellow' }, bgColor: "cornflowerblue", bgColorHover: "blue", bgColorActive: "DarkSlateBlue" },
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
@@ -26,6 +27,36 @@ const MultiHighlighterWithCustomColors = () => {
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "also here")));
 };
 exports.MultiHighlighterWithCustomColors = MultiHighlighterWithCustomColors;
+const MultiHighlighterInsideIgnore = () => {
+    return (react_1.default.createElement(ignore_highlighter_1.ExcludeHighlighter, null,
+        react_1.default.createElement(multi_highlighter_1.MultiHighlighter, null,
+            "Multi Highlighter should still work when inside ",
+            react_1.default.createElement("code", null, '<ExcludeHighlighter>'),
+            react_1.default.createElement("br", null),
+            "It should only skip exclusion zones inside of it.",
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "also here"))));
+};
+exports.MultiHighlighterInsideIgnore = MultiHighlighterInsideIgnore;
+const MultiHighlighterWithRule = () => {
+    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { rule: "#someSubTree *" },
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "no highlighter"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("div", { id: "someSubTree" },
+            react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "this will be highlighted"))));
+};
+exports.MultiHighlighterWithRule = MultiHighlighterWithRule;
 // export const HighlightingAllElementsInTheEnterprisePage = () => {
 //   return (
 //     <MultiHighlighter>

package/dist/multi-highlighter/multi-highlighter.composition.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-highlighter.composition.js","sourceRoot":"","sources":["../../multi-highlighter/multi-highlighter.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAAsF;AACtF,oJAA8G;AAC9G,2DAAuD;AAEhD,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,OAAO,CACL,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QACtC,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CAC3C,CACpB,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,uBAAuB,2BAUlC;AAEK,MAAM,gCAAgC,GAAG,GAAG,EAAE;IACnD,OAAO,CACL,8BAAC,oCAAgB,IACf,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EACvC,OAAO,EAAC,gBAAgB,EACxB,YAAY,EAAC,MAAM,EACnB,aAAa,EAAC,eAAe;QAE7B,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CAC3C,CACpB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,gCAAgC,oCAe3C;AAEF,oEAAoE;AACpE,aAAa;AACb,yBAAyB;AACzB,uDAAuD;AACvD,0BAA0B;AAC1B,OAAO;AACP,KAAK"}
+{"version":3,"file":"multi-highlighter.composition.js","sourceRoot":"","sources":["../../multi-highlighter/multi-highlighter.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAAsF;AACtF,oJAA8G;AAC9G,8DAA2D;AAC3D,2DAAuD;AAEhD,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,OAAO,CACL,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QACrD,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CAC3C,CACpB,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,uBAAuB,2BAUlC;AAEK,MAAM,gCAAgC,GAAG,GAAG,EAAE;IACnD,OAAO,CACL,8BAAC,oCAAgB,IACf,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EACtD,OAAO,EAAC,gBAAgB,EACxB,YAAY,EAAC,MAAM,EACnB,aAAa,EAAC,eAAe;QAE7B,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CAC3C,CACpB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,gCAAgC,oCAe3C;AAEK,MAAM,4BAA4B,GAAG,GAAG,EAAE;IAC/C,OAAO,CACL,8BAAC,uCAAkB;QACjB,8BAAC,oCAAgB;;YACiC,4CAAO,sBAAsB,CAAQ;YACrF,yCAAM;;YAEN,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,qBAAqC;YAC7D,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,oBAAoC,CAC3C,CACA,CACtB,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,4BAA4B,gCAkBvC;AAEK,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,OAAO,CACL,8BAAC,oCAAgB,IAAC,IAAI,EAAC,gBAAgB;QACrC,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,uCAAK,EAAE,EAAC,aAAa;YACnB,8BAAC,oFAAuB,mCAAmD,CACvE,CACW,CACpB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,wBAAwB,4BAenC;AAEF,oEAAoE;AACpE,aAAa;AACb,yBAAyB;AACzB,uDAAuD;AACvD,0BAA0B;AAC1B,OAAO;AACP,KAAK"}

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

@@ -1,15 +1,3 @@
-import React from 'react';
-import { ElementHighlighterProps } from '@teambit/react.ui.component-highlighter';
-export interface MultiHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
-    disabled?: boolean;
-    /**
-     * continually update highlighter position to match dom elements as they move. Use with caution, might be slow
-     * @default false
-     */
-    watchMotion?: boolean;
-    bgColor?: string;
-    bgColorHover?: string;
-    bgColorActive?: string;
-    highlighterOptions?: ElementHighlighterProps;
-}
-export declare function MultiHighlighter({ children, disabled, watchMotion, style, bgColor, bgColorActive, bgColorHover, highlighterOptions, ...rest }: MultiHighlighterProps): JSX.Element;
+import { HybridHighlighterProps } from '../hybrid-highligher';
+export declare type MultiHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
+export declare function MultiHighlighter({ watchMotion, ...props }: MultiHighlighterProps): JSX.Element;

package/dist/multi-highlighter/multi-highlighter.js

@@ -1,23 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -34,51 +15,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiHighlighter = void 0;
-const react_1 = __importStar(require("react"));
-const get_xpath_1 = __importDefault(require("get-xpath"));
-const react_ui_component_highlighter_1 = require("@teambit/react.ui.component-highlighter");
-const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-react");
-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");
-// TODO - reuse selector from @teambit/react.ui.component-highlighter
-const allExceptHighlighterQuery = `:not(${ignore_highlighter_1.excludeHighlighterSelector}, ${ignore_highlighter_1.excludeHighlighterSelector} *)`;
+const react_1 = __importDefault(require("react"));
+const hybrid_highligher_1 = require("../hybrid-highligher");
 function MultiHighlighter(_a) {
-    var { children, disabled, watchMotion = false, style, bgColor, bgColorActive, bgColorHover, highlighterOptions } = _a, rest = __rest(_a, ["children", "disabled", "watchMotion", "style", "bgColor", "bgColorActive", "bgColorHover", "highlighterOptions"]);
-    const ref = (0, react_1.createRef)();
-    const [targets, setTargets] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
-        if (disabled) {
-            setTargets({});
-            return;
-        }
-        const { current } = ref;
-        if (!current)
-            return;
-        // select all non-highlighter elements
-        const allElements = Array.from(current.querySelectorAll(allExceptHighlighterQuery));
-        // converge on the root element of components
-        const rootElements = allElements.map(react_modules_dom_to_react_1.toRootElement).filter((x) => !!x);
-        // deduplicate
-        const uniqueRoots = new Set(rootElements);
-        const nextTargets = {};
-        uniqueRoots.forEach((element) => {
-            const comp = (0, react_modules_dom_to_react_1.domToReact)(element);
-            if (!element || !(0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(comp))
-                return;
-            const key = (0, get_xpath_1.default)(element);
-            // eslint-disable-next-line no-underscore-dangle
-            nextTargets[key] = { element, id: comp.__bit_component.id };
-        });
-        setTargets(nextTargets);
-    }, [disabled]);
-    const colors = {
-        '--bit-highlighter-color': bgColor,
-        '--bit-highlighter-color-hover': bgColorHover,
-        '--bit-highlighter-color-active': bgColorActive,
-    };
-    return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, { style: Object.assign(Object.assign({}, colors), style) }),
-        children,
-        Object.entries(targets).map(([key, target]) => (react_1.default.createElement(react_ui_component_highlighter_1.ElementHighlighter, Object.assign({ key: key, target: target, watchMotion: watchMotion }, highlighterOptions))))));
+    var { watchMotion = false } = _a, props = __rest(_a, ["watchMotion"]);
+    return react_1.default.createElement(hybrid_highligher_1.HybridHighlighter, Object.assign({}, props, { mode: 'allChildren', watchMotion: watchMotion }));
 }
 exports.MultiHighlighter = MultiHighlighter;
 //# sourceMappingURL=multi-highlighter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"multi-highlighter.js","sourceRoot":"","sources":["../../multi-highlighter/multi-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8D;AAC9D,0DAAiC;AACjC,4FAAuH;AACvH,oFAAgF;AAChF,oJAAuG;AACvG,8DAAmE;AAEnE,qEAAqE;AACrE,MAAM,yBAAyB,GAAG,QAAQ,+CAA0B,KAAK,+CAA0B,KAAK,CAAC;AAkBzG,SAAgB,gBAAgB,CAAC,EAUT;QAVS,EAC/B,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,KAAK,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,kBAAkB,OAEI,EADnB,IAAI,cATwB,kHAUhC,CADQ;IAEP,MAAM,GAAG,GAAG,IAAA,iBAAS,GAAkB,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAkC,EAAE,CAAC,CAAC;IAE5E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE;YACZ,UAAU,CAAC,EAAE,CAAC,CAAC;YACf,OAAO;SACR;QAED,MAAM,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC;QACxB,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,sCAAsC;QACtC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAc,yBAAyB,CAAC,CAAC,CAAC;QAEjG,6CAA6C;QAC7C,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,0CAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvE,cAAc;QACd,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC;QAE1C,MAAM,WAAW,GAAoC,EAAE,CAAC;QACxD,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC9B,MAAM,IAAI,GAAG,IAAA,uCAAU,EAAC,OAAO,CAAC,CAAC;YACjC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAA,6EAAgB,EAAC,IAAI,CAAC;gBAAE,OAAO;YAEhD,MAAM,GAAG,GAAG,IAAA,mBAAQ,EAAC,OAAO,CAAC,CAAC;YAC9B,gDAAgD;YAChD,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC;QAC9D,CAAC,CAAC,CAAC;QAEH,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,MAAM,GAAG;QACb,yBAAyB,EAAE,OAAO;QAClC,+BAA+B,EAAE,YAAY;QAC7C,gCAAgC,EAAE,aAAa;KAChD,CAAC;IAEF,OAAO,CACL,qDAAK,GAAG,EAAE,GAAG,IAAM,IAAI,IAAE,KAAK,kCAAO,MAAM,GAAK,KAAK;QAClD,QAAQ;QACR,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC9C,8BAAC,mDAAkB,kBAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,IAAM,kBAAkB,EAAI,CACnG,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AA1DD,4CA0DC"}
+{"version":3,"file":"multi-highlighter.js","sourceRoot":"","sources":["../../multi-highlighter/multi-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,4DAAiF;AAIjF,SAAgB,gBAAgB,CAAC,EAAwD;QAAxD,EAAE,WAAW,GAAG,KAAK,OAAmC,EAA9B,KAAK,cAA/B,eAAiC,CAAF;IAC9D,OAAO,8BAAC,qCAAiB,oBAAK,KAAK,IAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,IAAI,CAAC;AACzF,CAAC;AAFD,4CAEC"}

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

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { HighlightTarget } from '../element-highlighter';
+import { MatchRule } from '../rule-matcher';
+declare type useMultiHighlighterProps = {
+    onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
+    disabled?: boolean;
+    scopeRef: RefObject<HTMLElement>;
+    scopeClass?: string;
+    /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
+    rule?: MatchRule;
+};
+export declare function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector, rule, }: useMultiHighlighterProps): void;
+export {};

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

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMultiHighlighter = void 0;
+const react_1 = require("react");
+const get_xpath_1 = __importDefault(require("get-xpath"));
+const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-react");
+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");
+function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector = '', rule, }) {
+    (0, react_1.useEffect)(() => {
+        const nextTargets = {};
+        const scopeElement = scopeRef.current;
+        if (!scopeElement || disabled)
+            return;
+        // select all elements (except excluded)
+        let allElements = Array.from(scopeElement.querySelectorAll(targetsSelector(`.${scopeSelector}`)));
+        // apply rule filtering
+        if (rule)
+            allElements = allElements.filter((elem) => (0, rule_matcher_1.ruleMatcher)(elem, rule));
+        // seek the root element:
+        const rootElements = allElements.map(react_modules_dom_to_react_1.toRootElement).filter((x) => !!x);
+        // deduplicate
+        const uniqueRoots = new Set(rootElements);
+        uniqueRoots.forEach((element) => {
+            const comp = (0, react_modules_dom_to_react_1.domToReact)(element);
+            if (!element || !(0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(comp))
+                return;
+            const key = (0, get_xpath_1.default)(element);
+            const meta = comp[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField];
+            const compId = meta[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaProperties.componentId];
+            const link = meta[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaProperties.homepageUrl];
+            const local = meta[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaProperties.isExported] === false;
+            nextTargets[key] = { element, id: compId, link, local };
+        });
+        onChange(nextTargets);
+    }, [disabled, scopeSelector]);
+}
+exports.useMultiHighlighter = useMultiHighlighter;
+function targetsSelector(
+/**
+ * the scope in which to consider the exclude selector.
+ * The `:scope` modifier is appropriate, but is not supported in older browsers.
+ */
+scopeSelector = ':scope') {
+    return `:not(${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector}, ${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector} *)`;
+}
+//# sourceMappingURL=use-multi-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-multi-highlighter.js","sourceRoot":"","sources":["../../multi-highlighter/use-multi-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA6C;AAC7C,0DAAiC;AACjC,oFAAgF;AAChF,oJAI6E;AAE7E,8DAAmE;AACnE,kDAAyD;AAczD,SAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,aAAa,GAAG,EAAE,EAC9B,IAAI,GACqB;IACzB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAoC,EAAE,CAAC;QACxD,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,YAAY,IAAI,QAAQ;YAAE,OAAO;QAEtC,wCAAwC;QACxC,IAAI,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAc,eAAe,CAAC,IAAI,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/G,uBAAuB;QACvB,IAAI,IAAI;YAAE,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAA,0BAAW,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9E,yBAAyB;QACzB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,0CAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvE,cAAc;QACd,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC;QAE1C,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC9B,MAAM,IAAI,GAAG,IAAA,uCAAU,EAAC,OAAO,CAAC,CAAC;YACjC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAA,6EAAgB,EAAC,IAAI,CAAC;gBAAE,OAAO;YAEhD,MAAM,GAAG,GAAG,IAAA,mBAAQ,EAAC,OAAO,CAAC,CAAC;YAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,+EAAkB,CAAC,CAAC;YACtC,MAAM,MAAM,GAAG,IAAI,CAAC,oFAAuB,CAAC,WAAW,CAAC,CAAC;YACzD,MAAM,IAAI,GAAG,IAAI,CAAC,oFAAuB,CAAC,WAAW,CAAC,CAAC;YACvD,MAAM,KAAK,GAAG,IAAI,CAAC,oFAAuB,CAAC,UAAU,CAAC,KAAK,KAAK,CAAC;YACjE,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;AAChC,CAAC;AAnCD,kDAmCC;AAED,SAAS,eAAe;AACtB;;;GAGG;AACH,aAAa,GAAG,QAAQ;IAExB,OAAO,QAAQ,aAAa,IAAI,+CAA0B,KAAK,aAAa,IAAI,+CAA0B,KAAK,CAAC;AAClH,CAAC"}

package/dist/rule-matcher.d.ts

@@ -0,0 +1,2 @@
+export declare type MatchRule = undefined | string | ((element: HTMLElement) => boolean);
+export declare function ruleMatcher(element: HTMLElement, rule: MatchRule): boolean;

package/dist/rule-matcher.js

@@ -0,0 +1,15 @@
+"use strict";
+// in the future, we will add more options here, like include / exclude objects.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ruleMatcher = void 0;
+function ruleMatcher(element, rule) {
+    if (typeof rule === 'string') {
+        return element.matches(rule);
+    }
+    if (typeof rule === 'function') {
+        return rule(element);
+    }
+    return true;
+}
+exports.ruleMatcher = ruleMatcher;
+//# sourceMappingURL=rule-matcher.js.map

package/dist/rule-matcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rule-matcher.js","sourceRoot":"","sources":["../rule-matcher.tsx"],"names":[],"mappings":";AAAA,gFAAgF;;;AAIhF,SAAgB,WAAW,CAAC,OAAoB,EAAE,IAAe;IAC/D,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC;KACtB;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAVD,kCAUC"}

package/{component-highlighter/hover-highlighter → hover-highlighter}/hover-highlighter.compositions.tsx

@@ -6,14 +6,16 @@ export const ShowWhenHovering = () => {
   const [disabled, setDisabled] = useState<boolean>(false);
 
   return (
-    <div style={{ padding: '16px 80px 32px 16px' }}>
+    <div style={{ padding: '16px 50px 32px 16px', minWidth: 300 }}>
       <HoverHighlighter style={{ padding: 16 }} disabled={disabled}>
         <div>
-          some div
           <br />
           <div>
             <IconButton onClick={() => setDisabled((x) => !x)}>Hover here</IconButton>
           </div>
+          <div>
+            {disabled ? 'X' : '✓'} highlighter is {disabled ? 'disabled' : 'enabled'}
+          </div>
         </div>
       </HoverHighlighter>
     </div>

package/hover-highlighter/hover-highlighter.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HybridHighlighter, HybridHighlighterProps } from '../hybrid-highligher';
+
+export type HoverHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
+
+export function HoverHighlighter({ ...props }: HoverHighlighterProps) {
+  return <HybridHighlighter {...props} mode={'hover'} />;
+}

package/hover-highlighter/index.ts

@@ -0,0 +1,5 @@
+export { useHoverHighlighter } from './use-hover-highlighter';
+export type { useHoverHighlighterOptions } from './use-hover-highlighter';
+
+export { HoverHighlighter } from './hover-highlighter';
+export type { HoverHighlighterProps } from './hover-highlighter';

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

@@ -0,0 +1,93 @@
+import React, { useEffect } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
+import { useHoverSelection } from '@teambit/react.ui.hover-selector';
+import { hasComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
+import { excludeHighlighterSelector } from '../ignore-highlighter';
+import { HighlightTarget } from '../element-highlighter';
+import { ruleMatcher, MatchRule } from '../rule-matcher';
+
+export type useHoverHighlighterOptions = {
+  debounceDuration: number;
+  scopeClass: string;
+  disabled?: boolean;
+  rule?: MatchRule;
+};
+
+/** fires onChange when targeting a new component */
+export function useHoverHighlighter<T extends HTMLElement = HTMLElement>(
+  onChange: (target?: HighlightTarget) => void,
+  props: React.HTMLAttributes<T> = {},
+  { debounceDuration, scopeClass, disabled, rule }: useHoverHighlighterOptions
+) {
+  const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule });
+
+  const handlers = useHoverSelection(disabled ? undefined : handleElement, props);
+
+  return handlers;
+}
+
+type useHoverHighlighterProps = {
+  onChange: (target?: HighlightTarget) => void;
+  scopeClass?: string;
+  debounceDuration?: number;
+  disabled?: boolean;
+  rule?: MatchRule;
+};
+
+function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled, rule }: useHoverHighlighterProps) {
+  // debounced method is ref'ed, so no need for useCallback
+  const _handleElement = (element: HTMLElement | null) => {
+    // clear highlighter at the edges:
+    if (!element || element.hasAttribute('data-nullify-component-highlight')) {
+      onChange(undefined);
+      return;
+    }
+
+    // skip DOM trees having 'data-ignore-component-highlight'
+    if (element.closest(`.${scopeClass} ${excludeHighlighterSelector}`)) return;
+
+    const result = bubbleToBitComponent(element, rule ? (current) => ruleMatcher(current, rule) : undefined);
+    if (!result) return;
+
+    onChange({
+      element: result.element,
+      id: result.meta.id,
+      scopeLink: undefined,
+      link: result.meta.homepage,
+      local: result.meta.exported === false,
+    });
+  };
+
+  const handleElement = useDebouncedCallback(_handleElement, debounceDuration);
+
+  // clear when disabling
+  useEffect(() => {
+    if (disabled) handleElement.cancel();
+  }, [disabled, handleElement]);
+
+  return { handleElement };
+}
+
+/** go up the dom tree until reaching a react bit component */
+function bubbleToBitComponent(element: HTMLElement | null, filter?: (elem: HTMLElement) => boolean) {
+  for (let current = element; current; current = current.parentElement) {
+    current = toRootElement(current);
+    if (!current || filter?.(current) === false) return undefined;
+
+    const component = domToReact(current);
+
+    if (hasComponentMeta(component)) {
+      const meta = component.__bit_component;
+
+      return {
+        element: current,
+        component,
+        meta,
+      };
+    }
+  }
+
+  return undefined;
+}