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

package/component-highlighter.docs.md

@@ -12,18 +12,18 @@ It is mostly used for compositions debugging.
 
 ## How to use?
 
-Simplest way to use the component is by wrapping your code with `HoverHighlighter`.  
+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 { HoverHighlighter } from '@teambit/react.ui.component-highlighter';
+import { ComponentHighlighter } from '@teambit/react.ui.component-highlighter';
 
 function App() {
   return (
-    <HoverHighlighter>
+    <ComponentHighlighter>
       <Header />
       <Feed />
-    </HoverHighlighter>
+    </ComponentHighlighter>
   );
 }
 ```
@@ -31,25 +31,29 @@ function App() {
 You can also use it manually, to have more control:
 
 ```tsx
-const [element, setElement] = useState<HTMLElement | undefined>(undefined);
+import { ElementHighlighter } from '@teambit/react.ui.component-highlighter';
 
-useEffect(() => setElement(document.getElementById('to-highlight')), [targetRef.current]);
+function ManualHighlight() {
+  const [element, setElement] = useState<HTMLElement | undefined>(undefined);
 
-const target = targetElement && {
-  element: targetElement,
-  id: 'teambit.design/ui/icon-button',
+  useEffect(() => setElement(document.getElementById('to-highlight')), [targetRef.current]);
 
-  // explicit overrides:
-  link: 'https://bit.dev/teambit/design/ui/icon-button',
-  scopeLink: 'https://bit.dev/teambit/design',
-};
+  const target = targetElement && {
+    element: targetElement,
+    id: 'teambit.design/ui/icon-button',
 
-return (
-  <div>
-    <div id="to-highlight">highlight target</div>
-    {target && <ElementHighlighter target={target} />}
-  </div>
-);
+    // explicit overrides:
+    link: 'https://bit.dev/teambit/design/ui/icon-button',
+    scopeLink: 'https://bit.dev/teambit/design',
+  };
+
+  return (
+    <div>
+      <div id="to-highlight">highlight target</div>
+      {target && <ElementHighlighter target={target} />}
+    </div>
+  );
+}
 ```
 
 ## How does it work?
@@ -60,7 +64,7 @@ The automatic highlighter then adds an event listener for hover events, which au
 
 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`.  
+> 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:
@@ -80,6 +84,33 @@ export function Button() {
 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 { MultiHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
+
+function example() {
+  return (
+    <div>
+      <HoverHighlighter>
+        <App />
+      </HoverHighlighter>
+
+      <MultiHighlighter>
+        <App />
+      </MultiHighlighter>
+    </div>
+  );
+}
+```
+
 ### Debounce
 
 Normally, moving quickly between elements could produce a jitter effect, where the highlighter "jumps" between elements, making interaction difficult.
@@ -88,24 +119,40 @@ First time selection will always happen immediately, for a snappy experience.
 
 You can control the debounce rate with the `debounceSelection` prop. (default - `80ms`)
 
-## Multi highlighter
+## Exclusions Zones
 
-This component is similar to the Hover Highlighter, but provides automatic highlighting to all components nested inside it.
-
-Simply wrap your code like so, and see the highlighting in action:
+To disabled highlighting in a specific area of the DOM, you can use the `<ExcludeHighlighter />` component:
 
 ```tsx
-import { MultiHighlighter } from '@teambit/react.ui.component-highlighter';
+import { ExcludeHighlighter, excludeHighlighterAtt } from '@teambit/react.ui.component-highlighter';
 
 // ...
 
 return (
-  <MultiHighlighter>
-    <App />
-  </MultiHighlighter>
+  <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>
+```
+
 ## Customization
 
 Use these CSS variables to edit the highlighter color
@@ -116,7 +163,15 @@ Use these CSS variables to edit the highlighter color
 --bit-highlighter-color-active: #e79db1;
 ```
 
-You can also pass these classes for complete control:
+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 = {
@@ -128,9 +183,9 @@ const classes = {
   label?: string;
 };
 
-<HoverHighlighter classes={classes}>
+<ComponentHighlighter classes={classes}>
   ...
-</HoverHighlighter>
+</ComponentHighlighter>
 ```
 
 You can control the size using regular `font-size`.  

package/dist/component-highlighter.docs.md

@@ -12,18 +12,18 @@ It is mostly used for compositions debugging.
 
 ## How to use?
 
-Simplest way to use the component is by wrapping your code with `HoverHighlighter`.  
+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 { HoverHighlighter } from '@teambit/react.ui.component-highlighter';
+import { ComponentHighlighter } from '@teambit/react.ui.component-highlighter';
 
 function App() {
   return (
-    <HoverHighlighter>
+    <ComponentHighlighter>
       <Header />
       <Feed />
-    </HoverHighlighter>
+    </ComponentHighlighter>
   );
 }
 ```
@@ -31,25 +31,29 @@ function App() {
 You can also use it manually, to have more control:
 
 ```tsx
-const [element, setElement] = useState<HTMLElement | undefined>(undefined);
+import { ElementHighlighter } from '@teambit/react.ui.component-highlighter';
 
-useEffect(() => setElement(document.getElementById('to-highlight')), [targetRef.current]);
+function ManualHighlight() {
+  const [element, setElement] = useState<HTMLElement | undefined>(undefined);
 
-const target = targetElement && {
-  element: targetElement,
-  id: 'teambit.design/ui/icon-button',
+  useEffect(() => setElement(document.getElementById('to-highlight')), [targetRef.current]);
 
-  // explicit overrides:
-  link: 'https://bit.dev/teambit/design/ui/icon-button',
-  scopeLink: 'https://bit.dev/teambit/design',
-};
+  const target = targetElement && {
+    element: targetElement,
+    id: 'teambit.design/ui/icon-button',
 
-return (
-  <div>
-    <div id="to-highlight">highlight target</div>
-    {target && <ElementHighlighter target={target} />}
-  </div>
-);
+    // explicit overrides:
+    link: 'https://bit.dev/teambit/design/ui/icon-button',
+    scopeLink: 'https://bit.dev/teambit/design',
+  };
+
+  return (
+    <div>
+      <div id="to-highlight">highlight target</div>
+      {target && <ElementHighlighter target={target} />}
+    </div>
+  );
+}
 ```
 
 ## How does it work?
@@ -60,7 +64,7 @@ The automatic highlighter then adds an event listener for hover events, which au
 
 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`.  
+> 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:
@@ -80,6 +84,33 @@ export function Button() {
 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 { MultiHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
+
+function example() {
+  return (
+    <div>
+      <HoverHighlighter>
+        <App />
+      </HoverHighlighter>
+
+      <MultiHighlighter>
+        <App />
+      </MultiHighlighter>
+    </div>
+  );
+}
+```
+
 ### Debounce
 
 Normally, moving quickly between elements could produce a jitter effect, where the highlighter "jumps" between elements, making interaction difficult.
@@ -88,24 +119,40 @@ First time selection will always happen immediately, for a snappy experience.
 
 You can control the debounce rate with the `debounceSelection` prop. (default - `80ms`)
 
-## Multi highlighter
+## Exclusions Zones
 
-This component is similar to the Hover Highlighter, but provides automatic highlighting to all components nested inside it.
-
-Simply wrap your code like so, and see the highlighting in action:
+To disabled highlighting in a specific area of the DOM, you can use the `<ExcludeHighlighter />` component:
 
 ```tsx
-import { MultiHighlighter } from '@teambit/react.ui.component-highlighter';
+import { ExcludeHighlighter, excludeHighlighterAtt } from '@teambit/react.ui.component-highlighter';
 
 // ...
 
 return (
-  <MultiHighlighter>
-    <App />
-  </MultiHighlighter>
+  <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>
+```
+
 ## Customization
 
 Use these CSS variables to edit the highlighter color
@@ -116,7 +163,15 @@ Use these CSS variables to edit the highlighter color
 --bit-highlighter-color-active: #e79db1;
 ```
 
-You can also pass these classes for complete control:
+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 = {
@@ -128,9 +183,9 @@ const classes = {
   label?: string;
 };
 
-<HoverHighlighter classes={classes}>
+<ComponentHighlighter classes={classes}>
   ...
-</HoverHighlighter>
+</ComponentHighlighter>
 ```
 
 You can control the size using regular `font-size`.  

package/dist/{component-highlighter/hover-highlighter → hover-highlighter}/hover-highlighter.compositions.js

@@ -25,13 +25,16 @@ const design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
 const hover_highlighter_1 = require("./hover-highlighter");
 const ShowWhenHovering = () => {
     const [disabled, setDisabled] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", { style: { padding: '16px 80px 32px 16px' } },
+    return (react_1.default.createElement("div", { style: { padding: '16px 50px 32px 16px', minWidth: 300 } },
         react_1.default.createElement(hover_highlighter_1.HoverHighlighter, { style: { padding: 16 }, disabled: disabled },
             react_1.default.createElement("div", null,
-                "some div",
                 react_1.default.createElement("br", null),
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement(design_ui_icon_button_1.IconButton, { onClick: () => setDisabled((x) => !x) }, "Hover here"))))));
+                    react_1.default.createElement(design_ui_icon_button_1.IconButton, { onClick: () => setDisabled((x) => !x) }, "Hover here")),
+                react_1.default.createElement("div", null,
+                    disabled ? 'X' : '✓',
+                    " highlighter is ",
+                    disabled ? 'disabled' : 'enabled')))));
 };
 exports.ShowWhenHovering = ShowWhenHovering;
 //# sourceMappingURL=hover-highlighter.compositions.js.map

package/dist/hover-highlighter/hover-highlighter.compositions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-highlighter.compositions.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,0EAA4D;AAC5D,2DAAuD;AAEhD,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEzD,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,GAAG,EAAE;QAC3D,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC1D;gBACE,yCAAM;gBACN;oBACE,8BAAC,kCAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAyB,CACtE;gBACN;oBACG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;oBAAkB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CACpE,CACF,CACW,CACf,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,gBAAgB,oBAkB3B"}

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

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

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

@@ -0,0 +1,25 @@
+"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.HoverHighlighter = void 0;
+const react_1 = __importDefault(require("react"));
+const hybrid_highligher_1 = require("../hybrid-highligher");
+function HoverHighlighter(_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement(hybrid_highligher_1.HybridHighlighter, Object.assign({}, props, { mode: 'hover' }));
+}
+exports.HoverHighlighter = HoverHighlighter;
+//# sourceMappingURL=hover-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAiF;AAIjF,SAAgB,gBAAgB,CAAC,EAAmC;QAA9B,KAAK,cAAV,EAAY,CAAF;IACzC,OAAO,8BAAC,qCAAiB,oBAAK,KAAK,IAAE,IAAI,EAAE,OAAO,IAAI,CAAC;AACzD,CAAC;AAFD,4CAEC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"hover-highlighter.spec.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.spec.tsx"],"names":[],"mappings":"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"}

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

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

package/dist/hover-highlighter/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HoverHighlighter = exports.useHoverHighlighter = void 0;
+var use_hover_highlighter_1 = require("./use-hover-highlighter");
+Object.defineProperty(exports, "useHoverHighlighter", { enumerable: true, get: function () { return use_hover_highlighter_1.useHoverHighlighter; } });
+var hover_highlighter_1 = require("./hover-highlighter");
+Object.defineProperty(exports, "HoverHighlighter", { enumerable: true, get: function () { return hover_highlighter_1.HoverHighlighter; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../hover-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,iEAA8D;AAArD,4HAAA,mBAAmB,OAAA;AAG5B,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA"}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { HighlightTarget } from '../element-highlighter';
+import { MatchRule } from '../rule-matcher';
+export declare type useHoverHighlighterOptions = {
+    debounceDuration: number;
+    scopeClass: string;
+    disabled?: boolean;
+    rule?: MatchRule;
+};
+/** 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;
+} | {
+    onMouseOver?: undefined;
+    onMouseLeave?: undefined;
+};

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHoverHighlighter = void 0;
+const react_1 = require("react");
+const use_debounce_1 = require("use-debounce");
+const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-react");
+const react_ui_hover_selector_1 = require("@teambit/react.ui.hover-selector");
+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");
+/** fires onChange when targeting a new component */
+function useHoverHighlighter(onChange, props = {}, { debounceDuration, scopeClass, disabled, rule }) {
+    const { handleElement } = useHoverHandler({ onChange, scopeClass, debounceDuration, disabled, rule });
+    const handlers = (0, react_ui_hover_selector_1.useHoverSelection)(disabled ? undefined : handleElement, props);
+    return handlers;
+}
+exports.useHoverHighlighter = useHoverHighlighter;
+function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled, rule }) {
+    // debounced method is ref'ed, so no need for useCallback
+    const _handleElement = (element) => {
+        // clear highlighter at the edges:
+        if (!element || element.hasAttribute('data-nullify-component-highlight')) {
+            onChange(undefined);
+            return;
+        }
+        // skip DOM trees having 'data-ignore-component-highlight'
+        if (element.closest(`.${scopeClass} ${ignore_highlighter_1.excludeHighlighterSelector}`))
+            return;
+        const result = bubbleToBitComponent(element, rule ? (current) => (0, rule_matcher_1.ruleMatcher)(current, rule) : undefined);
+        if (!result)
+            return;
+        onChange({
+            element: result.element,
+            id: result.meta.id,
+            scopeLink: undefined,
+            link: result.meta.homepage,
+            local: result.meta.exported === false,
+        });
+    };
+    const handleElement = (0, use_debounce_1.useDebouncedCallback)(_handleElement, debounceDuration);
+    // clear when disabling
+    (0, react_1.useEffect)(() => {
+        if (disabled)
+            handleElement.cancel();
+    }, [disabled, handleElement]);
+    return { handleElement };
+}
+/** go up the dom tree until reaching a react bit component */
+function bubbleToBitComponent(element, filter) {
+    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)
+            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,
+            };
+        }
+    }
+    return undefined;
+}
+//# sourceMappingURL=use-hover-highlighter.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,34 @@
+import React, { CSSProperties } from 'react';
+import { Placement, HighlightClasses } from '../element-highlighter';
+import type { MatchRule } from '../rule-matcher';
+export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** stop all highlighting and drop listeners */
+    disabled?: boolean;
+    /** default pop location for the label */
+    placement?: Placement;
+    /** customize styles */
+    classes?: HighlightClasses;
+    /** customize highlighter */
+    highlightStyle?: CSSProperties;
+    /** debounces element hover selection.
+     * A higher value will reduce element lookups as well as "keep" the highlight on the current element for longer.
+     * Initial selection (when no element is currently selected) will always happen immediately to improve the user experience.
+     * @default 80ms
+     */
+    debounceSelection?: number;
+    /** continually update frame position to match moving elements */
+    watchMotion?: boolean;
+    /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
+    rule?: MatchRule;
+    /** set the behavior of the highlighter.
+     * `disabled` - stops highlighting.
+     * `allChildren` - highlights all components rendered under children
+     * `hover` - highlighters the component immediately under the mouse cursor
+     * */
+    mode?: 'allChildren' | 'hover';
+    bgColor?: string;
+    bgColorHover?: string;
+    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;