@teambit/react.ui.component-highlighter 0.0.511 → 0.0.514

package/frame/frame.tsx

@@ -1,64 +1,112 @@
-import React, { useState } from 'react';
-import { usePopper, Modifier } from 'react-popper';
+import React, { useEffect, useLayoutEffect, useRef, RefObject } from 'react';
 import classnames from 'classnames';
-import '@popperjs/core';
+import { useFloating, autoUpdate, offset, size, shift } from '@floating-ui/react-dom';
+import type { Coords } from '@floating-ui/react-dom';
 
-import { ignorePopperSize } from '@teambit/base-ui.utils.popper-js.ignore-popper-size';
-import { resizeToMatchReference } from '@teambit/base-ui.utils.popper-js.resize-to-match-reference';
+import styles from './frame.module.scss';
 
-import { useAnimationFrame } from '../use-animation-frame';
-import classStyles from './frame.module.scss';
-
-const BASE_OFFSET = +classStyles.offset;
-
-const popperModifiers: Modifier<any>[] = [
-  ignorePopperSize,
-  resizeToMatchReference,
-  {
-    name: 'flip',
-    enabled: false,
-  },
-  {
-    name: 'offset',
-    options: {
-      // move box from above the target ('top-start')
-      // to directly cover the target.
-      offset: ({ reference }: any) => [BASE_OFFSET, BASE_OFFSET - reference.height],
-    },
-  },
-];
+/** frame padding around the target */
+const MARGIN_FROM_TARGET = +styles.offset || 6; // setting fallback 6, for tests
+/** min. distance from the edge of the screen. */
+const MARGIN_FROM_DOC_EDGE = 0;
 
 export interface FrameProps extends React.HTMLAttributes<HTMLDivElement> {
-  targetRef: HTMLElement | null;
+  /** apply the frame to this element  */
+  targetRef: RefObject<HTMLElement | null>;
+  /**
+   * the specific flavor of the frame.
+   * @default "redBorderClass"
+   */
   stylesClass?: string;
   /** continually update frame position to match moving elements */
   watchMotion?: boolean;
 }
 
-export function Frame({
-  targetRef,
-  watchMotion,
-  className,
-  stylesClass = classStyles.overlayBorder,
-  style,
-}: FrameProps) {
-  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+// position - bottom start (bottom left corner)
+// x - width - horizontal (cross axis)
+// y - height - vertical (main axis)
+
+export function Frame({ targetRef, watchMotion, className, stylesClass = styles.overlayBorder, style }: FrameProps) {
+  const dimensionRef = useRef({ width: 0, height: 0 });
+  const shiftRef = useRef<Coords | undefined>();
+
+  const { x, y, strategy, reference, floating, update, refs } = useFloating({
+    placement: 'bottom-start',
+    middleware: [
+      // replace dimensions from previous iterations with the target's size
+      // this is only the measured size, not yet the applied size
+      {
+        name: 'align-to-target',
+        fn({ rects }) {
+          rects.floating = {
+            ...rects.floating,
+            width: rects.reference.width + 2 * MARGIN_FROM_TARGET,
+            height: rects.reference.height + 2 * MARGIN_FROM_TARGET,
+          };
 
-  const { styles, attributes, update } = usePopper(targetRef, referenceElement, {
-    modifiers: popperModifiers,
-    placement: 'top-start',
+          return {};
+        },
+      },
+      // reposition x,y, to the top of the reference
+      offset((options) => -options.reference.height),
+      // offset the frame by its extra padding
+      offset(() => ({ mainAxis: -MARGIN_FROM_TARGET, crossAxis: -MARGIN_FROM_TARGET })),
+      // push the frame inside the screen
+      shift({ rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE, mainAxis: true, crossAxis: true }),
+      // read "shift" for the size-apply() method (because it doesn't forward middlewareData)
+      {
+        name: 'read-shift',
+        fn({ middlewareData }) {
+          shiftRef.current = middlewareData.shift;
+          return {};
+        },
+      },
+      // size also applies overflow detection via width and height
+      size({
+        // apply overflow detection in reference to the document
+        rootBoundary: 'document',
+        padding: MARGIN_FROM_DOC_EDGE,
+        apply({ reference: referenceRect, height, width }) {
+          const paddingX = 2 * MARGIN_FROM_TARGET - (shiftRef.current?.x || 0);
+          const paddingY = 2 * MARGIN_FROM_TARGET - (shiftRef.current?.y || 0);
+
+          dimensionRef.current = {
+            width: Math.min(referenceRect.width + paddingX, width),
+            height: Math.min(referenceRect.height + paddingY, height),
+          };
+          Object.assign(refs.floating.current?.style, dimensionRef.current);
+        },
+      }),
+    ],
   });
 
-  useAnimationFrame(!!watchMotion && update);
+  // set target as floating reference
+  useLayoutEffect(() => {
+    reference(targetRef.current);
+  }, [targetRef.current]);
+
+  // automatically update on scroll, resize, etc.
+  // `watchMotion` will trigger continuous updates using animation frame
+  useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) return () => {};
+
+    return autoUpdate(refs.reference.current, refs.floating.current, update, { animationFrame: watchMotion });
+  }, [refs.reference.current, refs.floating.current, update, watchMotion]);
 
-  if (!targetRef) return null;
+  const isReady = x !== null;
 
   return (
     <div
-      ref={setReferenceElement}
-      className={classnames(className, stylesClass)}
-      style={{ ...styles.popper, ...style }}
-      {...attributes.popper}
+      ref={floating}
+      className={classnames(className, stylesClass, !isReady && styles.hidden)}
+      style={{
+        ...style,
+        ...dimensionRef.current,
+        position: strategy,
+        // starting at pos [0,0] will ensure the label doesn't increase the document size.
+        top: y ?? 0,
+        left: x ?? 0,
+      }}
     />
   );
 }

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MockTarget } from '../mock-component';
+import { bubbleToComponent } from './bubble-to-component';
+
+it('should find component when starting from a div', () => {
+  const { getByText, getByTestId } = render(
+    <MockTarget data-testid="expected-result">
+      <div>hello world</div>
+    </MockTarget>
+  );
+
+  const rendered = getByText('hello world');
+
+  const result = bubbleToComponent(rendered);
+
+  expect(result?.element).toBe(getByTestId('expected-result'));
+  expect(result?.components).toEqual([MockTarget]);
+});
+
+it('should bubble to root component when it renders itself recursively', () => {
+  const { getByText, getByTestId } = render(
+    <MockTarget data-testid="expected-result">
+      <MockTarget>
+        <MockTarget>
+          <div>hello world</div>
+        </MockTarget>
+      </MockTarget>
+    </MockTarget>
+  );
+
+  const rendered = getByText('hello world');
+
+  const result = bubbleToComponent(rendered);
+
+  expect(result?.element).toBe(getByTestId('expected-result'));
+  expect(result?.components).toEqual([MockTarget]);
+});
+
+it('should find first component, when parent propagation is disabled', () => {
+  const { getByText, getByTestId } = render(
+    <MockTarget>
+      <MockTarget>
+        <MockTarget data-testid="expected-result">
+          <div>hello world</div>
+        </MockTarget>
+      </MockTarget>
+    </MockTarget>
+  );
+
+  const rendered = getByText('hello world');
+
+  const result = bubbleToComponent(rendered, { propagateSameParents: false });
+
+  expect(result?.element).toBe(getByTestId('expected-result'));
+  expect(result?.components).toEqual([MockTarget]);
+});

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

@@ -0,0 +1,69 @@
+import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
+import {
+  componentMetaField,
+  hasComponentMeta,
+  ReactComponentMetaHolder,
+} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
+
+type BubblingOptions = {
+  /** filter elements by this rule */
+  elementRule?: MatchRule;
+  /** filter components by this rule */
+  componentRule?: ComponentMatchRule;
+  /**
+   * continue bubbling when encountering a parent of the same component
+   * @default true
+   */
+  propagateSameParents?: boolean;
+};
+
+/** go up the dom tree until reaching a react bit component */
+export function bubbleToComponent(
+  element: HTMLElement | null,
+  { elementRule, componentRule, propagateSameParents = true }: BubblingOptions = {}
+) {
+  let current = bubbleToFirstComponent(element, elementRule, componentRule);
+  if (!propagateSameParents) return current;
+
+  while (current) {
+    const parentElement = current.element.parentElement;
+    const parent = bubbleToFirstComponent(parentElement, elementRule, componentRule);
+
+    const primeComponent = current?.components.slice(-1).pop();
+    const parentPrimeComponent = parent?.components.slice(-1).pop();
+
+    if (primeComponent?.[componentMetaField].id !== parentPrimeComponent?.[componentMetaField].id) return current;
+
+    current = parent;
+  }
+
+  return undefined;
+}
+
+/** go up the dom tree until reaching a react bit component */
+function bubbleToFirstComponent(
+  element: HTMLElement | null,
+  elementRule?: MatchRule,
+  componentRule?: ComponentMatchRule
+) {
+  for (let current = element; current; current = current.parentElement) {
+    current = toRootElement(current);
+    if (!current) return undefined;
+    if (ruleMatcher(current, elementRule)) {
+      const components = domToReacts(current);
+
+      const relevantComponents = components.filter(
+        (x) => hasComponentMeta(x) && componentRuleMatcher({ meta: x[componentMetaField] }, componentRule)
+      ) as ReactComponentMetaHolder[];
+
+      if (relevantComponents.length < 1) return undefined;
+      return {
+        element: current,
+        components: relevantComponents,
+      };
+    }
+  }
+
+  return undefined;
+}

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

@@ -1,17 +1,13 @@
 import React, { useEffect } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
-import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
 import { useHoverSelection } from '@teambit/react.ui.hover-selector';
-import {
-  componentMetaField,
-  hasComponentMeta,
-  ReactComponentMetaHolder,
-} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 
 import { excludeHighlighterSelector } from '../ignore-highlighter';
-import { HighlightTarget } from '../element-highlighter';
-import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
+import { MatchRule, ComponentMatchRule } from '../rule-matcher';
+import { bubbleToComponent } from './bubble-to-component';
 
+type HighlightTarget = { element: HTMLElement; components: ComponentMetaHolder[] };
 export type useHoverHighlighterOptions = {
   debounceDuration: number;
   scopeClass: string;
@@ -63,7 +59,7 @@ function useHoverHandler({
     // skip DOM trees having 'data-ignore-component-highlight'
     if (element.closest(`.${scopeClass} ${excludeHighlighterSelector}`)) return;
 
-    const result = bubbleToBitComponent(element, rule, componentRule);
+    const result = bubbleToComponent(element, { elementRule: rule, componentRule });
     if (!result) return;
 
     onChange({
@@ -81,30 +77,3 @@ function useHoverHandler({
 
   return { handleElement };
 }
-
-/** go up the dom tree until reaching a react bit component */
-function bubbleToBitComponent(
-  element: HTMLElement | null,
-  elementRule?: MatchRule,
-  componentRule?: ComponentMatchRule
-) {
-  for (let current = element; current; current = current.parentElement) {
-    current = toRootElement(current);
-    if (!current) return undefined;
-    if (ruleMatcher(current, elementRule)) {
-      const components = domToReacts(current);
-
-      const relevantComponents = components.filter(
-        (x) => hasComponentMeta(x) && componentRuleMatcher({ meta: x[componentMetaField] }, componentRule)
-      ) as ReactComponentMetaHolder[];
-
-      if (relevantComponents.length < 1) return undefined;
-      return {
-        element: current,
-        components: relevantComponents,
-      };
-    }
-  }
-
-  return undefined;
-}

package/hybrid-highlighter/hybrid-highlighter.tsx

@@ -2,11 +2,15 @@ import React, { useState, useEffect, useMemo, useRef, createRef, CSSProperties }
 import classnames from 'classnames';
 import { v4 } from 'uuid';
 
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
 import { useHoverHighlighter } from '../hover-highlighter';
-import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../element-highlighter';
+import { ElementHighlighter, Placement, HighlightClasses } from '../element-highlighter';
 import { useChildrenHighlighter } from '../children-highlighter';
 import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 
+type HighlightTarget = { element: HTMLElement; components: ComponentMetaHolder[] };
+
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
   /** stop all highlighting and drop listeners */
   disabled?: boolean;
@@ -119,7 +123,8 @@ export function HybridHighlighter({
       {Object.entries(targets).map(([key, target]) => (
         <ElementHighlighter
           key={key}
-          target={target}
+          targetRef={{ current: target.element }}
+          components={target.components}
           classes={classes}
           style={highlightStyle}
           placement={placement}

package/index.ts

@@ -8,7 +8,7 @@ export { ChildrenHighlighter } from './children-highlighter';
 export type { ChildrenHighlighterProps } from './children-highlighter';
 
 export { ElementHighlighter } from './element-highlighter';
-export type { ElementHighlighterProps, HighlightTarget, Placement, HighlightClasses } from './element-highlighter';
+export type { ElementHighlighterProps, Placement, HighlightClasses } from './element-highlighter';
 
 export {
   ExcludeHighlighter,

package/label/component-strip.tsx

@@ -3,6 +3,7 @@ import { NativeLink } from '@teambit/base-ui.routing.native-link';
 import { ComponentID } from '@teambit/component-id';
 import { ScopeUrl } from '@teambit/component.modules.component-url';
 import {
+  ComponentMeta,
   componentMetaField,
   ComponentMetaHolder,
 } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
@@ -10,13 +11,13 @@ import styles from './component-strip.module.scss';
 import { calcComponentLink } from './links';
 
 interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
-  component: ComponentMetaHolder;
+  component: ComponentMetaHolder | string;
 }
 export const ComponentStrip = forwardRef(function ComponentStrip(
   { component, children }: ComponentStripProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
-  const { id, homepage, exported } = component[componentMetaField];
+  const { id, homepage, exported } = extractMetadata(component);
 
   const parsedId = useMemo(() => ComponentID.tryFromString(id), [id]);
   const componentLink = homepage || calcComponentLink(parsedId, exported);
@@ -44,3 +45,11 @@ function LabelBlock({ link, children }: { link?: string; children: ReactNode })
     </Comp>
   );
 }
+
+function extractMetadata(metadata: string | ComponentMetaHolder): ComponentMeta {
+  if (typeof metadata === 'string') {
+    return { id: metadata, exported: true };
+  }
+
+  return metadata[componentMetaField];
+}

package/label/label-container.tsx

@@ -1,12 +1,18 @@
-import React, { useMemo, useState } from 'react';
-import { usePopper } from 'react-popper';
-import type { Placement, Modifier } from '@popperjs/core';
-import '@popperjs/core';
-
-import { useAnimationFrame } from '../use-animation-frame';
+import React, { useLayoutEffect, useEffect, RefObject } from 'react';
+import classnames from 'classnames';
+import compact from 'lodash.compact';
+import {
+  useFloating,
+  offset as offsetMiddleware,
+  flip as flipMiddleware,
+  shift,
+  autoUpdate,
+} from '@floating-ui/react-dom';
+import type { Placement } from '@floating-ui/react-dom';
+import styles from './label.module.scss';
 
 export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  targetRef: HTMLElement | null;
+  targetRef: RefObject<HTMLElement | null>;
   offset?: [number, number];
   placement?: Placement;
   flip?: boolean;
@@ -16,7 +22,6 @@ export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement
 
 export type { Placement };
 
-// TODO - replace this with TippyJS, when it supports a `targetElement={targetRef.current}` prop
 export function LabelContainer({
   targetRef,
   offset,
@@ -24,23 +29,40 @@ export function LabelContainer({
   flip = true,
   watchMotion,
   className,
+  style,
   ...rest
 }: LabelContainerProps) {
-  const [sourceRef, setSourceRef] = useState<HTMLDivElement | null>(null);
-
-  const modifiers = useMemo<Partial<Modifier<any, any>>[]>(
-    () => [{ name: 'offset', options: { offset } }],
-    [flip, offset]
-  );
-
-  const { styles, attributes, update } = usePopper(targetRef, sourceRef, {
-    modifiers,
+  const { x, y, strategy, floating, reference, refs, update } = useFloating({
     placement,
+    middleware: compact([
+      offset && offsetMiddleware({ mainAxis: offset[0], crossAxis: offset[1] }),
+      flip && flipMiddleware(),
+      // enabling 'shift' for 'crossAxis' will make floating-ui push the label _inside_, when it has nowhere to go
+      shift({ rootBoundary: 'document', mainAxis: true, crossAxis: true }),
+    ]),
   });
 
-  useAnimationFrame(!!watchMotion && update);
+  useLayoutEffect(() => {
+    reference(targetRef.current);
+  }, [targetRef.current, reference]);
 
-  if (!targetRef) return null;
+  // automatically update on scroll, resize, etc.
+  // `watchMotion` will trigger continuous updates using animation frame
+  useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) return () => {};
 
-  return <div {...rest} ref={setSourceRef} className={className} style={styles.popper} {...attributes.popper} />;
+    return autoUpdate(refs.reference.current, refs.floating.current, update, { animationFrame: !!watchMotion });
+  }, [refs.reference.current, refs.floating.current, update, watchMotion]);
+
+  const isReady = x !== null;
+
+  return (
+    <div
+      {...rest}
+      ref={floating}
+      className={classnames(className, !isReady && styles.hidden)}
+      // starting at pos [0,0] will ensure the label doesn't increase the document size.
+      style={{ ...style, position: strategy, top: y ?? 0, left: x ?? 0 }}
+    />
+  );
 }

package/label/label.module.scss

@@ -22,3 +22,11 @@
     transform: rotate(-180deg);
   }
 }
+
+.hidden {
+  // label size is needed for position calculations,
+  // so it can't be removed by `display: none`
+  visibility: hidden;
+  pointer-events: none;
+  user-select: none;
+}

package/label/label.tsx

@@ -7,7 +7,7 @@ import { ComponentStrip } from './component-strip';
 import { OtherComponentsPopper } from './other-components';
 
 export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
-  components: ComponentMetaHolder[];
+  components: (ComponentMetaHolder | string)[];
 }
 
 export function Label({ components, ...props }: LabelProps) {

package/label/other-components.tsx

@@ -6,7 +6,7 @@ import { ComponentStrip } from './component-strip';
 import styles from './label.module.scss';
 
 export type OtherComponentsProps = {
-  components: ComponentMetaHolder[];
+  components: (ComponentMetaHolder | string)[];
   start?: number;
   end?: number;
 } & TippyProps;

package/mock-component.tsx

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from 'react';
+import { componentMetaField } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
+export function MockTarget({ children, ...rest }: PropsWithChildren<{}>) {
+  return <div {...rest}>mocked {children}</div>;
+}
+MockTarget[componentMetaField] = {
+  id: 'teambit.design/ui/icon-button@1.6.2',
+};

package/package.json

@@ -1,28 +1,26 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.511",
+  "version": "0.0.514",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.511"
+    "version": "0.0.514"
   },
   "dependencies": {
     "get-xpath": "3.0.1",
     "classnames": "2.2.6",
-    "@popperjs/core": "2.6.0",
-    "react-popper": "2.2.4",
-    "uuid": "3.4.0",
     "use-debounce": "6.0.1",
+    "uuid": "3.4.0",
+    "@floating-ui/react-dom": "0.6.0",
+    "lodash.compact": "3.0.1",
     "url-join": "4.0.1",
     "@tippyjs/react": "4.2.0",
     "core-js": "^3.0.0",
-    "@teambit/base-ui.utils.popper-js.ignore-popper-size": "1.0.0",
-    "@teambit/base-ui.utils.popper-js.resize-to-match-reference": "1.0.0",
     "@teambit/base-ui.routing.native-link": "1.0.0",
-    "@teambit/component-id": "0.0.402",
     "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
+    "@teambit/component-id": "0.0.402",
     "@teambit/react.modules.dom-to-react": "0.0.489",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
     "@teambit/react.ui.hover-selector": "0.0.165",
@@ -32,15 +30,16 @@
     "@types/react": "^17.0.8",
     "@testing-library/react": "11.2.6",
     "@types/classnames": "2.2.11",
-    "@types/uuid": "3.4.9",
     "@types/react-dom": "^17.0.5",
+    "@types/uuid": "3.4.9",
+    "@types/lodash.compact": "3.0.6",
     "@types/url-join": "4.0.0",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
     "@babel/runtime": "7.12.18",
     "@types/jest": "^26.0.0",
     "@types/node": "12.20.4",
-    "@teambit/design.ui.icon-button": "1.0.10"
+    "@teambit/design.ui.icon-button": "1.0.16"
   },
   "peerDependencies": {
     "react-dom": "^16.8.0 || ^17.0.0",

package/{preview-1647509820722.js → preview-1649066106369.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.511/dist/children-highlighter/children-highlighter.composition.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.511/dist/element-highlighter/element-highlighter.compositions.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.511/dist/hover-highlighter/hover-highlighter.compositions.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.511/dist/component-highlighter.docs.md')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.514/dist/children-highlighter/children-highlighter.composition.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.514/dist/element-highlighter/element-highlighter.compositions.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.514/dist/hover-highlighter/hover-highlighter.compositions.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.514/dist/component-highlighter.docs.md')]

package/dist/use-animation-frame.d.ts

@@ -1 +0,0 @@
-export declare function useAnimationFrame(cb?: false | null | (() => any), deps?: any[]): void;

package/dist/use-animation-frame.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAnimationFrame = void 0;
-const react_1 = require("react");
-// TODO - extract to its own component
-function useAnimationFrame(cb, deps = []) {
-    (0, react_1.useEffect)(() => {
-        if (!cb)
-            return () => { };
-        let animationFrameId = -1;
-        const animate = () => {
-            cb();
-            animationFrameId = window.requestAnimationFrame(animate);
-        };
-        animate();
-        return () => {
-            if (animationFrameId > -1)
-                window.cancelAnimationFrame(animationFrameId);
-        };
-    }, [cb, ...deps]);
-}
-exports.useAnimationFrame = useAnimationFrame;
-//# sourceMappingURL=use-animation-frame.js.map

package/dist/use-animation-frame.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-animation-frame.js","sourceRoot":"","sources":["../use-animation-frame.tsx"],"names":[],"mappings":";;;AAAA,iCAAkC;AAElC,sCAAsC;AAEtC,SAAgB,iBAAiB,CAAC,EAA+B,EAAE,OAAc,EAAE;IACjF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,EAAE;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAEzB,IAAI,gBAAgB,GAAG,CAAC,CAAC,CAAC;QAC1B,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,EAAE,EAAE,CAAC;YACL,gBAAgB,GAAG,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;QAC3D,CAAC,CAAC;QACF,OAAO,EAAE,CAAC;QAEV,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,GAAG,CAAC,CAAC;gBAAE,MAAM,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;QAC3E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;AACpB,CAAC;AAfD,8CAeC"}