@teambit/react.ui.component-highlighter 0.0.491 → 0.0.492

package/component-highlighter.docs.md

@@ -153,15 +153,6 @@ For example:
 </ComponentHighlighter>
 ```
 
-You can also filter by component id, using the `componentRule` prop:
-
-```tsx
-<ComponentHighlighter componentRule="teambit.design/ui/icon-button">
-  <Paragraph>will not be highlighted</Paragraph>
-  <Button>this will be highlighted</Button>
-</ComponentHighlighter>
-```
-
 ## Customization
 
 Use these CSS variables to edit the highlighter color
@@ -198,4 +189,4 @@ const classes = {
 ```
 
 You can control the size using regular `font-size`.  
-Keep in mind that the label can be either two elements (when using component id), and a single element (for other texts)
+Keep in mind that the label can be either two elements (when using component id), and a single element (for other texts)

package/dist/component-highlighter.docs.md

@@ -153,15 +153,6 @@ For example:
 </ComponentHighlighter>
 ```
 
-You can also filter by component id, using the `componentRule` prop:
-
-```tsx
-<ComponentHighlighter componentRule="teambit.design/ui/icon-button">
-  <Paragraph>will not be highlighted</Paragraph>
-  <Button>this will be highlighted</Button>
-</ComponentHighlighter>
-```
-
 ## Customization
 
 Use these CSS variables to edit the highlighter color
@@ -198,4 +189,4 @@ const classes = {
 ```
 
 You can control the size using regular `font-size`.  
-Keep in mind that the label can be either two elements (when using component id), and a single element (for other texts)
+Keep in mind that the label can be either two elements (when using component id), and a single element (for other texts)

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

@@ -1,17 +1,14 @@
 import React from 'react';
 import { HighlightTarget } from '../element-highlighter';
-import { MatchRule, ComponentMatchRule } from '../rule-matcher';
+import { MatchRule } from '../rule-matcher';
 export declare type useHoverHighlighterOptions = {
     debounceDuration: number;
     scopeClass: string;
     disabled?: boolean;
-    /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
     rule?: MatchRule;
-    /** filter targets by this component match rule */
-    componentRule?: ComponentMatchRule;
 };
 /** fires onChange when targeting a new component */
-export declare function useHoverHighlighter<T extends HTMLElement = HTMLElement>(onChange: (target?: HighlightTarget) => void, props: React.HTMLAttributes<T>, { debounceDuration, scopeClass, disabled, rule, componentRule }: useHoverHighlighterOptions): {
+export declare function useHoverHighlighter<T extends HTMLElement = HTMLElement>(onChange: (target?: HighlightTarget) => void, props: React.HTMLAttributes<T>, { debounceDuration, scopeClass, disabled, rule }: useHoverHighlighterOptions): {
     onMouseOver: (event: React.MouseEvent<T, MouseEvent>) => void;
     onMouseLeave: (event: React.MouseEvent<T, MouseEvent>) => void;
 } | {

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

@@ -9,13 +9,13 @@ const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@t
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const rule_matcher_1 = require("../rule-matcher");
 /** 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 });
+function useHoverHighlighter(onChange, props = {}, { debounceDuration, scopeClass, disabled, rule }) {
+    const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule });
     const handlers = (0, react_ui_hover_selector_1.useHoverSelection)(disabled ? undefined : handleElement, props);
     return handlers;
 }
 exports.useHoverHighlighter = useHoverHighlighter;
-function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled, rule, componentRule, }) {
+function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled, rule }) {
     // debounced method is ref'ed, so no need for useCallback
     const _handleElement = (element) => {
         // clear highlighter at the edges:
@@ -26,7 +26,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 = bubbleToBitComponent(element, rule ? (current) => (0, rule_matcher_1.ruleMatcher)(current, rule) : undefined);
         if (!result)
             return;
         onChange({
@@ -46,22 +46,19 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
     return { handleElement };
 }
 /** go up the dom tree until reaching a react bit component */
-function bubbleToBitComponent(element, elementRule, componentRule) {
+function bubbleToBitComponent(element, filter) {
     for (let current = element; current; current = current.parentElement) {
         current = (0, react_modules_dom_to_react_1.toRootElement)(current);
-        if (!current)
+        if (!current || (filter === null || filter === void 0 ? void 0 : filter(current)) === false)
             return undefined;
-        if ((0, rule_matcher_1.ruleMatcher)(current, elementRule)) {
-            const component = (0, react_modules_dom_to_react_1.domToReact)(current);
-            if ((0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(component)) {
-                const meta = component.__bit_component;
-                if ((0, rule_matcher_1.componentRuleMatcher)({ meta }, componentRule))
-                    return {
-                        element: current,
-                        component,
-                        meta,
-                    };
-            }
+        const component = (0, react_modules_dom_to_react_1.domToReact)(current);
+        if ((0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(component)) {
+            const meta = component.__bit_component;
+            return {
+                element: current,
+                component,
+                meta,
+            };
         }
     }
     return undefined;

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":"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"}
+{"version":3,"file":"use-hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/use-hover-highlighter.tsx"],"names":[],"mappings":";;;AAAA,iCAAyC;AACzC,+CAAoD;AACpD,oFAAgF;AAChF,8EAAqE;AACrE,oJAAuG;AAEvG,8DAAmE;AAEnE,kDAAyD;AASzD,oDAAoD;AACpD,SAAgB,mBAAmB,CACjC,QAA4C,EAC5C,QAAiC,EAAE,EACnC,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAA8B;IAE5E,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAEtG,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;AAUD,SAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,GAAG,EAAE,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,EAA4B;IAChH,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,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAA,0BAAW,EAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACzG,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,QAAQ,CAAC;YACP,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;YAClB,SAAS,EAAE,SAAS;YACpB,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ;YAC1B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,KAAK,KAAK;SACtC,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,CAAC,OAA2B,EAAE,MAAuC;IAChG,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,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,OAAO,CAAC,MAAK,KAAK;YAAE,OAAO,SAAS,CAAC;QAE9D,MAAM,SAAS,GAAG,IAAA,uCAAU,EAAC,OAAO,CAAC,CAAC;QAEtC,IAAI,IAAA,6EAAgB,EAAC,SAAS,CAAC,EAAE;YAC/B,MAAM,IAAI,GAAG,SAAS,CAAC,eAAe,CAAC;YAEvC,OAAO;gBACL,OAAO,EAAE,OAAO;gBAChB,SAAS;gBACT,IAAI;aACL,CAAC;SACH;KACF;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}

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

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
 import { Placement, HighlightClasses } from '../element-highlighter';
-import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
+import type { MatchRule } from '../rule-matcher';
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
     /** stop all highlighting and drop listeners */
     disabled?: boolean;
@@ -20,7 +20,6 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
     watchMotion?: boolean;
     /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
     rule?: MatchRule;
-    componentRule?: ComponentMatchRule;
     /** set the behavior of the highlighter.
      * `disabled` - stops highlighting.
      * `allChildren` - highlights all components rendered under children
@@ -32,4 +31,4 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
     bgColorActive?: string;
 }
 /** automatically highlight components on hover */
-export declare function HybridHighlighter({ disabled, mode, debounceSelection, watchMotion, placement, rule, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children, ...rest }: HybridHighlighterProps): JSX.Element;
+export declare function HybridHighlighter({ disabled, mode, debounceSelection, watchMotion, placement, rule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children, ...rest }: HybridHighlighterProps): JSX.Element;

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

@@ -42,7 +42,7 @@ 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, componentRule, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children } = _a, rest = __rest(_a, ["disabled", "mode", "debounceSelection", "watchMotion", "placement", "rule", "componentRule", "classes", "highlightStyle", "className", "style", "bgColor", "bgColorHover", "bgColorActive", "children"]);
+    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;
@@ -57,7 +57,6 @@ function HybridHighlighter(_a) {
         scopeClass,
         disabled: disabled || mode !== 'hover',
         rule,
-        componentRule
     });
     (0, use_multi_highlighter_1.useMultiHighlighter)({
         onChange: setTarget,
@@ -65,7 +64,6 @@ function HybridHighlighter(_a) {
         scopeClass,
         disabled: disabled || mode !== 'allChildren',
         rule,
-        componentRule
     });
     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 }),

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

@@ -1 +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;AAoCjF,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,2CAAmB,EAAC;QAClB,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-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/multi-highlighter/multi-highlighter.composition.d.ts

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

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

@@ -3,11 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiHighlighterWithComponentRule = exports.MultiHighlighterWithRule = exports.MultiHighlighterInsideIgnore = 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 design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const multi_highlighter_1 = require("./multi-highlighter");
 const MultiHighlighterPreview = () => {
@@ -46,7 +45,7 @@ const MultiHighlighterInsideIgnore = () => {
 };
 exports.MultiHighlighterInsideIgnore = MultiHighlighterInsideIgnore;
 const MultiHighlighterWithRule = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { rule: "#someSubTree *", style: { minWidth: 200 } },
+    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),
@@ -55,21 +54,9 @@ const MultiHighlighterWithRule = () => {
         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, "highlighted because of element rule"))));
+            react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "this will be highlighted"))));
 };
 exports.MultiHighlighterWithRule = MultiHighlighterWithRule;
-const MultiHighlighterWithComponentRule = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { componentRule: "teambit.design/ui/icon-button" },
-        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(design_ui_icon_button_1.IconButton, null, "highlighted because of component rule")));
-};
-exports.MultiHighlighterWithComponentRule = MultiHighlighterWithComponentRule;
 // 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,0EAA4D;AAC5D,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,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QAC9D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,uCAAK,EAAE,EAAC,aAAa;YACnB,8BAAC,oFAAuB,8CAA8D,CAClF,CACW,CACpB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,wBAAwB,4BAenC;AAEK,MAAM,iCAAiC,GAAG,GAAG,EAAE;IACpD,OAAO,CACL,8BAAC,oCAAgB,IAAC,aAAa,EAAC,+BAA+B;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,gDAAmD,CAC7C,CACpB,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,iCAAiC,qCAa5C;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/use-multi-highlighter.d.ts

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

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

@@ -10,7 +10,7 @@ const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-reac
 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, componentRule, }) {
+function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector = '', rule, }) {
     (0, react_1.useEffect)(() => {
         const nextTargets = {};
         const scopeElement = scopeRef.current;
@@ -29,10 +29,8 @@ function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSe
             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 meta = comp[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField];
-            if (!(0, rule_matcher_1.componentRuleMatcher)({ meta }, componentRule))
-                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;

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

@@ -1 +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,kDAAmG;AAgBnG,SAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,aAAa,GAAG,EAAE,EAC9B,IAAI,EACJ,aAAa,GACY;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;YAChD,MAAM,IAAI,GAAG,IAAI,CAAC,+EAAkB,CAAC,CAAC;YACtC,IAAI,CAAC,IAAA,mCAAoB,EAAC,EAAE,IAAI,EAAE,EAAE,aAAa,CAAC;gBAAE,OAAO;YAE3D,MAAM,GAAG,GAAG,IAAA,mBAAQ,EAAC,OAAO,CAAC,CAAC;YAC9B,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;AArCD,kDAqCC;AAED,SAAS,eAAe;AACtB;;;GAGG;AACH,aAAa,GAAG,QAAQ;IAExB,OAAO,QAAQ,aAAa,IAAI,+CAA0B,KAAK,aAAa,IAAI,+CAA0B,KAAK,CAAC;AAClH,CAAC"}
+{"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

@@ -1,8 +1,2 @@
-import { ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-export declare type ComponentMatchTarget = {
-    meta: ComponentMeta;
-};
 export declare type MatchRule = undefined | string | ((element: HTMLElement) => boolean);
-export declare type ComponentMatchRule = undefined | string | string[] | ((target: ComponentMatchTarget) => boolean);
 export declare function ruleMatcher(element: HTMLElement, rule: MatchRule): boolean;
-export declare function componentRuleMatcher(target: ComponentMatchTarget, rule: ComponentMatchRule): boolean;

package/dist/rule-matcher.js

@@ -1,7 +1,7 @@
 "use strict";
+// in the future, we will add more options here, like include / exclude objects.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentRuleMatcher = exports.ruleMatcher = void 0;
-const component_id_1 = require("@teambit/component-id");
+exports.ruleMatcher = void 0;
 function ruleMatcher(element, rule) {
     if (typeof rule === 'string') {
         return element.matches(rule);
@@ -12,21 +12,4 @@ function ruleMatcher(element, rule) {
     return true;
 }
 exports.ruleMatcher = ruleMatcher;
-function componentRuleMatcher(target, rule) {
-    if (typeof rule === 'string') {
-        const targetCmpId = component_id_1.ComponentID.tryFromString(target.meta.id);
-        const ruleCmpId = component_id_1.ComponentID.tryFromString(rule);
-        return component_id_1.ComponentID.isEqual(ruleCmpId, targetCmpId, { ignoreVersion: true });
-    }
-    if (Array.isArray(rule)) {
-        const targetCmpId = component_id_1.ComponentID.tryFromString(target.meta.id);
-        const ruleCmpIds = rule.map((x) => component_id_1.ComponentID.tryFromString(x));
-        return ruleCmpIds.some((cmdId) => component_id_1.ComponentID.isEqual(targetCmpId, cmdId, { ignoreVersion: true }));
-    }
-    if (typeof rule === 'function') {
-        return rule(target);
-    }
-    return true;
-}
-exports.componentRuleMatcher = componentRuleMatcher;
 //# sourceMappingURL=rule-matcher.js.map

package/dist/rule-matcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"rule-matcher.js","sourceRoot":"","sources":["../rule-matcher.tsx"],"names":[],"mappings":";;;AAAA,wDAAoD;AAQpD,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;AAED,SAAgB,oBAAoB,CAAC,MAA4B,EAAE,IAAwB;IACzF,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,MAAM,WAAW,GAAG,0BAAW,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9D,MAAM,SAAS,GAAG,0BAAW,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAElD,OAAO,0BAAW,CAAC,OAAO,CAAC,SAAS,EAAE,WAAW,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;KAC7E;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACvB,MAAM,WAAW,GAAG,0BAAW,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,0BAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QAEjE,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,0BAAW,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;KACrG;IAED,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC;KACrB;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AApBD,oDAoBC"}
+{"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/hover-highlighter/use-hover-highlighter.tsx

@@ -6,25 +6,22 @@ import { hasComponentMeta } from '@teambit/react.ui.highlighter.component-metada
 
 import { excludeHighlighterSelector } from '../ignore-highlighter';
 import { HighlightTarget } from '../element-highlighter';
-import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
+import { ruleMatcher, MatchRule } from '../rule-matcher';
 
 export type useHoverHighlighterOptions = {
   debounceDuration: number;
   scopeClass: string;
   disabled?: boolean;
-  /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
   rule?: MatchRule;
-  /** filter targets by this component match rule */
-  componentRule?: ComponentMatchRule;
 };
 
 /** 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, componentRule }: useHoverHighlighterOptions
+  { debounceDuration, scopeClass, disabled, rule }: useHoverHighlighterOptions
 ) {
-  const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule, componentRule });
+  const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule });
 
   const handlers = useHoverSelection(disabled ? undefined : handleElement, props);
 
@@ -37,17 +34,9 @@ type useHoverHighlighterProps = {
   debounceDuration?: number;
   disabled?: boolean;
   rule?: MatchRule;
-  componentRule?: ComponentMatchRule;
 };
 
-function useHoverHandler({
-  onChange,
-  scopeClass = '',
-  debounceDuration,
-  disabled,
-  rule,
-  componentRule,
-}: useHoverHighlighterProps) {
+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:
@@ -59,7 +48,7 @@ function useHoverHandler({
     // skip DOM trees having 'data-ignore-component-highlight'
     if (element.closest(`.${scopeClass} ${excludeHighlighterSelector}`)) return;
 
-    const result = bubbleToBitComponent(element, rule, componentRule);
+    const result = bubbleToBitComponent(element, rule ? (current) => ruleMatcher(current, rule) : undefined);
     if (!result) return;
 
     onChange({
@@ -82,29 +71,23 @@ function useHoverHandler({
 }
 
 /** go up the dom tree until reaching a react bit component */
-function bubbleToBitComponent(
-  element: HTMLElement | null,
-  elementRule?: MatchRule,
-  componentRule?: ComponentMatchRule
-) {
+function bubbleToBitComponent(element: HTMLElement | null, filter?: (elem: HTMLElement) => boolean) {
   for (let current = element; current; current = current.parentElement) {
     current = toRootElement(current);
-    if (!current) return undefined;
-    if (ruleMatcher(current, elementRule)) {
-      const component = domToReact(current);
-
-      if (hasComponentMeta(component)) {
-        const meta = component.__bit_component;
-
-        if (componentRuleMatcher({ meta }, componentRule))
-          return {
-            element: current,
-            component,
-            meta,
-          };
-      }
+    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;
-}
+}

package/hybrid-highligher/hybrid-highlighter.tsx

@@ -5,7 +5,7 @@ import { v4 } from 'uuid';
 import { useHoverHighlighter } from '../hover-highlighter';
 import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../element-highlighter';
 import { useMultiHighlighter } from '../multi-highlighter/use-multi-highlighter';
-import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
+import type { MatchRule } from '../rule-matcher';
 
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
   /** stop all highlighting and drop listeners */
@@ -27,7 +27,6 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
 
   /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
   rule?: MatchRule;
-  componentRule?: ComponentMatchRule;
 
   /** set the behavior of the highlighter.
    * `disabled` - stops highlighting.
@@ -48,7 +47,6 @@ export function HybridHighlighter({
   watchMotion = true,
   placement,
   rule,
-  componentRule,
 
   classes,
   highlightStyle,
@@ -78,7 +76,6 @@ export function HybridHighlighter({
       scopeClass,
       disabled: disabled || mode !== 'hover',
       rule,
-      componentRule
     }
   );
 
@@ -88,7 +85,6 @@ export function HybridHighlighter({
     scopeClass,
     disabled: disabled || mode !== 'allChildren',
     rule,
-    componentRule
   });
 
   const _styles = useMemo(
@@ -127,4 +123,4 @@ export function HybridHighlighter({
       ))}
     </div>
   );
-}
+}

package/multi-highlighter/multi-highlighter.composition.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 // import { EnterpriseOffering } from '@teambit/evangelist.pages.enterprise-offering';
 import { MockedComponentWithMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-import { IconButton } from '@teambit/design.ui.icon-button';
 import { ExcludeHighlighter } from '../ignore-highlighter';
 import { MultiHighlighter } from './multi-highlighter';
 
@@ -56,7 +55,7 @@ export const MultiHighlighterInsideIgnore = () => {
 
 export const MultiHighlighterWithRule = () => {
   return (
-    <MultiHighlighter rule="#someSubTree *" style={{ minWidth: 200 }}>
+    <MultiHighlighter rule="#someSubTree *">
       <br />
       <br />
       <br />
@@ -65,31 +64,16 @@ export const MultiHighlighterWithRule = () => {
       <br />
       <br />
       <div id="someSubTree">
-        <MockedComponentWithMeta>highlighted because of element rule</MockedComponentWithMeta>
+        <MockedComponentWithMeta>this will be highlighted</MockedComponentWithMeta>
       </div>
     </MultiHighlighter>
   );
 };
 
-export const MultiHighlighterWithComponentRule = () => {
-  return (
-    <MultiHighlighter componentRule="teambit.design/ui/icon-button">
-      <br />
-      <br />
-      <br />
-      <MockedComponentWithMeta>no highlighter</MockedComponentWithMeta>
-      <br />
-      <br />
-      <br />
-      <IconButton>highlighted because of component rule</IconButton>
-    </MultiHighlighter>
-  );
-};
-
 // export const HighlightingAllElementsInTheEnterprisePage = () => {
 //   return (
 //     <MultiHighlighter>
 //       <EnterpriseOffering style={{ height: 300 }} />
 //     </MultiHighlighter>
 //   );
-// };
+// };

package/multi-highlighter/use-multi-highlighter.tsx

@@ -8,7 +8,7 @@ import {
 } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import { HighlightTarget } from '../element-highlighter';
 import { excludeHighlighterSelector } from '../ignore-highlighter';
-import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
+import { ruleMatcher, MatchRule } from '../rule-matcher';
 
 type useMultiHighlighterProps = {
   onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
@@ -17,8 +17,6 @@ type useMultiHighlighterProps = {
   scopeClass?: string;
   /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
   rule?: MatchRule;
-  /** filter targets by this component match rule */
-  componentRule?: ComponentMatchRule;
 
   // /** automatically update when children update. Use with caution, might be slow */
   // watchDom?: boolean;
@@ -30,7 +28,6 @@ export function useMultiHighlighter({
   scopeRef,
   scopeClass: scopeSelector = '',
   rule,
-  componentRule,
 }: useMultiHighlighterProps) {
   useEffect(() => {
     const nextTargets: Record<string, HighlightTarget> = {};
@@ -49,10 +46,9 @@ export function useMultiHighlighter({
     uniqueRoots.forEach((element) => {
       const comp = domToReact(element);
       if (!element || !hasComponentMeta(comp)) return;
-      const meta = comp[componentMetaField];
-      if (!componentRuleMatcher({ meta }, componentRule)) return;
 
       const key = getXPath(element);
+      const meta = comp[componentMetaField];
       const compId = meta[componentMetaProperties.componentId];
       const link = meta[componentMetaProperties.homepageUrl];
       const local = meta[componentMetaProperties.isExported] === false;
@@ -71,4 +67,4 @@ function targetsSelector(
   scopeSelector = ':scope'
 ) {
   return `:not(${scopeSelector} ${excludeHighlighterSelector}, ${scopeSelector} ${excludeHighlighterSelector} *)`;
-}
+}

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.491",
+  "version": "0.0.492",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.491"
+    "version": "0.0.492"
   },
   "dependencies": {
     "classnames": "2.2.6",
-    "uuid": "3.4.0",
-    "use-debounce": "6.0.1",
     "@popperjs/core": "2.6.0",
     "react-popper": "2.2.4",
+    "uuid": "3.4.0",
+    "use-debounce": "6.0.1",
     "get-xpath": "3.0.1",
     "url-join": "4.0.1",
     "core-js": "^3.0.0",
@@ -21,11 +21,11 @@
     "@teambit/base-ui.utils.popper-js.resize-to-match-reference": "1.0.0",
     "@teambit/base-ui.surfaces.card": "1.0.1",
     "@teambit/base-ui.routing.native-link": "1.0.0",
-    "@teambit/component-id": "0.0.389",
-    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.10",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.477",
     "@teambit/react.modules.dom-to-react": "0.0.477",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.10",
     "@teambit/react.ui.hover-selector": "0.0.155",
+    "@teambit/component-id": "0.0.389",
     "@teambit/component.modules.component-url": "0.0.110"
   },
   "devDependencies": {

package/rule-matcher.tsx

@@ -1,10 +1,6 @@
-import { ComponentID } from '@teambit/component-id';
-import { ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-
-export type ComponentMatchTarget = { meta: ComponentMeta };
+// in the future, we will add more options here, like include / exclude objects.
 
 export type MatchRule = undefined | string | ((element: HTMLElement) => boolean);
-export type ComponentMatchRule = undefined | string | string[] | ((target: ComponentMatchTarget) => boolean);
 
 export function ruleMatcher(element: HTMLElement, rule: MatchRule) {
   if (typeof rule === 'string') {
@@ -17,25 +13,3 @@ export function ruleMatcher(element: HTMLElement, rule: MatchRule) {
 
   return true;
 }
-
-export function componentRuleMatcher(target: ComponentMatchTarget, rule: ComponentMatchRule): boolean {
-  if (typeof rule === 'string') {
-    const targetCmpId = ComponentID.tryFromString(target.meta.id);
-    const ruleCmpId = ComponentID.tryFromString(rule);
-
-    return ComponentID.isEqual(ruleCmpId, targetCmpId, { ignoreVersion: true });
-  }
-
-  if (Array.isArray(rule)) {
-    const targetCmpId = ComponentID.tryFromString(target.meta.id);
-    const ruleCmpIds = rule.map((x) => ComponentID.tryFromString(x));
-
-    return ruleCmpIds.some((cmdId) => ComponentID.isEqual(targetCmpId, cmdId, { ignoreVersion: true }));
-  }
-
-  if (typeof rule === 'function') {
-    return rule(target);
-  }
-
-  return true;
-}