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

package/{multi-highlighter/multi-highlighter.composition.tsx → children-highlighter/children-highlighter.composition.tsx}

@@ -1,25 +1,27 @@
 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';
+import { ChildrenHighlighter } from './children-highlighter';
 
-export const MultiHighlighterPreview = () => {
+export const ChildrenHighlighterPreview = () => {
   return (
-    <MultiHighlighter style={{ padding: 40, minWidth: 200 }}>
+    // highlighter runs in compositions, therefor should not have our font
+    <ChildrenHighlighter style={{ padding: 40, minWidth: 200, fontFamily: 'sans-serif' }}>
       <MockedComponentWithMeta>hover here</MockedComponentWithMeta>
       <br />
       <br />
       <br />
-      <MockedComponentWithMeta>also here</MockedComponentWithMeta>
-    </MultiHighlighter>
+      <IconButton>this will be highlighted with dropdown</IconButton>
+    </ChildrenHighlighter>
   );
 };
 
-export const MultiHighlighterWithCustomColors = () => {
+export const ChildrenHighlighterWithCustomColors = () => {
   return (
-    <MultiHighlighter
-      style={{ padding: 40, minWidth: 200, color: 'yellow' }}
+    <ChildrenHighlighter
+      style={{ padding: 40, minWidth: 200, color: 'yellow', fontFamily: 'sans-serif' }}
       bgColor="cornflowerblue"
       bgColorHover="blue"
       bgColorActive="DarkSlateBlue"
@@ -29,14 +31,14 @@ export const MultiHighlighterWithCustomColors = () => {
       <br />
       <br />
       <MockedComponentWithMeta>also here</MockedComponentWithMeta>
-    </MultiHighlighter>
+    </ChildrenHighlighter>
   );
 };
 
-export const MultiHighlighterInsideIgnore = () => {
+export const ChildrenHighlighterInsideIgnore = () => {
   return (
     <ExcludeHighlighter>
-      <MultiHighlighter>
+      <ChildrenHighlighter style={{ fontFamily: 'sans-serif' }}>
         Multi Highlighter should still work when inside <code>{'<ExcludeHighlighter>'}</code>
         <br />
         It should only skip exclusion zones inside of it.
@@ -48,16 +50,17 @@ export const MultiHighlighterInsideIgnore = () => {
         <br />
         <br />
         <MockedComponentWithMeta>also here</MockedComponentWithMeta>
-      </MultiHighlighter>
+      </ChildrenHighlighter>
     </ExcludeHighlighter>
   );
 };
 
-export const MultiHighlighterWithRule = () => {
+export const ChildrenHighlighterWithRule = () => {
   return (
-    <MultiHighlighter rule="#someSubTree *">
-      <br />
-      <br />
+    <ChildrenHighlighter rule="#someSubTree *" style={{ minWidth: 300, fontFamily: 'sans-serif' }}>
+      <div>
+        element filter: <code>"#someSubTree *"</code>
+      </div>
       <br />
       <MockedComponentWithMeta>no highlighter</MockedComponentWithMeta>
       <br />
@@ -66,14 +69,33 @@ export const MultiHighlighterWithRule = () => {
       <div id="someSubTree">
         <MockedComponentWithMeta>this will be highlighted</MockedComponentWithMeta>
       </div>
-    </MultiHighlighter>
+    </ChildrenHighlighter>
+  );
+};
+
+export const ChildrenHighlighterWithComponentRule = () => {
+  return (
+    <ChildrenHighlighter
+      componentRule="teambit.design/ui/icon-button"
+      style={{ minWidth: 300, fontFamily: 'sans-serif' }}
+    >
+      <div>
+        component filter: <code>"teambit.design/ui/icon-button"</code>
+      </div>
+      <br />
+      <MockedComponentWithMeta>no highlighter</MockedComponentWithMeta>
+      <br />
+      <br />
+      <br />
+      <IconButton>this will be highlighted</IconButton>
+    </ChildrenHighlighter>
   );
 };
 
 // export const HighlightingAllElementsInTheEnterprisePage = () => {
 //   return (
-//     <MultiHighlighter>
+//     <ChildrenHighlighter>
 //       <EnterpriseOffering style={{ height: 300 }} />
-//     </MultiHighlighter>
+//     </ChildrenHighlighter>
 //   );
 // };

package/{multi-highlighter/multi-highlighter.spec.tsx → children-highlighter/children-highlighter.spec.tsx}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { MultiHighlighterPreview } from './multi-highlighter.composition';
+import { ChildrenHighlighterPreview } from './children-highlighter.composition';
 
-it('should not throw when rendering the multi-highlighter', () => {
-  const { getByText } = render(<MultiHighlighterPreview />);
+it('should not throw when rendering the children-highlighter', () => {
+  const { getByText } = render(<ChildrenHighlighterPreview />);
 
   const rendered = getByText('hover here');
 

package/children-highlighter/children-highlighter.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { HybridHighlighter, HybridHighlighterProps } from '../hybrid-highlighter';
+
+export type ChildrenHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
+
+export function ChildrenHighlighter({ watchMotion = false, ...props }: ChildrenHighlighterProps) {
+  return <HybridHighlighter {...props} mode={'allChildren'} watchMotion={watchMotion} />;
+}

package/children-highlighter/index.ts

@@ -0,0 +1,5 @@
+export { useChildrenHighlighter } from './use-children-highlighter';
+export type { ChildrenHighlighterOptions } from './use-children-highlighter';
+
+export { ChildrenHighlighter } from './children-highlighter';
+export type { ChildrenHighlighterProps } from './children-highlighter';

package/{multi-highlighter/use-multi-highlighter.tsx → children-highlighter/use-children-highlighter.tsx}

@@ -1,34 +1,36 @@
 import { useEffect, RefObject } from 'react';
 import getXPath from 'get-xpath';
-import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
+import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
 import {
-  hasComponentMeta,
   componentMetaField,
-  componentMetaProperties,
+  hasComponentMeta,
+  ReactComponentMetaHolder,
 } 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 = {
+export type ChildrenHighlighterOptions = {
   onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
   disabled?: boolean;
   scopeRef: RefObject<HTMLElement>;
   scopeClass?: string;
   /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
   rule?: MatchRule;
+  componentRule?: ComponentMatchRule;
 
   // /** automatically update when children update. Use with caution, might be slow */
   // watchDom?: boolean;
 };
 
-export function useMultiHighlighter({
+export function useChildrenHighlighter({
   onChange,
   disabled,
   scopeRef,
   scopeClass: scopeSelector = '',
   rule,
-}: useMultiHighlighterProps) {
+  componentRule,
+}: ChildrenHighlighterOptions) {
   useEffect(() => {
     const nextTargets: Record<string, HighlightTarget> = {};
     const scopeElement = scopeRef.current;
@@ -44,15 +46,17 @@ export function useMultiHighlighter({
     const uniqueRoots = new Set(rootElements);
 
     uniqueRoots.forEach((element) => {
-      const comp = domToReact(element);
-      if (!element || !hasComponentMeta(comp)) return;
+      if (!element) return;
+      const comps = domToReacts(element);
+      const componentsWithMeta = comps.filter(
+        (x) => hasComponentMeta(x) && componentRuleMatcher({ meta: x[componentMetaField] }, componentRule)
+      ) as ReactComponentMetaHolder[];
+
+      if (componentsWithMeta.length < 1) 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;
-      nextTargets[key] = { element, id: compId, link, local };
+
+      nextTargets[key] = { element, components: componentsWithMeta };
     });
 
     onChange(nextTargets);

package/component-highlighter.docs.md

@@ -94,7 +94,7 @@ The Component Highlighter comes in a few different modes:
 In addition to changing the `mode` prop, you can also use convenience exports from the same package:
 
 ```tsx
-import { MultiHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
+import { ChildrenHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
 
 function example() {
   return (
@@ -103,9 +103,9 @@ function example() {
         <App />
       </HoverHighlighter>
 
-      <MultiHighlighter>
+      <ChildrenHighlighter>
         <App />
-      </MultiHighlighter>
+      </ChildrenHighlighter>
     </div>
   );
 }
@@ -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
@@ -161,6 +170,7 @@ Use these CSS variables to edit the highlighter color
 --bit-highlighter-color: #eebcc9;
 --bit-highlighter-color-hover: #f6dae2;
 --bit-highlighter-color-active: #e79db1;
+--bit-highlighter-shadow: 0px 11px 29px 0px rgba(0, 0, 0, 0.23));
 ```
 
 While it is preferred to use the css variables, you can also set them using react props:

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

@@ -0,0 +1,5 @@
+export declare const ChildrenHighlighterPreview: () => JSX.Element;
+export declare const ChildrenHighlighterWithCustomColors: () => JSX.Element;
+export declare const ChildrenHighlighterInsideIgnore: () => JSX.Element;
+export declare const ChildrenHighlighterWithRule: () => JSX.Element;
+export declare const ChildrenHighlighterWithComponentRule: () => JSX.Element;

package/dist/{multi-highlighter/multi-highlighter.composition.js → children-highlighter/children-highlighter.composition.js}

@@ -3,33 +3,36 @@ 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.ChildrenHighlighterWithComponentRule = exports.ChildrenHighlighterWithRule = exports.ChildrenHighlighterInsideIgnore = exports.ChildrenHighlighterWithCustomColors = exports.ChildrenHighlighterPreview = 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 = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { style: { padding: 40, minWidth: 200 } },
+const children_highlighter_1 = require("./children-highlighter");
+const ChildrenHighlighterPreview = () => {
+    return (
+    // highlighter runs in compositions, therefor should not have our font
+    react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { style: { padding: 40, minWidth: 200, fontFamily: 'sans-serif' } },
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
-        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "also here")));
+        react_1.default.createElement(design_ui_icon_button_1.IconButton, null, "this will be highlighted with dropdown")));
 };
-exports.MultiHighlighterPreview = MultiHighlighterPreview;
-const MultiHighlighterWithCustomColors = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { style: { padding: 40, minWidth: 200, color: 'yellow' }, bgColor: "cornflowerblue", bgColorHover: "blue", bgColorActive: "DarkSlateBlue" },
+exports.ChildrenHighlighterPreview = ChildrenHighlighterPreview;
+const ChildrenHighlighterWithCustomColors = () => {
+    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { style: { padding: 40, minWidth: 200, color: 'yellow', fontFamily: 'sans-serif' }, bgColor: "cornflowerblue", bgColorHover: "blue", bgColorActive: "DarkSlateBlue" },
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "also here")));
 };
-exports.MultiHighlighterWithCustomColors = MultiHighlighterWithCustomColors;
-const MultiHighlighterInsideIgnore = () => {
+exports.ChildrenHighlighterWithCustomColors = ChildrenHighlighterWithCustomColors;
+const ChildrenHighlighterInsideIgnore = () => {
     return (react_1.default.createElement(ignore_highlighter_1.ExcludeHighlighter, null,
-        react_1.default.createElement(multi_highlighter_1.MultiHighlighter, null,
+        react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { style: { fontFamily: 'sans-serif' } },
             "Multi Highlighter should still work when inside ",
             react_1.default.createElement("code", null, '<ExcludeHighlighter>'),
             react_1.default.createElement("br", null),
@@ -43,11 +46,12 @@ const MultiHighlighterInsideIgnore = () => {
             react_1.default.createElement("br", null),
             react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "also here"))));
 };
-exports.MultiHighlighterInsideIgnore = MultiHighlighterInsideIgnore;
-const MultiHighlighterWithRule = () => {
-    return (react_1.default.createElement(multi_highlighter_1.MultiHighlighter, { rule: "#someSubTree *" },
-        react_1.default.createElement("br", null),
-        react_1.default.createElement("br", null),
+exports.ChildrenHighlighterInsideIgnore = ChildrenHighlighterInsideIgnore;
+const ChildrenHighlighterWithRule = () => {
+    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { rule: "#someSubTree *", style: { minWidth: 300, fontFamily: 'sans-serif' } },
+        react_1.default.createElement("div", null,
+            "element filter: ",
+            react_1.default.createElement("code", null, "\"#someSubTree *\"")),
         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),
@@ -56,12 +60,25 @@ const MultiHighlighterWithRule = () => {
         react_1.default.createElement("div", { id: "someSubTree" },
             react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "this will be highlighted"))));
 };
-exports.MultiHighlighterWithRule = MultiHighlighterWithRule;
+exports.ChildrenHighlighterWithRule = ChildrenHighlighterWithRule;
+const ChildrenHighlighterWithComponentRule = () => {
+    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { componentRule: "teambit.design/ui/icon-button", style: { minWidth: 300, fontFamily: 'sans-serif' } },
+        react_1.default.createElement("div", null,
+            "component filter: ",
+            react_1.default.createElement("code", null, "\"teambit.design/ui/icon-button\"")),
+        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, "this will be highlighted")));
+};
+exports.ChildrenHighlighterWithComponentRule = ChildrenHighlighterWithComponentRule;
 // export const HighlightingAllElementsInTheEnterprisePage = () => {
 //   return (
-//     <MultiHighlighter>
+//     <ChildrenHighlighter>
 //       <EnterpriseOffering style={{ height: 300 }} />
-//     </MultiHighlighter>
+//     </ChildrenHighlighter>
 //   );
 // };
-//# sourceMappingURL=multi-highlighter.composition.js.map
+//# sourceMappingURL=children-highlighter.composition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"children-highlighter.composition.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAAsF;AACtF,oJAA8G;AAC9G,0EAA4D;AAC5D,8DAA2D;AAC3D,iEAA6D;AAEtD,MAAM,0BAA0B,GAAG,GAAG,EAAE;IAC7C,OAAO;IACL,sEAAsE;IACtE,8BAAC,0CAAmB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAClF,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,iDAAoD,CAC3C,CACvB,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,0BAA0B,8BAWrC;AAEK,MAAM,mCAAmC,GAAG,GAAG,EAAE;IACtD,OAAO,CACL,8BAAC,0CAAmB,IAClB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,EAChF,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,CACxC,CACvB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,mCAAmC,uCAe9C;AAEK,MAAM,+BAA+B,GAAG,GAAG,EAAE;IAClD,OAAO,CACL,8BAAC,uCAAkB;QACjB,8BAAC,0CAAmB,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE;;YACN,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,CACxC,CACH,CACtB,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,+BAA+B,mCAkB1C;AAEK,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,OAAO,CACL,8BAAC,0CAAmB,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAC3F;;YACkB,iEAA6B,CACzC;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,uCAAK,EAAE,EAAC,aAAa;YACnB,8BAAC,oFAAuB,mCAAmD,CACvE,CACc,CACvB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,2BAA2B,+BAgBtC;AAEK,MAAM,oCAAoC,GAAG,GAAG,EAAE;IACvD,OAAO,CACL,8BAAC,0CAAmB,IAClB,aAAa,EAAC,+BAA+B,EAC7C,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAElD;;YACoB,gFAA4C,CAC1D;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,mCAAsC,CAC7B,CACvB,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,oCAAoC,wCAiB/C;AAEF,oEAAoE;AACpE,aAAa;AACb,4BAA4B;AAC5B,uDAAuD;AACvD,6BAA6B;AAC7B,OAAO;AACP,KAAK"}

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

@@ -0,0 +1,3 @@
+import { HybridHighlighterProps } from '../hybrid-highlighter';
+export declare type ChildrenHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
+export declare function ChildrenHighlighter({ watchMotion, ...props }: ChildrenHighlighterProps): JSX.Element;

package/dist/{multi-highlighter/multi-highlighter.js → children-highlighter/children-highlighter.js}

@@ -14,12 +14,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiHighlighter = void 0;
+exports.ChildrenHighlighter = void 0;
 const react_1 = __importDefault(require("react"));
-const hybrid_highligher_1 = require("../hybrid-highligher");
-function MultiHighlighter(_a) {
+const hybrid_highlighter_1 = require("../hybrid-highlighter");
+function ChildrenHighlighter(_a) {
     var { watchMotion = false } = _a, props = __rest(_a, ["watchMotion"]);
-    return react_1.default.createElement(hybrid_highligher_1.HybridHighlighter, Object.assign({}, props, { mode: 'allChildren', watchMotion: watchMotion }));
+    return react_1.default.createElement(hybrid_highlighter_1.HybridHighlighter, Object.assign({}, props, { mode: 'allChildren', watchMotion: watchMotion }));
 }
-exports.MultiHighlighter = MultiHighlighter;
-//# sourceMappingURL=multi-highlighter.js.map
+exports.ChildrenHighlighter = ChildrenHighlighter;
+//# sourceMappingURL=children-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"children-highlighter.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,8DAAkF;AAIlF,SAAgB,mBAAmB,CAAC,EAA2D;QAA3D,EAAE,WAAW,GAAG,KAAK,OAAsC,EAAjC,KAAK,cAA/B,eAAiC,CAAF;IACjE,OAAO,8BAAC,sCAAiB,oBAAK,KAAK,IAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,IAAI,CAAC;AACzF,CAAC;AAFD,kDAEC"}

package/dist/{multi-highlighter/multi-highlighter.spec.js → children-highlighter/children-highlighter.spec.js}

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
-const multi_highlighter_composition_1 = require("./multi-highlighter.composition");
-it('should not throw when rendering the multi-highlighter', () => {
-    const { getByText } = (0, react_2.render)(react_1.default.createElement(multi_highlighter_composition_1.MultiHighlighterPreview, null));
+const children_highlighter_composition_1 = require("./children-highlighter.composition");
+it('should not throw when rendering the children-highlighter', () => {
+    const { getByText } = (0, react_2.render)(react_1.default.createElement(children_highlighter_composition_1.ChildrenHighlighterPreview, null));
     const rendered = getByText('hover here');
     expect(rendered).toBeInstanceOf(HTMLElement);
 });
@@ -19,4 +19,4 @@ it('should not throw when rendering the multi-highlighter', () => {
 //   const rendered = queryAllByText('input/button');
 //   expect(rendered).toHaveLength(2);
 // });
-//# sourceMappingURL=multi-highlighter.spec.js.map
+//# sourceMappingURL=children-highlighter.spec.js.map

package/dist/children-highlighter/children-highlighter.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"children-highlighter.spec.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAChD,yFAAgF;AAEhF,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;IAClE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,6DAA0B,OAAG,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;IAEzC,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,sFAAsF;AACtF,4EAA4E;AAC5E,oDAAoD;AAEpD,8BAA8B;AAC9B,sDAAsD;AAEtD,qDAAqD;AACrD,sCAAsC;AACtC,MAAM"}

package/dist/children-highlighter/index.d.ts

@@ -0,0 +1,4 @@
+export { useChildrenHighlighter } from './use-children-highlighter';
+export type { ChildrenHighlighterOptions } from './use-children-highlighter';
+export { ChildrenHighlighter } from './children-highlighter';
+export type { ChildrenHighlighterProps } from './children-highlighter';

package/dist/children-highlighter/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChildrenHighlighter = exports.useChildrenHighlighter = void 0;
+var use_children_highlighter_1 = require("./use-children-highlighter");
+Object.defineProperty(exports, "useChildrenHighlighter", { enumerable: true, get: function () { return use_children_highlighter_1.useChildrenHighlighter; } });
+var children_highlighter_1 = require("./children-highlighter");
+Object.defineProperty(exports, "ChildrenHighlighter", { enumerable: true, get: function () { return children_highlighter_1.ChildrenHighlighter; } });
+//# sourceMappingURL=index.js.map

package/dist/children-highlighter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../children-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,uEAAoE;AAA3D,kIAAA,sBAAsB,OAAA;AAG/B,+DAA6D;AAApD,2HAAA,mBAAmB,OAAA"}

package/dist/{multi-highlighter/use-multi-highlighter.d.ts → children-highlighter/use-children-highlighter.d.ts}

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

package/dist/{multi-highlighter/use-multi-highlighter.js → children-highlighter/use-children-highlighter.js}

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMultiHighlighter = void 0;
+exports.useChildrenHighlighter = void 0;
 const react_1 = require("react");
 const get_xpath_1 = __importDefault(require("get-xpath"));
 const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-react");
 const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const rule_matcher_1 = require("../rule-matcher");
-function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector = '', rule, }) {
+function useChildrenHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector = '', rule, componentRule, }) {
     (0, react_1.useEffect)(() => {
         const nextTargets = {};
         const scopeElement = scopeRef.current;
@@ -26,20 +26,19 @@ function useMultiHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSe
         // deduplicate
         const uniqueRoots = new Set(rootElements);
         uniqueRoots.forEach((element) => {
-            const comp = (0, react_modules_dom_to_react_1.domToReact)(element);
-            if (!element || !(0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(comp))
+            if (!element)
+                return;
+            const comps = (0, react_modules_dom_to_react_1.domToReacts)(element);
+            const componentsWithMeta = comps.filter((x) => (0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(x) && (0, rule_matcher_1.componentRuleMatcher)({ meta: x[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] }, componentRule));
+            if (componentsWithMeta.length < 1)
                 return;
             const key = (0, get_xpath_1.default)(element);
-            const meta = comp[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField];
-            const compId = meta[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaProperties.componentId];
-            const link = meta[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaProperties.homepageUrl];
-            const local = meta[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaProperties.isExported] === false;
-            nextTargets[key] = { element, id: compId, link, local };
+            nextTargets[key] = { element, components: componentsWithMeta };
         });
         onChange(nextTargets);
     }, [disabled, scopeSelector]);
 }
-exports.useMultiHighlighter = useMultiHighlighter;
+exports.useChildrenHighlighter = useChildrenHighlighter;
 function targetsSelector(
 /**
  * the scope in which to consider the exclude selector.
@@ -48,4 +47,4 @@ function targetsSelector(
 scopeSelector = ':scope') {
     return `:not(${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector}, ${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector} *)`;
 }
-//# sourceMappingURL=use-multi-highlighter.js.map
+//# sourceMappingURL=use-children-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-children-highlighter.js","sourceRoot":"","sources":["../../children-highlighter/use-children-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA6C;AAC7C,0DAAiC;AACjC,oFAAiF;AACjF,oJAI6E;AAE7E,8DAAmE;AACnE,kDAAmG;AAenG,SAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,aAAa,GAAG,EAAE,EAC9B,IAAI,EACJ,aAAa,GACc;IAC3B,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,IAAI,CAAC,OAAO;gBAAE,OAAO;YACrB,MAAM,KAAK,GAAG,IAAA,wCAAW,EAAC,OAAO,CAAC,CAAC;YACnC,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CACrC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,6EAAgB,EAAC,CAAC,CAAC,IAAI,IAAA,mCAAoB,EAAC,EAAE,IAAI,EAAE,CAAC,CAAC,+EAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACrE,CAAC;YAEhC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO;YAE1C,MAAM,GAAG,GAAG,IAAA,mBAAQ,EAAC,OAAO,CAAC,CAAC;YAE9B,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC;QACjE,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;AAChC,CAAC;AAtCD,wDAsCC;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/component-highlighter.docs.md

@@ -94,7 +94,7 @@ The Component Highlighter comes in a few different modes:
 In addition to changing the `mode` prop, you can also use convenience exports from the same package:
 
 ```tsx
-import { MultiHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
+import { ChildrenHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
 
 function example() {
   return (
@@ -103,9 +103,9 @@ function example() {
         <App />
       </HoverHighlighter>
 
-      <MultiHighlighter>
+      <ChildrenHighlighter>
         <App />
-      </MultiHighlighter>
+      </ChildrenHighlighter>
     </div>
   );
 }
@@ -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
@@ -161,6 +170,7 @@ Use these CSS variables to edit the highlighter color
 --bit-highlighter-color: #eebcc9;
 --bit-highlighter-color-hover: #f6dae2;
 --bit-highlighter-color-active: #e79db1;
+--bit-highlighter-shadow: 0px 11px 29px 0px rgba(0, 0, 0, 0.23));
 ```
 
 While it is preferred to use the css variables, you can also set them using react props:

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

@@ -1,11 +1,13 @@
 import { CSSProperties } from 'react';
+import { HighlighterSize } from './element-highlighter';
 declare type HighlightedElementProps = {
     style?: CSSProperties;
     targetStyle?: CSSProperties;
     className?: string;
     watchMotion?: boolean;
+    size?: HighlighterSize;
 };
-export declare const HighlightedElement: ({ style, targetStyle, watchMotion, className }: HighlightedElementProps) => JSX.Element;
+export declare const HighlightedElement: ({ style, targetStyle, watchMotion, className, size }: HighlightedElementProps) => JSX.Element;
 export declare const Customized: () => JSX.Element;
 export declare const Sizes: () => JSX.Element;
 export declare const MovingElement: () => JSX.Element;

package/dist/element-highlighter/element-highlighter.compositions.js

@@ -20,21 +20,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MovingElement = exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
+const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
 const react_1 = __importStar(require("react"));
 const element_highlighter_1 = require("./element-highlighter");
 const mockTarget = {
-    id: 'teambit.design/ui/icon-button',
-    link: 'https://bit.dev/teambit/design/ui/icon-button',
-    scopeLink: 'https://bit.dev/teambit/design',
+    components: [
+        {
+            [react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]: {
+                id: 'teambit.design/ui/icon-button@1.6.2',
+            },
+        },
+    ],
 };
-const HighlightedElement = ({ style, targetStyle, watchMotion, className }) => {
+const HighlightedElement = ({ style, targetStyle, watchMotion, className, size }) => {
     const [targetElement, setTargetElement] = (0, react_1.useState)(undefined);
     const targetRef = (0, react_1.createRef)();
     (0, react_1.useEffect)(() => setTargetElement(targetRef.current || undefined), [targetRef.current]);
     const target = targetElement && Object.assign(Object.assign({}, mockTarget), { element: targetElement });
-    return (react_1.default.createElement("div", { className: className, style: { padding: '16px 16px 50px 16px', width: 300 } },
+    return (react_1.default.createElement("div", { className: className, style: { padding: '16px 16px 40px 16px', width: 300, fontFamily: 'sans-serif' } },
         react_1.default.createElement("div", { ref: targetRef, style: Object.assign({ width: 100 }, targetStyle) }, "highlight target"),
-        target && react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, style: style, watchMotion: watchMotion, placement: "bottom" })));
+        target && (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, style: style, watchMotion: watchMotion, placement: "bottom", size: size }))));
 };
 exports.HighlightedElement = HighlightedElement;
 const Customized = () => {
@@ -46,7 +51,10 @@ const Customized = () => {
 };
 exports.Customized = Customized;
 const Sizes = () => {
-    return react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: '16px' } });
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: 10 } }),
+        react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: 14 } }),
+        react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: 18 } })));
 };
 exports.Sizes = Sizes;
 const MovingElement = () => {