@teambit/react.ui.component-highlighter 0.0.0-4d64e75088ad738b699f1df7db0bcd7201d589d0

package/children-highlighter/children-highlighter.composition.tsx

@@ -0,0 +1,103 @@
+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 { ExcludeHighlighter } from '../ignore-highlighter';
+import { ChildrenHighlighter } from './children-highlighter';
+import { MockTarget } from '../mock-component';
+
+export const ChildrenHighlighterPreview = () => {
+  return (
+    // highlighter runs in compositions, therefor should not have our font
+    <ChildrenHighlighter style={{ padding: 40, minWidth: 200, fontFamily: 'sans-serif' }}>
+      <MockedComponentWithMeta>target #1</MockedComponentWithMeta>
+      <br />
+      <br />
+      <br />
+      <br />
+      <MockedComponentWithMeta>target #2</MockedComponentWithMeta>
+    </ChildrenHighlighter>
+  );
+};
+
+export const ChildrenHighlighterWithCustomColors = () => {
+  return (
+    <ChildrenHighlighter
+      style={{ padding: 40, minWidth: 200, color: 'yellow', fontFamily: 'sans-serif' }}
+      bgColor="cornflowerblue"
+      bgColorHover="blue"
+      bgColorActive="DarkSlateBlue"
+    >
+      <MockedComponentWithMeta>hover here</MockedComponentWithMeta>
+      <br />
+      <br />
+      <br />
+      <MockedComponentWithMeta>also here</MockedComponentWithMeta>
+    </ChildrenHighlighter>
+  );
+};
+
+export const ChildrenHighlighterInsideIgnore = () => {
+  return (
+    <ExcludeHighlighter>
+      <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.
+        <br />
+        <br />
+        <br />
+        <MockedComponentWithMeta>hover here</MockedComponentWithMeta>
+        <br />
+        <br />
+        <br />
+        <MockedComponentWithMeta>also here</MockedComponentWithMeta>
+      </ChildrenHighlighter>
+    </ExcludeHighlighter>
+  );
+};
+
+export const ChildrenHighlighterWithRule = () => {
+  const rule = '#someSubTree *';
+
+  return (
+    <ChildrenHighlighter rule={rule} style={{ minWidth: 300, fontFamily: 'sans-serif' }}>
+      <div>
+        element filter: <code>"{rule}"</code>
+      </div>
+      <br />
+      <MockedComponentWithMeta>no highlighter</MockedComponentWithMeta>
+      <br />
+      <br />
+      <br />
+      <div id="someSubTree">
+        <MockedComponentWithMeta>this will be highlighted</MockedComponentWithMeta>
+      </div>
+    </ChildrenHighlighter>
+  );
+};
+
+export const ChildrenHighlighterWithComponentRule = () => {
+  const filterTarget = 'teambit.design/ui/mock-target';
+
+  return (
+    <ChildrenHighlighter componentRule={filterTarget} style={{ minWidth: 300, fontFamily: 'sans-serif' }}>
+      <div>
+        component filter: <code>"{filterTarget}"</code>
+      </div>
+      <br />
+      <MockedComponentWithMeta>no highlighter</MockedComponentWithMeta>
+      <br />
+      <br />
+      <br />
+      <MockTarget style={{ display: 'inline-block', margin: '0 8px' }}>this will be highlighted</MockTarget>
+    </ChildrenHighlighter>
+  );
+};
+
+// export const HighlightingAllElementsInTheEnterprisePage = () => {
+//   return (
+//     <ChildrenHighlighter>
+//       <EnterpriseOffering style={{ height: 300 }} />
+//     </ChildrenHighlighter>
+//   );
+// };

package/children-highlighter/children-highlighter.spec.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ChildrenHighlighterPreview } from './children-highlighter.composition';
+
+it('should not throw when rendering the children-highlighter', () => {
+  const { getByText } = render(<ChildrenHighlighterPreview />);
+
+  const rendered = getByText('target #1');
+
+  expect(rendered).toBeInstanceOf(HTMLElement);
+});
+
+// .querySelectorAll() is not working as expected during the test, ignoring for now :(
+// it('should render highlighter for all children components', async () => {
+//   const { queryAllByText } = render(<Preview />);
+
+//   // allow useEffect to run
+//   await new Promise((res) => setTimeout(res, 200));
+
+//   const rendered = queryAllByText('input/button');
+//   expect(rendered).toHaveLength(2);
+// });

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/children-highlighter/use-children-highlighter.tsx

@@ -0,0 +1,79 @@
+import { useEffect, RefObject, HtmlHTMLAttributes } from 'react';
+import getXPath from 'get-xpath';
+import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
+import {
+  componentMetaField,
+  ComponentMetaHolder,
+  hasComponentMeta,
+  ReactComponentMetaHolder,
+} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { excludeHighlighterSelector, skipHighlighterSelector } from '../ignore-highlighter';
+import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
+
+type HighlighterTarget = Record<string, { element: HTMLElement; components: ComponentMetaHolder[] }>;
+
+export type ChildrenHighlighterOptions = {
+  onChange: (highlighterTargets: HighlighterTarget) => 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 useChildrenHighlighter({
+  onChange,
+  disabled,
+  scopeRef,
+  scopeClass: scopeSelector = '',
+  rule,
+  componentRule,
+}: ChildrenHighlighterOptions) {
+  useEffect(() => {
+    const nextTargets: HighlighterTarget = {};
+    const scopeElement = scopeRef.current;
+    if (!scopeElement || disabled) return;
+
+    // select all elements (except excluded)
+    let allElements = Array.from(scopeElement.querySelectorAll<HTMLElement>(targetsSelector(`.${scopeSelector}`)));
+    // apply rule filtering
+    if (rule) allElements = allElements.filter((elem) => ruleMatcher(elem, rule));
+    // seek the root element:
+    const rootElements = allElements.map(toRootElement).filter((x) => !!x);
+    // deduplicate
+    const uniqueRoots = new Set(rootElements);
+
+    uniqueRoots.forEach((element) => {
+      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);
+
+      nextTargets[key] = { element, components: componentsWithMeta };
+    });
+
+    onChange(nextTargets);
+  }, [disabled, scopeSelector]);
+}
+
+function targetsSelector(
+  /**
+   * the scope in which to consider the exclude selector.
+   * The `:scope` modifier is appropriate, but is not supported in older browsers.
+   */
+  scopeSelector = ':scope'
+) {
+  const excludedSelector = `${scopeSelector} ${excludeHighlighterSelector}, ${scopeSelector} ${excludeHighlighterSelector} *`;
+  const skippedSelector = `${scopeSelector} ${skipHighlighterSelector}, ${scopeSelector} ${skipHighlighterSelector} *`;
+
+  return `:not(${excludedSelector}, ${skippedSelector})`;
+}

package/component-highlighter.docs.md

@@ -0,0 +1,191 @@
+---
+description: Highlights Bit Components and links to their Bit scope
+labels: ['component', 'highlight', 'react']
+---
+
+import { HighlightedElement } from './element-highlighter/element-highlighter.compositions';
+
+The component highlighter allows you to visually inspect bit react components, and provides a link to its documentation page.  
+It is mostly used for compositions debugging.
+
+<HighlightedElement />
+
+## How to use?
+
+Simplest way to use the component is by wrapping your code with `ComponentHighlighter`.  
+It will automatically detect components from DOM elements, just by hovering on them.
+
+```tsx
+import { ComponentHighlighter } from '@teambit/react.ui.component-highlighter';
+
+function App() {
+  return (
+    <ComponentHighlighter>
+      <Header />
+      <Feed />
+    </ComponentHighlighter>
+  );
+}
+```
+
+You can also use it manually, to have more control:
+
+```tsx
+import { ElementHighlighter } from '@teambit/react.ui.component-highlighter';
+
+function ManualHighlight() {
+  const targetRef = createRef<HTMLElement | undefined>(null);
+
+  return (
+    <div>
+      <div ref={targetRef}>highlight target</div>
+      <ElementHighlighter targetRef={targetRef} components={['teambit.design/ui/icon-button']} />
+    </div>
+  );
+}
+```
+
+## How does it work?
+
+The manual highlighter works by positioning elements (a frame and a label) to a target element. It uses [PopperJS](https://popper.js.org/) to correctly align them to the element.
+
+The automatic highlighter then adds an event listener for hover events, which automatically tracks mouse movements and finds the most relevant React component using [DOM-to-react](https://bit.dev/teambit/react/modules/dom-to-react). It bubbles up the DOM until it finds a component with bit metadata.
+
+Where does the metadata come from? The highlighter assumes the code has been transpiled by Bit's [custom babel plugin](https://bit.dev/teambit/react/babel/bit-react-transformer). The plugin looks for React components (i.e. functions or classes), and attaches a metadata object to them.
+
+> The `Bit React Transformer` babel plugin is already running in the Preview, during `bit start`.  
+> It only effects the browser bundle, and not the dists.
+
+The result looks like this:
+
+```tsx
+var __bit_component = {
+  id: 'teambit.base-ui/button@1.0.0',
+  homepage: 'https://bit.dev/teambit/base-ui/input/button',
+  exported: true,
+};
+
+export function Button() {
+  return <div>click me!</div>;
+}
+
+// attaches metadata:
+Button.__bit_component = __bit_component;
+```
+
+### Modes
+
+The Component Highlighter comes in a few different modes:
+
+- `hover` - this will track your mouse movements, and show the highlighter for the element the user is currently hovering on.
+- `allChildren` - this automatically detects all components nested inside the highlighter, and apply a highlighter to them. Currently, this detection only happens once on initial setup, so it does not detect changes.
+
+In addition to changing the `mode` prop, you can also use convenience exports from the same package:
+
+```tsx
+import { ChildrenHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
+
+function example() {
+  return (
+    <div>
+      <HoverHighlighter>
+        <App />
+      </HoverHighlighter>
+
+      <ChildrenHighlighter>
+        <App />
+      </ChildrenHighlighter>
+    </div>
+  );
+}
+```
+
+### Debounce
+
+Normally, moving quickly between elements could produce a jitter effect, where the highlighter "jumps" between elements, making interaction difficult.
+A debounce mitigates this by batching re-targets and smooths out the experience.  
+First time selection will always happen immediately, for a snappy experience.
+
+You can control the debounce rate with the `debounceSelection` prop. (default - `80ms`)
+
+## Exclusions Zones
+
+To disabled highlighting in a specific area of the DOM, you can use the `<ExcludeHighlighter />` component:
+
+```tsx
+import { ExcludeHighlighter, excludeHighlighterAtt } from '@teambit/react.ui.component-highlighter';
+
+// ...
+
+return (
+  <div>
+    <ExcludeHighlighter>
+      <Card>this component will not be highlighted</Card>
+    </ExcludeHighlighter>
+
+    {/* you can also add the exclude attribute without making a new div */}
+    <Card {...excludeHighlighterAtt}>this component will also be skipped</Card>
+  </div>
+);
+```
+
+Another options would be use use the `rule` prop.  
+Inspired by Webpack rules, it provides a query selector or function that the highlighter target will have to match.  
+For example:
+
+```tsx
+<ComponentHighlighter rule="#include *">
+  <Button>will not be highlighted</Button>
+  <div id="include">
+    <Button>this will be highlighted</Button>
+  </div>
+</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
+
+```css
+--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:
+
+```tsx
+<ComponentHighlighter bgColor="#eebcc9" bgColorHover="#f6dae2" bgColorActive="#e79db1">
+  ...
+</ComponentHighlighter>
+```
+
+And for complete control, you can pass these classes:
+
+```tsx
+const classes = {
+  /** containing div */
+  container?: string;
+  /** border */
+  frame?: string;
+  /** component id links */
+  label?: string;
+};
+
+<ComponentHighlighter classes={classes}>
+  ...
+</ComponentHighlighter>
+```
+
+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)

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ChildrenHighlighterPreview: () => React.JSX.Element;
+export declare const ChildrenHighlighterWithCustomColors: () => React.JSX.Element;
+export declare const ChildrenHighlighterInsideIgnore: () => React.JSX.Element;
+export declare const ChildrenHighlighterWithRule: () => React.JSX.Element;
+export declare const ChildrenHighlighterWithComponentRule: () => React.JSX.Element;

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

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 ignore_highlighter_1 = require("../ignore-highlighter");
+const children_highlighter_1 = require("./children-highlighter");
+const mock_component_1 = require("../mock-component");
+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, "target #1"),
+        react_1.default.createElement("br", null),
+        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, "target #2")));
+};
+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.ChildrenHighlighterWithCustomColors = ChildrenHighlighterWithCustomColors;
+const ChildrenHighlighterInsideIgnore = () => {
+    return (react_1.default.createElement(ignore_highlighter_1.ExcludeHighlighter, 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),
+            "It should only skip exclusion zones inside of it.",
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "also here"))));
+};
+exports.ChildrenHighlighterInsideIgnore = ChildrenHighlighterInsideIgnore;
+const ChildrenHighlighterWithRule = () => {
+    const rule = '#someSubTree *';
+    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { rule: rule, style: { minWidth: 300, fontFamily: 'sans-serif' } },
+        react_1.default.createElement("div", null,
+            "element filter: ",
+            react_1.default.createElement("code", null,
+                "\"",
+                rule,
+                "\"")),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "no highlighter"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("div", { id: "someSubTree" },
+            react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "this will be highlighted"))));
+};
+exports.ChildrenHighlighterWithRule = ChildrenHighlighterWithRule;
+const ChildrenHighlighterWithComponentRule = () => {
+    const filterTarget = 'teambit.design/ui/mock-target';
+    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { componentRule: filterTarget, style: { minWidth: 300, fontFamily: 'sans-serif' } },
+        react_1.default.createElement("div", null,
+            "component filter: ",
+            react_1.default.createElement("code", null,
+                "\"",
+                filterTarget,
+                "\"")),
+        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(mock_component_1.MockTarget, { style: { display: 'inline-block', margin: '0 8px' } }, "this will be highlighted")));
+};
+exports.ChildrenHighlighterWithComponentRule = ChildrenHighlighterWithComponentRule;
+// export const HighlightingAllElementsInTheEnterprisePage = () => {
+//   return (
+//     <ChildrenHighlighter>
+//       <EnterpriseOffering style={{ height: 300 }} />
+//     </ChildrenHighlighter>
+//   );
+// };
+//# 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,8DAA2D;AAC3D,iEAA6D;AAC7D,sDAA+C;AAExC,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,oBAAoC;QAC5D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CACxC,CACvB,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,0BAA0B,8BAYrC;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,MAAM,IAAI,GAAG,gBAAgB,CAAC;IAE9B,OAAO,CACL,8BAAC,0CAAmB,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QACjF;;YACkB;;gBAAQ,IAAI;qBAAS,CACjC;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;AAlBW,QAAA,2BAA2B,+BAkBtC;AAEK,MAAM,oCAAoC,GAAG,GAAG,EAAE;IACvD,MAAM,YAAY,GAAG,+BAA+B,CAAC;IAErD,OAAO,CACL,8BAAC,0CAAmB,IAAC,aAAa,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAClG;;YACoB;;gBAAQ,YAAY;qBAAS,CAC3C;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,2BAAU,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,+BAAuC,CAClF,CACvB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,oCAAoC,wCAgB/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,4 @@
+import React from 'react';
+import { HybridHighlighterProps } from '../hybrid-highlighter';
+export type ChildrenHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
+export declare function ChildrenHighlighter({ watchMotion, ...props }: ChildrenHighlighterProps): React.JSX.Element;

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

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChildrenHighlighter = ChildrenHighlighter;
+const react_1 = __importDefault(require("react"));
+const hybrid_highlighter_1 = require("../hybrid-highlighter");
+function ChildrenHighlighter(_a) {
+    var { watchMotion = false } = _a, props = __rest(_a, ["watchMotion"]);
+    return react_1.default.createElement(hybrid_highlighter_1.HybridHighlighter, Object.assign({}, props, { mode: 'allChildren', watchMotion: watchMotion }));
+}
+//# 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":";;;;;;;;;;;;;;;;AAMA,kDAEC;AARD,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"}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+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('target #1');
+    expect(rendered).toBeInstanceOf(HTMLElement);
+});
+// .querySelectorAll() is not working as expected during the test, ignoring for now :(
+// it('should render highlighter for all children components', async () => {
+//   const { queryAllByText } = render(<Preview />);
+//   // allow useEffect to run
+//   await new Promise((res) => setTimeout(res, 200));
+//   const rendered = queryAllByText('input/button');
+//   expect(rendered).toHaveLength(2);
+// });
+//# 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,WAAW,CAAC,CAAC;IAExC,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/children-highlighter/use-children-highlighter.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { MatchRule, ComponentMatchRule } from '../rule-matcher';
+type HighlighterTarget = Record<string, {
+    element: HTMLElement;
+    components: ComponentMetaHolder[];
+}>;
+export type ChildrenHighlighterOptions = {
+    onChange: (highlighterTargets: HighlighterTarget) => 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 useChildrenHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector, rule, componentRule, }: ChildrenHighlighterOptions): void;
+export {};