@teambit/react.ui.component-highlighter 0.0.479 → 0.0.483

package/component-highlighter/hover-highlighter/hover-highlighter.spec.tsx

@@ -1,11 +1,11 @@
 import React, { ReactNode } from 'react';
 import { act } from 'react-dom/test-utils';
 import { render, fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
-import { ComponentMeta, componentMetaField } from '@teambit/react.babel.bit-react-transformer';
+import { ComponentMeta, componentMetaField } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 
 import { HoverHighlighter } from './hover-highlighter';
 
-const debounceTime = 1;
+const debounceTime = 2;
 
 function ButtonComponent({ children }: { children: ReactNode }) {
   return <button>{children}</button>;
@@ -30,24 +30,23 @@ it('should show bubble when hovering on element with bit id', async () => {
   });
 
   const highlightBubble = await findByText('input/button');
-  expect(highlightBubble).toBeTruthy();
+  expect(highlightBubble).toBeInstanceOf(HTMLElement);
 });
 
-it('should hide the highlight when hovering out', async () => {
+it('should hide the highlight when hovering out of the element', async () => {
   const { getByText, findByText, queryByText } = render(
     <HoverHighlighter debounceSelection={debounceTime}>
       <ButtonComponent>hover here</ButtonComponent>
     </HoverHighlighter>
   );
   const rendered = getByText('hover here');
-  expect(rendered).toBeTruthy();
 
   act(() => {
     fireEvent.mouseOver(rendered);
   });
 
   const highlightBubble = await findByText('input/button');
-  expect(highlightBubble).toBeTruthy();
+  expect(highlightBubble).toBeInstanceOf(HTMLElement);
 
   act(() => {
     fireEvent.mouseOut(rendered);
@@ -55,14 +54,13 @@ it('should hide the highlight when hovering out', async () => {
   await waitForElementToBeRemoved(() => queryByText('input/button'));
 });
 
-it('should keep the highlighter when hovering on it (even when moving out of the component zone', async () => {
+it('should keep the highlighter, when hovering on it (even when moving out of the component zone)', async () => {
   const { getByText, findByText } = render(
     <HoverHighlighter debounceSelection={debounceTime}>
       <ButtonComponent>hover here</ButtonComponent>
     </HoverHighlighter>
   );
   const rendered = getByText('hover here');
-  expect(rendered).toBeTruthy();
 
   act(() => {
     // hover on target element:
@@ -70,19 +68,48 @@ it('should keep the highlighter when hovering on it (even when moving out of the
   });
 
   const highlightBubble = await findByText('input/button');
-  expect(highlightBubble).toBeTruthy();
 
   await act(async () => {
     // move mouse out of target element, "towards" the highlighter bubble
+    // this should trigger hiding
     fireEvent.mouseOut(rendered);
 
     // move mouse into the highlighter bubble
     fireEvent.mouseEnter(highlightBubble);
     // allow react to update state during the act()
-    // and before verify highlighter remains
+    // and before verifying highlighter remains
     await new Promise((resolve) => setTimeout(resolve, debounceTime + 10));
   });
 
   // highlighter should still focus the target button
-  expect(await findByText('input/button')).toBeTruthy();
+  expect(await findByText('input/button')).toBeInstanceOf(HTMLElement);
+});
+
+it('should hide the highlighter when moving the mouse away of it', async () => {
+  const { getByText, queryByText, findByText } = render(
+    <HoverHighlighter debounceSelection={debounceTime}>
+      <ButtonComponent>hover here</ButtonComponent>
+    </HoverHighlighter>
+  );
+
+  const rendered = getByText('hover here');
+
+  // hover on target element:
+  await act(async () => {
+    fireEvent.mouseOver(rendered);
+  });
+
+  const highlightBubble = await findByText('input/button');
+
+  await act(async () => {
+    // hover on highlighter
+    fireEvent.mouseEnter(highlightBubble);
+    // leave the highlighter
+    fireEvent.mouseOut(highlightBubble);
+    await new Promise((resolve) => setTimeout(resolve, debounceTime + 10));
+  });
+
+  // highlighter sometimes disappears before this check,
+  // so not using waitForElementToBeRemoved, and using setTimeout instead
+  expect(queryByText('input/button')).toBeNull();
 });

package/component-highlighter/hover-highlighter/hover-highlighter.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { useDebouncedCallback } from 'use-debounce';
 import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
 import { HoverSelector } from '@teambit/react.ui.hover-selector';
-import { hasComponentMeta } from '../bit-react-component';
+import { hasComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 
 import styles from './hover-highlighter.module.scss';
 import { excludeHighlighterSelector } from '../../ignore-highlighter';
@@ -23,6 +23,8 @@ export interface HoverHighlighterProps extends React.HTMLAttributes<HTMLDivEleme
    * @default 80ms
    */
   debounceSelection?: number;
+  /** continually update frame position to match moving elements */
+  watchMotion?: boolean;
 }
 
 /** automatically highlight components on hover */
@@ -33,6 +35,7 @@ export function HoverHighlighter({
   highlightStyle,
   placement,
   debounceSelection = 80,
+  watchMotion = true,
   ...rest
 }: HoverHighlighterProps) {
   const [target, setTarget] = useState<HighlightTarget | undefined>();
@@ -69,28 +72,28 @@ export function HoverHighlighter({
   }, [disabled]);
 
   return (
-    <>
-      <HoverSelector
-        {...rest}
-        className={classnames(styles.highlighter, !disabled && styles.active)}
-        onElementChange={handleElement}
-        disabled={disabled}
-        data-nullify-component-highlight
-      >
-        {children}
-      </HoverSelector>
+    <HoverSelector
+      {...rest}
+      className={classnames(styles.highlighter, !disabled && styles.active)}
+      onElementChange={handleElement}
+      disabled={disabled}
+      data-nullify-component-highlight
+    >
+      {children}
+      {/*
+       * keep the highlighter inside of the hover selector, or it could disappear when switching between elements
+       * the excludeHighlighterAtt will ensure it doesn't turn into a recursion.
+       */}
       {target && (
         <ElementHighlighter
           target={target}
           classes={classes}
           style={highlightStyle}
           placement={placement}
-          // could also achieve this by moving the ElementHighlighter into HoverSelector.
-          // it will be ignored thanks to the excludeHighlighter attribute.
-          onMouseEnter={handleElement.cancel}
+          watchMotion={watchMotion}
         />
       )}
-    </>
+    </HoverSelector>
   );
 }
 

package/component-highlighter.docs.md

@@ -16,7 +16,7 @@ Simplest way to use the component is by wrapping your code with `HoverHighlighte
 It will automatically detect components from DOM elements, just by hovering on them.
 
 ```tsx
-import { HoverHighlightbr } from '@teambit/react.ui.component-highlighter';
+import { HoverHighlighter } from '@teambit/react.ui.component-highlighter';
 
 function App() {
   return (
@@ -33,9 +33,7 @@ You can also use it manually, to have more control:
 ```tsx
 const [element, setElement] = useState<HTMLElement | undefined>(undefined);
 
-useEffect(() => setElement(
-    document.getElementById('to-highlight')
-), [targetRef.current]);
+useEffect(() => setElement(document.getElementById('to-highlight')), [targetRef.current]);
 
 const target = targetElement && {
   element: targetElement,
@@ -55,22 +53,24 @@ return (
 ```
 
 ## 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.
+> 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', 
+  homepage: 'https://bit.dev/teambit/base-ui/input/button',
   exported: true,
-}
+};
 
 export function Button() {
   return <div>click me!</div>;
@@ -80,9 +80,36 @@ export function Button() {
 Button.__bit_component = __bit_component;
 ```
 
+### 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`)
+
+## Multi highlighter
+
+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:
+
+```tsx
+import { MultiHighlighter } from '@teambit/react.ui.component-highlighter';
+
+// ...
+
+return (
+  <MultiHighlighter>
+    <App />
+  </MultiHighlighter>
+);
+```
+
 ## Customization
 
 Use these CSS variables to edit the highlighter color
+
 ```css
 --bit-highlighter-color: #eebcc9;
 --bit-highlighter-color-hover: #f6dae2;

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

@@ -14,6 +14,8 @@ export interface HoverHighlighterProps extends React.HTMLAttributes<HTMLDivEleme
      * @default 80ms
      */
     debounceSelection?: number;
+    /** continually update frame position to match moving elements */
+    watchMotion?: boolean;
 }
 /** automatically highlight components on hover */
-export declare function HoverHighlighter({ children, disabled, classes, highlightStyle, placement, debounceSelection, ...rest }: HoverHighlighterProps): JSX.Element;
+export declare function HoverHighlighter({ children, disabled, classes, highlightStyle, placement, debounceSelection, watchMotion, ...rest }: HoverHighlighterProps): JSX.Element;

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

@@ -39,13 +39,13 @@ const classnames_1 = __importDefault(require("classnames"));
 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 bit_react_component_1 = require("../bit-react-component");
+const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
 const hover_highlighter_module_scss_1 = __importDefault(require("./hover-highlighter.module.scss"));
 const ignore_highlighter_1 = require("../../ignore-highlighter");
 const element_highlighter_1 = require("../../element-highlighter");
 /** automatically highlight components on hover */
 function HoverHighlighter(_a) {
-    var { children, disabled, classes, highlightStyle, placement, debounceSelection = 80 } = _a, rest = __rest(_a, ["children", "disabled", "classes", "highlightStyle", "placement", "debounceSelection"]);
+    var { children, disabled, classes, highlightStyle, placement, debounceSelection = 80, watchMotion = true } = _a, rest = __rest(_a, ["children", "disabled", "classes", "highlightStyle", "placement", "debounceSelection", "watchMotion"]);
     const [target, setTarget] = (0, react_1.useState)();
     const _handleElement = (0, react_1.useCallback)((element) => {
         // clear highlighter at the edges:
@@ -74,12 +74,9 @@ function HoverHighlighter(_a) {
             setTarget(undefined);
         }
     }, [disabled]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_ui_hover_selector_1.HoverSelector, Object.assign({}, rest, { className: (0, classnames_1.default)(hover_highlighter_module_scss_1.default.highlighter, !disabled && hover_highlighter_module_scss_1.default.active), onElementChange: handleElement, disabled: disabled, "data-nullify-component-highlight": true }), children),
-        target && (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, classes: classes, style: highlightStyle, placement: placement, 
-            // could also achieve this by moving the ElementHighlighter into HoverSelector.
-            // it will be ignored thanks to the excludeHighlighter attribute.
-            onMouseEnter: handleElement.cancel }))));
+    return (react_1.default.createElement(react_ui_hover_selector_1.HoverSelector, Object.assign({}, rest, { className: (0, classnames_1.default)(hover_highlighter_module_scss_1.default.highlighter, !disabled && hover_highlighter_module_scss_1.default.active), onElementChange: handleElement, disabled: disabled, "data-nullify-component-highlight": true }),
+        children,
+        target && (react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, classes: classes, style: highlightStyle, placement: placement, watchMotion: watchMotion }))));
 }
 exports.HoverHighlighter = HoverHighlighter;
 /** go up the dom tree until reaching a react bit component */
@@ -89,7 +86,7 @@ function bubbleToBitComponent(element, filter) {
         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, bit_react_component_1.hasComponentMeta)(component)) {
+        if ((0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(component)) {
             const meta = component.__bit_component;
             return {
                 element: current,

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

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

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

@@ -15,13 +15,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const test_utils_1 = require("react-dom/test-utils");
 const react_2 = require("@testing-library/react");
-const react_babel_bit_react_transformer_1 = require("@teambit/react.babel.bit-react-transformer");
+const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
 const hover_highlighter_1 = require("./hover-highlighter");
-const debounceTime = 1;
+const debounceTime = 2;
 function ButtonComponent({ children }) {
     return react_1.default.createElement("button", null, children);
 }
-ButtonComponent[react_babel_bit_react_transformer_1.componentMetaField] = {
+ButtonComponent[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] = {
     // could use a non-bit-id to render the "default" bubble
     id: 'teambit.base-ui/input/button',
 };
@@ -34,44 +34,62 @@ it('should show bubble when hovering on element with bit id', () => __awaiter(vo
         react_2.fireEvent.mouseOver(rendered);
     });
     const highlightBubble = yield findByText('input/button');
-    expect(highlightBubble).toBeTruthy();
+    expect(highlightBubble).toBeInstanceOf(HTMLElement);
 }));
-it('should hide the highlight when hovering out', () => __awaiter(void 0, void 0, void 0, function* () {
+it('should hide the highlight when hovering out of the element', () => __awaiter(void 0, void 0, void 0, function* () {
     const { getByText, findByText, queryByText } = (0, react_2.render)(react_1.default.createElement(hover_highlighter_1.HoverHighlighter, { debounceSelection: debounceTime },
         react_1.default.createElement(ButtonComponent, null, "hover here")));
     const rendered = getByText('hover here');
-    expect(rendered).toBeTruthy();
     (0, test_utils_1.act)(() => {
         react_2.fireEvent.mouseOver(rendered);
     });
     const highlightBubble = yield findByText('input/button');
-    expect(highlightBubble).toBeTruthy();
+    expect(highlightBubble).toBeInstanceOf(HTMLElement);
     (0, test_utils_1.act)(() => {
         react_2.fireEvent.mouseOut(rendered);
     });
     yield (0, react_2.waitForElementToBeRemoved)(() => queryByText('input/button'));
 }));
-it('should keep the highlighter when hovering on it (even when moving out of the component zone', () => __awaiter(void 0, void 0, void 0, function* () {
+it('should keep the highlighter, when hovering on it (even when moving out of the component zone)', () => __awaiter(void 0, void 0, void 0, function* () {
     const { getByText, findByText } = (0, react_2.render)(react_1.default.createElement(hover_highlighter_1.HoverHighlighter, { debounceSelection: debounceTime },
         react_1.default.createElement(ButtonComponent, null, "hover here")));
     const rendered = getByText('hover here');
-    expect(rendered).toBeTruthy();
     (0, test_utils_1.act)(() => {
         // hover on target element:
         react_2.fireEvent.mouseOver(rendered);
     });
     const highlightBubble = yield findByText('input/button');
-    expect(highlightBubble).toBeTruthy();
     yield (0, test_utils_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
         // move mouse out of target element, "towards" the highlighter bubble
+        // this should trigger hiding
         react_2.fireEvent.mouseOut(rendered);
         // move mouse into the highlighter bubble
         react_2.fireEvent.mouseEnter(highlightBubble);
         // allow react to update state during the act()
-        // and before verify highlighter remains
+        // and before verifying highlighter remains
         yield new Promise((resolve) => setTimeout(resolve, debounceTime + 10));
     }));
     // highlighter should still focus the target button
-    expect(yield findByText('input/button')).toBeTruthy();
+    expect(yield findByText('input/button')).toBeInstanceOf(HTMLElement);
+}));
+it('should hide the highlighter when moving the mouse away of it', () => __awaiter(void 0, void 0, void 0, function* () {
+    const { getByText, queryByText, findByText } = (0, react_2.render)(react_1.default.createElement(hover_highlighter_1.HoverHighlighter, { debounceSelection: debounceTime },
+        react_1.default.createElement(ButtonComponent, null, "hover here")));
+    const rendered = getByText('hover here');
+    // hover on target element:
+    yield (0, test_utils_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+        react_2.fireEvent.mouseOver(rendered);
+    }));
+    const highlightBubble = yield findByText('input/button');
+    yield (0, test_utils_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+        // hover on highlighter
+        react_2.fireEvent.mouseEnter(highlightBubble);
+        // leave the highlighter
+        react_2.fireEvent.mouseOut(highlightBubble);
+        yield new Promise((resolve) => setTimeout(resolve, debounceTime + 10));
+    }));
+    // highlighter sometimes disappears before this check,
+    // so not using waitForElementToBeRemoved, and using setTimeout instead
+    expect(queryByText('input/button')).toBeNull();
 }));
 //# sourceMappingURL=hover-highlighter.spec.js.map

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

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

package/dist/component-highlighter.docs.md

@@ -16,7 +16,7 @@ Simplest way to use the component is by wrapping your code with `HoverHighlighte
 It will automatically detect components from DOM elements, just by hovering on them.
 
 ```tsx
-import { HoverHighlightbr } from '@teambit/react.ui.component-highlighter';
+import { HoverHighlighter } from '@teambit/react.ui.component-highlighter';
 
 function App() {
   return (
@@ -33,9 +33,7 @@ You can also use it manually, to have more control:
 ```tsx
 const [element, setElement] = useState<HTMLElement | undefined>(undefined);
 
-useEffect(() => setElement(
-    document.getElementById('to-highlight')
-), [targetRef.current]);
+useEffect(() => setElement(document.getElementById('to-highlight')), [targetRef.current]);
 
 const target = targetElement && {
   element: targetElement,
@@ -55,22 +53,24 @@ return (
 ```
 
 ## 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.
+> 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', 
+  homepage: 'https://bit.dev/teambit/base-ui/input/button',
   exported: true,
-}
+};
 
 export function Button() {
   return <div>click me!</div>;
@@ -80,9 +80,36 @@ export function Button() {
 Button.__bit_component = __bit_component;
 ```
 
+### 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`)
+
+## Multi highlighter
+
+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:
+
+```tsx
+import { MultiHighlighter } from '@teambit/react.ui.component-highlighter';
+
+// ...
+
+return (
+  <MultiHighlighter>
+    <App />
+  </MultiHighlighter>
+);
+```
+
 ## Customization
 
 Use these CSS variables to edit the highlighter color
+
 ```css
 --bit-highlighter-color: #eebcc9;
 --bit-highlighter-color-hover: #f6dae2;

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

@@ -1,6 +1,12 @@
-export declare const HighlightedElement: ({ style, className }: {
-    style?: Record<string, string>;
+import { CSSProperties } from 'react';
+declare type HighlightedElementProps = {
+    style?: CSSProperties;
+    targetStyle?: CSSProperties;
     className?: string;
-}) => JSX.Element;
+    watchMotion?: boolean;
+};
+export declare const HighlightedElement: ({ style, targetStyle, watchMotion, className }: HighlightedElementProps) => JSX.Element;
 export declare const Customized: () => JSX.Element;
 export declare const Sizes: () => JSX.Element;
+export declare const MovingElement: () => JSX.Element;
+export {};

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

@@ -19,26 +19,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
+exports.MovingElement = exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
 const react_1 = __importStar(require("react"));
 const element_highlighter_1 = require("./element-highlighter");
-const mockTargetId = 'teambit.design/ui/icon-button';
-const HighlightedElement = ({ style, className }) => {
+const mockTarget = {
+    id: 'teambit.design/ui/icon-button',
+    link: 'https://bit.dev/teambit/design/ui/icon-button',
+    scopeLink: 'https://bit.dev/teambit/design',
+};
+const HighlightedElement = ({ style, targetStyle, watchMotion, className }) => {
     const [targetElement, setTargetElement] = (0, react_1.useState)(undefined);
     const targetRef = (0, react_1.createRef)();
-    (0, react_1.useEffect)(() => {
-        const { current } = targetRef;
-        setTargetElement(current || undefined);
-    }, [targetRef.current]);
-    const target = targetElement && {
-        element: targetElement,
-        id: mockTargetId,
-        link: 'https://bit.dev/teambit/design/ui/icon-button',
-        scopeLink: 'https://bit.dev/teambit/design',
-    };
-    return (react_1.default.createElement("div", { className: className, style: { padding: '16px 160px 50px 16px' } },
-        react_1.default.createElement("div", { ref: targetRef, style: { width: 100 } }, "highlight target"),
-        target && react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, style: style, placement: "bottom" })));
+    (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 } },
+        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" })));
 };
 exports.HighlightedElement = HighlightedElement;
 const Customized = () => {
@@ -53,4 +49,13 @@ const Sizes = () => {
     return react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: '16px' } });
 };
 exports.Sizes = Sizes;
+const MovingElement = () => {
+    const [margin, setMargin] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const intervalId = setInterval(() => setMargin((x) => (x + 1) % 100), 80);
+        return () => clearInterval(intervalId);
+    }, []);
+    return react_1.default.createElement(exports.HighlightedElement, { targetStyle: { marginLeft: margin } });
+};
+exports.MovingElement = MovingElement;
 //# sourceMappingURL=element-highlighter.compositions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8D;AAC9D,+DAA4E;AAE5E,MAAM,YAAY,GAAG,+BAA+B,CAAC;AAE9C,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAA0D,EAAE,EAAE;IACjH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAA0B,SAAS,CAAC,CAAC;IACvF,MAAM,SAAS,GAAG,IAAA,iBAAS,GAAkB,CAAC;IAE9C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QAC9B,gBAAgB,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IAExB,MAAM,MAAM,GAAgC,aAAa,IAAI;QAC3D,OAAO,EAAE,aAAa;QACtB,EAAE,EAAE,YAAY;QAChB,IAAI,EAAE,+CAA+C;QACrD,SAAS,EAAE,gCAAgC;KAC5C,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,sBAAsB,EAAE;QACnE,uCAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,uBAEpC;QACL,MAAM,IAAI,8BAAC,wCAAkB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,GAAG,CAC9E,CACP,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,kBAAkB,sBAwB7B;AAEK,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,8BAAC,0BAAkB,IACjB,KAAK,EAAE;YACL,yBAAyB,EAAE,SAAS;YACpC,+BAA+B,EAAE,SAAS;YAC1C,gCAAgC,EAAE,SAAS;SAC5C,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,UAAU,cAUrB;AAEK,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAI,CAAC;AAC7D,CAAC,CAAC;AAFW,QAAA,KAAK,SAEhB"}
+{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6E;AAC7E,+DAA4E;AAE5E,MAAM,UAAU,GAA6B;IAC3C,EAAE,EAAE,+BAA+B;IACnC,IAAI,EAAE,+CAA+C;IACrD,SAAS,EAAE,gCAAgC;CAC5C,CAAC;AASK,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAA2B,EAAE,EAAE;IAC5G,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAA0B,SAAS,CAAC,CAAC;IACvF,MAAM,SAAS,GAAG,IAAA,iBAAS,GAAkB,CAAC;IAE9C,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACvF,MAAM,MAAM,GAAG,aAAa,oCAAS,UAAU,KAAE,OAAO,EAAE,aAAa,GAAE,CAAC;IAE1E,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,GAAG,EAAE;QAC9E,uCAAK,GAAG,EAAE,SAAS,EAAE,KAAK,kBAAI,KAAK,EAAE,GAAG,IAAK,WAAW,wBAElD;QACL,MAAM,IAAI,8BAAC,wCAAkB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAC,QAAQ,GAAG,CACxG,CACP,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,kBAAkB,sBAe7B;AAEK,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,8BAAC,0BAAkB,IACjB,KAAK,EACH;YACE,yBAAyB,EAAE,SAAS;YACpC,+BAA+B,EAAE,SAAS;YAC1C,gCAAgC,EAAE,SAAS;SAC3B,GAEpB,CACH,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,UAAU,cAYrB;AAEK,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAI,CAAC;AAC7D,CAAC,CAAC;AAFW,QAAA,KAAK,SAEhB;AAEK,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAExC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1E,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,8BAAC,0BAAkB,IAAC,WAAW,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,GAAI,CAAC;AACrE,CAAC,CAAC;AATW,QAAA,aAAa,iBASxB"}

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

@@ -7,6 +7,8 @@ export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivEle
     placement?: Placement;
     /** customize styles */
     classes?: HighlightClasses;
+    /** continually update highlighter to match moving elements */
+    watchMotion?: boolean;
 }
 export { Placement };
 export declare type HighlightTarget = {
@@ -24,4 +26,4 @@ export declare type HighlightClasses = {
     frame?: string;
     label?: string;
 };
-export declare function ElementHighlighter({ target, placement, className, classes, ...props }: ElementHighlighterProps): JSX.Element;
+export declare function ElementHighlighter({ target, placement, watchMotion, className, classes, ...props }: ElementHighlighterProps): JSX.Element;

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

@@ -22,10 +22,10 @@ const label_1 = require("../label");
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const element_highlighter_module_scss_1 = __importDefault(require("./element-highlighter.module.scss"));
 function ElementHighlighter(_a) {
-    var { target, placement = 'top', className, classes } = _a, props = __rest(_a, ["target", "placement", "className", "classes"]);
+    var { target, placement = 'top', watchMotion = true, className, classes } = _a, props = __rest(_a, ["target", "placement", "watchMotion", "className", "classes"]);
     return (react_1.default.createElement("div", Object.assign({}, props, ignore_highlighter_1.excludeHighlighterAtt, { className: (0, classnames_1.default)(classes === null || classes === void 0 ? void 0 : classes.container, element_highlighter_module_scss_1.default.container, className) }),
-        react_1.default.createElement(frame_1.Frame, { targetRef: target.element, className: classes === null || classes === void 0 ? void 0 : classes.frame }),
-        target.id && (react_1.default.createElement(label_1.LabelContainer, { className: element_highlighter_module_scss_1.default.label, targetRef: target.element, placement: placement },
+        react_1.default.createElement(frame_1.Frame, { targetRef: target.element, className: (0, classnames_1.default)(element_highlighter_module_scss_1.default.frame, classes === null || classes === void 0 ? void 0 : classes.frame), watchMotion: watchMotion }),
+        target.id && (react_1.default.createElement(label_1.LabelContainer, { className: element_highlighter_module_scss_1.default.label, targetRef: target.element, placement: placement, watchMotion: watchMotion },
             react_1.default.createElement(label_1.Label, { componentId: target.id, link: target.link, scopeLink: target.scopeLink, local: target.local, className: classes === null || classes === void 0 ? void 0 : classes.label })))));
 }
 exports.ElementHighlighter = ElementHighlighter;