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

package/component-highlighter.docs.md

@@ -153,6 +153,15 @@ 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

package/dist/component-highlighter.docs.md

@@ -153,6 +153,15 @@ 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

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ShowWhenHovering: () => JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HybridHighlighterProps } from '../hybrid-highligher';
 export declare type HoverHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
 export declare function HoverHighlighter({ ...props }: HoverHighlighterProps): JSX.Element;

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

@@ -1,17 +1,20 @@
 import React from 'react';
 import { HighlightTarget } from '../element-highlighter';
-import { MatchRule } from '../rule-matcher';
+import { MatchRule, ComponentMatchRule } 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 }: useHoverHighlighterOptions): {
-    onMouseOver: (event: React.MouseEvent<T, MouseEvent>) => void;
-    onMouseLeave: (event: React.MouseEvent<T, MouseEvent>) => void;
-} | {
+export declare function useHoverHighlighter<T extends HTMLElement = HTMLElement>(onChange: (target?: HighlightTarget) => void, props: React.HTMLAttributes<T>, { debounceDuration, scopeClass, disabled, rule, componentRule }: useHoverHighlighterOptions): {
     onMouseOver?: undefined;
     onMouseLeave?: undefined;
+} | {
+    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 }) {
-    const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule });
+function useHoverHighlighter(onChange, props = {}, { debounceDuration, scopeClass, disabled, rule, componentRule }) {
+    const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule, componentRule });
     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 }) {
+function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled, rule, componentRule, }) {
     // 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 ? (current) => (0, rule_matcher_1.ruleMatcher)(current, rule) : undefined);
+        const result = bubbleToBitComponent(element, rule, componentRule);
         if (!result)
             return;
         onChange({
@@ -46,19 +46,22 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
     return { handleElement };
 }
 /** go up the dom tree until reaching a react bit component */
-function bubbleToBitComponent(element, filter) {
+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 || (filter === null || filter === void 0 ? void 0 : filter(current)) === false)
+        if (!current)
             return undefined;
-        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,
-            };
+        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,
+                    };
+            }
         }
     }
     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":";;;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"}
+{"version":3,"file":"use-hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/use-hover-highlighter.tsx"],"names":[],"mappings":"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"}

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 } from '../rule-matcher';
+import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
     /** stop all highlighting and drop listeners */
     disabled?: boolean;
@@ -20,6 +20,7 @@ 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
@@ -31,4 +32,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, classes, highlightStyle, className, style, bgColor, bgColorHover, bgColorActive, children, ...rest }: HybridHighlighterProps): JSX.Element;
+export declare function HybridHighlighter({ disabled, mode, debounceSelection, watchMotion, placement, rule, componentRule, 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, 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"]);
+    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"]);
     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,6 +57,7 @@ function HybridHighlighter(_a) {
         scopeClass,
         disabled: disabled || mode !== 'hover',
         rule,
+        componentRule
     });
     (0, use_multi_highlighter_1.useMultiHighlighter)({
         onChange: setTarget,
@@ -64,6 +65,7 @@ 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;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"}
+{"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"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentID } from '@teambit/component-id';
 import { LinkProps } from '@teambit/base-ui.routing.native-link';
 export interface ComponentBubbleProps extends LinkProps {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CardProps } from '@teambit/base-ui.surfaces.card';
 import type { ComponentID } from '@teambit/component-id';
 export interface ComponentLabelProps extends CardProps {

package/dist/label/component-label/scope-bubble.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentID } from '@teambit/component-id';
 import { LinkProps } from '@teambit/base-ui.routing.native-link';
 export interface ScopeBubbleProps extends LinkProps {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CardProps } from '@teambit/base-ui.surfaces.card';
 export interface DefaultLabelProps extends CardProps {
     href?: string;

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

@@ -1,4 +1,6 @@
+/// <reference types="react" />
 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,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiHighlighterWithRule = exports.MultiHighlighterInsideIgnore = exports.MultiHighlighterWithCustomColors = exports.MultiHighlighterPreview = void 0;
+exports.MultiHighlighterWithComponentRule = 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 = () => {
@@ -45,7 +46,7 @@ const MultiHighlighterInsideIgnore = () => {
 };
 exports.MultiHighlighterInsideIgnore = MultiHighlighterInsideIgnore;
 const MultiHighlighterWithRule = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { rule: "#someSubTree *" },
+    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { rule: "#someSubTree *", style: { minWidth: 200 } },
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
@@ -54,9 +55,21 @@ 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, "this will be highlighted"))));
+            react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "highlighted because of element rule"))));
 };
 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,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"}
+{"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"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 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/use-multi-highlighter.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { HighlightTarget } from '../element-highlighter';
-import { MatchRule } from '../rule-matcher';
+import { MatchRule, ComponentMatchRule } from '../rule-matcher';
 declare type useMultiHighlighterProps = {
     onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
     disabled?: boolean;
@@ -8,6 +8,8 @@ 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, }: useMultiHighlighterProps): void;
+export declare function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector, rule, componentRule, }: 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, }) {
+function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector = '', rule, componentRule, }) {
     (0, react_1.useEffect)(() => {
         const nextTargets = {};
         const scopeElement = scopeRef.current;
@@ -29,8 +29,10 @@ 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 key = (0, get_xpath_1.default)(element);
             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 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,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"}
+{"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"}

package/dist/rule-matcher.d.ts

@@ -1,2 +1,8 @@
+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.ruleMatcher = void 0;
+exports.componentRuleMatcher = exports.ruleMatcher = void 0;
+const component_id_1 = require("@teambit/component-id");
 function ruleMatcher(element, rule) {
     if (typeof rule === 'string') {
         return element.matches(rule);
@@ -12,4 +12,21 @@ 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,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"}
+{"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"}

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

@@ -6,22 +6,25 @@ import { hasComponentMeta } from '@teambit/react.ui.highlighter.component-metada
 
 import { excludeHighlighterSelector } from '../ignore-highlighter';
 import { HighlightTarget } from '../element-highlighter';
-import { ruleMatcher, MatchRule } from '../rule-matcher';
+import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } 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 }: useHoverHighlighterOptions
+  { debounceDuration, scopeClass, disabled, rule, componentRule }: useHoverHighlighterOptions
 ) {
-  const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule });
+  const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule, componentRule });
 
   const handlers = useHoverSelection(disabled ? undefined : handleElement, props);
 
@@ -34,9 +37,17 @@ type useHoverHighlighterProps = {
   debounceDuration?: number;
   disabled?: boolean;
   rule?: MatchRule;
+  componentRule?: ComponentMatchRule;
 };
 
-function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled, rule }: useHoverHighlighterProps) {
+function useHoverHandler({
+  onChange,
+  scopeClass = '',
+  debounceDuration,
+  disabled,
+  rule,
+  componentRule,
+}: useHoverHighlighterProps) {
   // debounced method is ref'ed, so no need for useCallback
   const _handleElement = (element: HTMLElement | null) => {
     // clear highlighter at the edges:
@@ -48,7 +59,7 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
     // skip DOM trees having 'data-ignore-component-highlight'
     if (element.closest(`.${scopeClass} ${excludeHighlighterSelector}`)) return;
 
-    const result = bubbleToBitComponent(element, rule ? (current) => ruleMatcher(current, rule) : undefined);
+    const result = bubbleToBitComponent(element, rule, componentRule);
     if (!result) return;
 
     onChange({
@@ -71,21 +82,27 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
 }
 
 /** go up the dom tree until reaching a react bit component */
-function bubbleToBitComponent(element: HTMLElement | null, filter?: (elem: HTMLElement) => boolean) {
+function bubbleToBitComponent(
+  element: HTMLElement | null,
+  elementRule?: MatchRule,
+  componentRule?: ComponentMatchRule
+) {
   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,
-      };
+    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,
+          };
+      }
     }
   }
 

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 } from '../rule-matcher';
+import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
   /** stop all highlighting and drop listeners */
@@ -27,6 +27,7 @@ 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.
@@ -47,6 +48,7 @@ export function HybridHighlighter({
   watchMotion = true,
   placement,
   rule,
+  componentRule,
 
   classes,
   highlightStyle,
@@ -76,6 +78,7 @@ export function HybridHighlighter({
       scopeClass,
       disabled: disabled || mode !== 'hover',
       rule,
+      componentRule
     }
   );
 
@@ -85,6 +88,7 @@ export function HybridHighlighter({
     scopeClass,
     disabled: disabled || mode !== 'allChildren',
     rule,
+    componentRule
   });
 
   const _styles = useMemo(

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

@@ -1,6 +1,7 @@
 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';
 
@@ -55,7 +56,7 @@ export const MultiHighlighterInsideIgnore = () => {
 
 export const MultiHighlighterWithRule = () => {
   return (
-    <MultiHighlighter rule="#someSubTree *">
+    <MultiHighlighter rule="#someSubTree *" style={{ minWidth: 200 }}>
       <br />
       <br />
       <br />
@@ -64,12 +65,27 @@ export const MultiHighlighterWithRule = () => {
       <br />
       <br />
       <div id="someSubTree">
-        <MockedComponentWithMeta>this will be highlighted</MockedComponentWithMeta>
+        <MockedComponentWithMeta>highlighted because of element rule</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>

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 } from '../rule-matcher';
+import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
 
 type useMultiHighlighterProps = {
   onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
@@ -17,6 +17,8 @@ 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;
@@ -28,6 +30,7 @@ export function useMultiHighlighter({
   scopeRef,
   scopeClass: scopeSelector = '',
   rule,
+  componentRule,
 }: useMultiHighlighterProps) {
   useEffect(() => {
     const nextTargets: Record<string, HighlightTarget> = {};
@@ -46,9 +49,10 @@ 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;

package/package.json

@@ -1,44 +1,44 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.489",
+  "version": "0.0.490",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.489"
+    "version": "0.0.490"
   },
   "dependencies": {
-    "@popperjs/core": "2.6.0",
     "classnames": "2.2.6",
+    "@popperjs/core": "2.6.0",
     "react-popper": "2.2.4",
     "use-debounce": "6.0.1",
     "uuid": "3.4.0",
     "get-xpath": "3.0.1",
     "url-join": "4.0.1",
     "core-js": "^3.0.0",
+    "@teambit/component-id": "0.0.388",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.9",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.476",
     "@teambit/base-ui.utils.popper-js.ignore-popper-size": "1.0.0",
     "@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/react.modules.dom-to-react": "0.0.476",
-    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.9",
     "@teambit/react.ui.hover-selector": "0.0.154",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.476",
-    "@teambit/component-id": "0.0.388",
+    "@teambit/base-ui.surfaces.card": "1.0.1",
+    "@teambit/base-ui.routing.native-link": "1.0.0",
     "@teambit/component.modules.component-url": "0.0.109"
   },
   "devDependencies": {
-    "@types/react": "^17.0.8",
     "@types/classnames": "2.2.11",
     "@testing-library/react": "11.2.6",
-    "@types/react-dom": "^17.0.5",
     "@types/uuid": "3.4.9",
     "@types/url-join": "4.0.0",
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
     "@babel/runtime": "7.12.18",
     "@types/jest": "^26.0.0",
+    "@types/react-dom": "^17.0.5",
+    "@types/react": "^17.0.8",
     "@types/node": "12.20.4",
     "@teambit/design.ui.icon-button": "1.0.10"
   },

package/rule-matcher.tsx

@@ -1,6 +1,10 @@
-// in the future, we will add more options here, like include / exclude objects.
+import { ComponentID } from '@teambit/component-id';
+import { ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
+export type ComponentMatchTarget = { meta: ComponentMeta };
 
 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') {
@@ -13,3 +17,25 @@ 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;
+}