@teambit/react.ui.component-highlighter 0.0.0-3456ec42c20f5ecbc6cb251096040bd1c79ecc95

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

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChildrenHighlighter = useChildrenHighlighter;
+const react_1 = require("react");
+const get_xpath_1 = __importDefault(require("get-xpath"));
+const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-react");
+const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
+const ignore_highlighter_1 = require("../ignore-highlighter");
+const rule_matcher_1 = require("../rule-matcher");
+function useChildrenHighlighter({ onChange, disabled, scopeRef, scopeClass: scopeSelector = '', rule, componentRule, }) {
+    (0, react_1.useEffect)(() => {
+        const nextTargets = {};
+        const scopeElement = scopeRef.current;
+        if (!scopeElement || !scopeSelector || disabled)
+            return;
+        // select all elements (except excluded)
+        let allElements = Array.from(scopeElement.querySelectorAll(targetsSelector(`.${scopeSelector}`)));
+        // apply rule filtering
+        if (rule)
+            allElements = allElements.filter((elem) => (0, rule_matcher_1.ruleMatcher)(elem, rule));
+        // seek the root element:
+        const rootElements = allElements.map(react_modules_dom_to_react_1.toRootElement).filter((x) => !!x);
+        // deduplicate
+        const uniqueRoots = new Set(rootElements);
+        uniqueRoots.forEach((element) => {
+            if (!element)
+                return;
+            const comps = (0, react_modules_dom_to_react_1.domToReacts)(element);
+            const componentsWithMeta = comps.filter((x) => (0, react_ui_highlighter_component_metadata_bit_component_meta_1.hasComponentMeta)(x) && (0, rule_matcher_1.componentRuleMatcher)({ meta: x[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] }, componentRule));
+            if (componentsWithMeta.length < 1)
+                return;
+            const key = (0, get_xpath_1.default)(element);
+            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} ${ignore_highlighter_1.excludeHighlighterSelector}, ${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector} *`;
+    const skippedSelector = `${scopeSelector} ${ignore_highlighter_1.skipHighlighterSelector}, ${scopeSelector} ${ignore_highlighter_1.skipHighlighterSelector} *`;
+    return `:not(${excludedSelector}, ${skippedSelector})`;
+}
+//# sourceMappingURL=use-children-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-children-highlighter.js","sourceRoot":"","sources":["../../children-highlighter/use-children-highlighter.tsx"],"names":[],"mappings":";;;;;AA2BA,wDAsCC;AAjED,iCAAiE;AACjE,0DAAiC;AACjC,oFAAiF;AACjF,oJAK6E;AAC7E,8DAA4F;AAC5F,kDAAmG;AAiBnG,SAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,aAAa,GAAG,EAAE,EAC9B,IAAI,EACJ,aAAa,GACc;IAC3B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAsB,EAAE,CAAC;QAC1C,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,YAAY,IAAI,CAAC,aAAa,IAAI,QAAQ;YAAE,OAAO;QAExD,wCAAwC;QACxC,IAAI,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAc,eAAe,CAAC,IAAI,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/G,uBAAuB;QACvB,IAAI,IAAI;YAAE,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAA,0BAAW,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9E,yBAAyB;QACzB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,0CAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvE,cAAc;QACd,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC;QAE1C,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC9B,IAAI,CAAC,OAAO;gBAAE,OAAO;YACrB,MAAM,KAAK,GAAG,IAAA,wCAAW,EAAC,OAAO,CAAC,CAAC;YACnC,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CACrC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,6EAAgB,EAAC,CAAC,CAAC,IAAI,IAAA,mCAAoB,EAAC,EAAE,IAAI,EAAE,CAAC,CAAC,+EAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACrE,CAAC;YAEhC,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO;YAE1C,MAAM,GAAG,GAAG,IAAA,mBAAQ,EAAC,OAAO,CAAC,CAAC;YAE9B,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC;QACjE,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,eAAe;AACtB;;;GAGG;AACH,aAAa,GAAG,QAAQ;IAExB,MAAM,gBAAgB,GAAG,GAAG,aAAa,IAAI,+CAA0B,KAAK,aAAa,IAAI,+CAA0B,IAAI,CAAC;IAC5H,MAAM,eAAe,GAAG,GAAG,aAAa,IAAI,4CAAuB,KAAK,aAAa,IAAI,4CAAuB,IAAI,CAAC;IAErH,OAAO,QAAQ,gBAAgB,KAAK,eAAe,GAAG,CAAC;AACzD,CAAC"}

package/dist/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/element-highlighter/element-highlighter.compositions.d.ts

@@ -0,0 +1,14 @@
+import React, { CSSProperties } from 'react';
+type HighlightedElementProps = {
+    style?: CSSProperties;
+    targetStyle?: CSSProperties;
+    className?: string;
+    watchMotion?: boolean;
+};
+export declare const HighlightedElement: ({ style, targetStyle, watchMotion, className }: HighlightedElementProps) => React.JSX.Element;
+export declare const Customized: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const MovingElement: () => React.JSX.Element;
+export declare const FullscreenElement: () => React.JSX.Element;
+export declare function OffscreenElements(): React.JSX.Element;
+export {};

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

@@ -0,0 +1,103 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullscreenElement = exports.MovingElement = exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
+exports.OffscreenElements = OffscreenElements;
+const react_1 = __importStar(require("react"));
+const element_highlighter_1 = require("./element-highlighter");
+const mock_component_1 = require("../mock-component");
+const HighlightedElement = ({ style, targetStyle, watchMotion, className }) => {
+    const targetRef = (0, react_1.createRef)();
+    return (react_1.default.createElement("div", { className: className, style: { padding: '16px 16px 40px 16px', width: 300, fontFamily: 'sans-serif' } },
+        react_1.default.createElement("div", { ref: targetRef, style: Object.assign({ width: 100 }, targetStyle) }, "highlight target"),
+        react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: targetRef, components: [mock_component_1.MockTarget], style: style, watchMotion: watchMotion, placement: "bottom" })));
+};
+exports.HighlightedElement = HighlightedElement;
+const Customized = () => {
+    return (react_1.default.createElement(exports.HighlightedElement, { style: {
+            '--bit-highlighter-color': '#94deb4',
+            '--bit-highlighter-color-hover': '#d0f1de',
+            '--bit-highlighter-color-active': '#37b26c',
+        } }));
+};
+exports.Customized = Customized;
+const Sizes = () => {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: 10 } }),
+        react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: 14 } }),
+        react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: 18 } })));
+};
+exports.Sizes = Sizes;
+const fps = 30;
+const frameInterval = 1000 / fps;
+const MovingElement = () => {
+    const [margin, setMargin] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const intervalId = setInterval(() => setMargin((x) => (x + 1) % 100), frameInterval);
+        return () => clearInterval(intervalId);
+    }, []);
+    return react_1.default.createElement(exports.HighlightedElement, { targetStyle: { marginLeft: margin }, watchMotion: true });
+};
+exports.MovingElement = MovingElement;
+const FullscreenElement = () => {
+    const targetRef = (0, react_1.createRef)();
+    return (react_1.default.createElement("div", { style: { fontFamily: 'sans-serif' } },
+        react_1.default.createElement("div", { ref: targetRef, style: {
+                height: '100vh',
+                width: '100%',
+                background: '#bceed4',
+            } },
+            "This element will cover the entire document,",
+            react_1.default.createElement("br", null),
+            "pushing the highlighter to the edge of the window.",
+            react_1.default.createElement("br", null),
+            "The highlighter should remain inside and expand no further than the document."),
+        react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: targetRef, components: [mock_component_1.MockTarget], watchMotion: true })));
+};
+exports.FullscreenElement = FullscreenElement;
+const edgeStyles = { position: 'absolute', background: 'cyan', padding: 30 };
+const centerStyles = {
+    top: { top: -30, left: '50%', transform: 'translate(-50%,0)' },
+    right: { right: -30, top: '50%', transform: 'translate(0, -50%)' },
+    bottom: { bottom: -30, left: '50%', transform: 'translate(-50%,0)' },
+    left: { left: -30, top: '50%', transform: 'translate(0, -50%)' },
+};
+function OffscreenElements() {
+    const target01 = (0, react_1.createRef)();
+    const target02 = (0, react_1.createRef)();
+    const target03 = (0, react_1.createRef)();
+    const target04 = (0, react_1.createRef)();
+    return (react_1.default.createElement("div", { style: { fontFamily: 'sans-serif', height: '100%' } },
+        react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' } },
+            react_1.default.createElement("div", { ref: target01, style: Object.assign(Object.assign({}, edgeStyles), centerStyles.top) }, "top"),
+            react_1.default.createElement("div", { ref: target02, style: Object.assign(Object.assign({}, edgeStyles), centerStyles.right) }, "right"),
+            react_1.default.createElement("div", { ref: target03, style: Object.assign(Object.assign({}, edgeStyles), centerStyles.bottom) }, "bottom"),
+            react_1.default.createElement("div", { ref: target04, style: Object.assign(Object.assign({}, edgeStyles), centerStyles.left) }, "left"),
+            react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: target01, components: [mock_component_1.MockTarget], watchMotion: true }),
+            react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: target02, components: [mock_component_1.MockTarget], watchMotion: true }),
+            react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: target03, components: [mock_component_1.MockTarget], watchMotion: true }),
+            react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: target04, components: [mock_component_1.MockTarget], watchMotion: true }))));
+}
+//# sourceMappingURL=element-highlighter.compositions.js.map

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

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

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

@@ -0,0 +1,22 @@
+import React, { RefObject } from 'react';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { Placement } from '../label';
+export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** highlight this element */
+    targetRef: RefObject<HTMLElement | null>;
+    /** components with metadata to show in the label */
+    components?: (ComponentMetaHolder | string)[];
+    /** default location of the label */
+    placement?: Placement;
+    /** customize styles */
+    classes?: HighlightClasses;
+    /** continually update highlighter to match moving elements */
+    watchMotion?: boolean;
+}
+export { Placement };
+export type HighlightClasses = {
+    container?: string;
+    frame?: string;
+    label?: string;
+};
+export declare function ElementHighlighter({ targetRef, components, placement, watchMotion, className, classes, ...props }: ElementHighlighterProps): React.JSX.Element;

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

@@ -0,0 +1,31 @@
+"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.ElementHighlighter = ElementHighlighter;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const frame_1 = require("../frame");
+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 { targetRef, components, placement = 'top', watchMotion, className, classes } = _a, props = __rest(_a, ["targetRef", "components", "placement", "watchMotion", "className", "classes"]);
+    return (react_1.default.createElement("div", Object.assign({}, props, ignore_highlighter_1.skipHighlighterAttr, { 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: targetRef, className: (0, classnames_1.default)(element_highlighter_module_scss_1.default.frame, classes === null || classes === void 0 ? void 0 : classes.frame), watchMotion: watchMotion }),
+        components && (react_1.default.createElement(label_1.LabelContainer, { targetRef: targetRef, className: element_highlighter_module_scss_1.default.label, placement: placement, watchMotion: watchMotion },
+            react_1.default.createElement(label_1.Label, { components: components, className: classes === null || classes === void 0 ? void 0 : classes.label })))));
+}
+//# sourceMappingURL=element-highlighter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA8BA,gDAoBC;AAlDD,kDAAyC;AACzC,4DAAoC;AAEpC,oCAAiC;AACjC,oCAA4D;AAC5D,8DAA4D;AAC5D,wGAAuD;AAwBvD,SAAgB,kBAAkB,CAAC,EAQT;QARS,EACjC,SAAS,EACT,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,SAAS,EACT,OAAO,OAEiB,EADrB,KAAK,cAPyB,+EAQlC,CADS;IAER,OAAO,CACL,uDAAS,KAAK,EAAM,wCAAmB,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,yCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC7G,8BAAC,aAAK,IAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,EAAE,WAAW,EAAE,WAAW,GAAI;QAE7G,UAAU,IAAI,CACb,8BAAC,sBAAc,IAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,yCAAM,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW;YAC3G,8BAAC,aAAK,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GAAI,CAC7C,CAClB,CACG,CACP,CAAC;AACJ,CAAC"}

package/dist/element-highlighter/element-highlighter.module.scss

@@ -0,0 +1,10 @@
+.label {
+  // space between the label and the target
+  // keep this space so users can move their cursor in this space.
+  padding: 8px;
+}
+
+.frame,
+.label {
+  z-index: 15500 // $highlighter-z-index;
+}

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

@@ -0,0 +1,2 @@
+export { ElementHighlighter } from './element-highlighter';
+export type { ElementHighlighterProps, Placement, HighlightClasses } from './element-highlighter';

package/dist/element-highlighter/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementHighlighter = void 0;
+var element_highlighter_1 = require("./element-highlighter");
+Object.defineProperty(exports, "ElementHighlighter", { enumerable: true, get: function () { return element_highlighter_1.ElementHighlighter; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../element-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA"}

package/dist/frame/frame.d.ts

@@ -0,0 +1,14 @@
+import React, { RefObject } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export interface FrameProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 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 declare function Frame({ targetRef, watchMotion, className, stylesClass, style }: FrameProps): React.JSX.Element;

package/dist/frame/frame.js

@@ -0,0 +1,128 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsomorphicLayoutEffect = void 0;
+exports.Frame = Frame;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_dom_1 = require("@floating-ui/react-dom");
+const frame_module_scss_1 = __importDefault(require("./frame.module.scss"));
+exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;
+/** frame padding around the target */
+const MARGIN_FROM_TARGET = +frame_module_scss_1.default.offset || 6; // setting fallback 6, for tests
+/** min. distance from the edge of the screen. */
+const MARGIN_FROM_DOC_EDGE = 0;
+const overflowParameters = { rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE };
+const SHIFT_POSITIVE = 'shiftPositive';
+const HAS_RESIZE_OBSERVER = typeof window !== 'undefined' && !!window.ResizeObserver;
+function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_scss_1.default.overlayBorder, style }) {
+    var _a;
+    const dimensionRef = (0, react_1.useRef)({ width: 0, height: 0 });
+    const { x, y, strategy, reference, floating, update, refs, middlewareData } = (0, react_dom_1.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 = Object.assign(Object.assign({}, rects.floating), { width: rects.reference.width + 2 * MARGIN_FROM_TARGET, height: rects.reference.height + 2 * MARGIN_FROM_TARGET });
+                    return {};
+                },
+            },
+            // reposition x,y, to the top of the reference
+            (0, react_dom_1.offset)(({ rects }) => -rects.reference.height),
+            // offset the frame by its extra padding
+            (0, react_dom_1.offset)(() => ({ mainAxis: -MARGIN_FROM_TARGET, crossAxis: -MARGIN_FROM_TARGET })),
+            // pushes the frame into the document. Similar to shift(), but only pushes when coods are negative
+            {
+                name: 'shiftPositive',
+                fn: (args) => __awaiter(this, void 0, void 0, function* () {
+                    const overflow = yield (0, react_dom_1.detectOverflow)(args, overflowParameters);
+                    const nextCoords = {
+                        x: overflow.left > 0 ? args.x + overflow.left : args.x,
+                        y: overflow.top > 0 ? args.y + overflow.top : args.y,
+                    };
+                    const shiftAmount = {
+                        x: nextCoords.x - args.x,
+                        y: nextCoords.y - args.y,
+                    };
+                    return Object.assign(Object.assign({}, nextCoords), { data: shiftAmount });
+                }),
+            },
+            // size also applies overflow detection via width and height
+            (0, react_dom_1.size)({
+                // apply overflow detection in reference to the document
+                rootBoundary: 'document',
+                padding: MARGIN_FROM_DOC_EDGE,
+                apply({ elements, rects, availableHeight, availableWidth, middlewareData }) {
+                    const shift = middlewareData[SHIFT_POSITIVE] || { x: 0, y: 0 };
+                    const paddingX = 2 * MARGIN_FROM_TARGET - shift.x;
+                    const paddingY = 2 * MARGIN_FROM_TARGET - shift.y;
+                    const dimensions = {
+                        width: rects.reference.width + paddingX,
+                        height: rects.reference.height + paddingY,
+                        maxWidth: availableWidth,
+                        maxHeight: availableHeight,
+                    };
+                    // per floating-ui docs, apply styles directly during apply()
+                    Object.assign(elements.floating.style, dimensions);
+                    // also store in reference, so react renders will have the same value
+                    dimensionRef.current = dimensions;
+                },
+            }),
+            (0, react_dom_1.hide)({ strategy: 'referenceHidden' }),
+        ],
+    });
+    // set target as floating reference
+    (0, exports.useIsomorphicLayoutEffect)(() => {
+        reference(targetRef.current);
+    }, [targetRef.current]);
+    // automatically update on scroll, resize, etc.
+    // `watchMotion` will trigger continuous updates using animation frame
+    (0, react_1.useEffect)(() => {
+        if (!refs.reference.current || !refs.floating.current || !HAS_RESIZE_OBSERVER)
+            return () => { };
+        return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update, { animationFrame: watchMotion });
+    }, [refs.reference.current, refs.floating.current, update, watchMotion]);
+    // could check if x !== null
+    const isReady = !((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden);
+    return (react_1.default.createElement("div", { ref: floating, className: (0, classnames_1.default)(className, stylesClass, !isReady && frame_module_scss_1.default.hidden), style: Object.assign(Object.assign(Object.assign({}, style), dimensionRef.current), { position: strategy, 
+            // starting at pos [0,0] will ensure the label doesn't increase the document size.
+            top: y !== null && y !== void 0 ? y : 0, left: x !== null && x !== void 0 ? x : 0 }) }));
+}
+//# sourceMappingURL=frame.js.map

package/dist/frame/frame.js.map

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

package/dist/frame/frame.module.scss

@@ -0,0 +1,23 @@
+$border: 2;
+$padding: 4;
+
+.overlayBorder {
+  box-sizing: border-box;
+  border: $border * 1px solid var(--bit-highlighter-color, #eebcc9);
+
+  border-radius: 11px;
+  padding: $padding * 1px;
+
+  pointer-events: none;
+  user-select: none;
+}
+
+.hidden {
+  // the frame's size is ignored anyways,
+  // and so we can use 'display: none' and not 'visibility: hidden'
+  display: none;
+}
+
+:export {
+  offset: $border + $padding;
+}

package/dist/frame/index.d.ts

@@ -0,0 +1,2 @@
+export { Frame } from './frame';
+export type { FrameProps } from './frame';