@teambit/react.ui.component-highlighter 0.0.513 → 0.2.0

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

@@ -1,19 +1,20 @@
 import React from 'react';
 // import { EnterpriseOffering } from '@teambit/evangelist.pages.enterprise-offering';
 import { MockedComponentWithMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-import { IconButton } from '@teambit/design.ui.icon-button';
 import { ExcludeHighlighter } from '../ignore-highlighter';
 import { ChildrenHighlighter } from './children-highlighter';
+import { MockTarget } from '../mock-component';
 
 export const ChildrenHighlighterPreview = () => {
   return (
     // highlighter runs in compositions, therefor should not have our font
     <ChildrenHighlighter style={{ padding: 40, minWidth: 200, fontFamily: 'sans-serif' }}>
-      <MockedComponentWithMeta>hover here</MockedComponentWithMeta>
+      <MockedComponentWithMeta>target #1</MockedComponentWithMeta>
+      <br />
       <br />
       <br />
       <br />
-      <IconButton>this will be highlighted with dropdown</IconButton>
+      <MockedComponentWithMeta>target #2</MockedComponentWithMeta>
     </ChildrenHighlighter>
   );
 };
@@ -56,10 +57,12 @@ export const ChildrenHighlighterInsideIgnore = () => {
 };
 
 export const ChildrenHighlighterWithRule = () => {
+  const rule = '#someSubTree *';
+
   return (
-    <ChildrenHighlighter rule="#someSubTree *" style={{ minWidth: 300, fontFamily: 'sans-serif' }}>
+    <ChildrenHighlighter rule={rule} style={{ minWidth: 300, fontFamily: 'sans-serif' }}>
       <div>
-        element filter: <code>"#someSubTree *"</code>
+        element filter: <code>"{rule}"</code>
       </div>
       <br />
       <MockedComponentWithMeta>no highlighter</MockedComponentWithMeta>
@@ -74,20 +77,19 @@ export const ChildrenHighlighterWithRule = () => {
 };
 
 export const ChildrenHighlighterWithComponentRule = () => {
+  const filterTarget = 'teambit.design/ui/mock-target';
+
   return (
-    <ChildrenHighlighter
-      componentRule="teambit.design/ui/icon-button"
-      style={{ minWidth: 300, fontFamily: 'sans-serif' }}
-    >
+    <ChildrenHighlighter componentRule={filterTarget} style={{ minWidth: 300, fontFamily: 'sans-serif' }}>
       <div>
-        component filter: <code>"teambit.design/ui/icon-button"</code>
+        component filter: <code>"{filterTarget}"</code>
       </div>
       <br />
       <MockedComponentWithMeta>no highlighter</MockedComponentWithMeta>
       <br />
       <br />
       <br />
-      <IconButton>this will be highlighted</IconButton>
+      <MockTarget style={{ display: 'inline-block', margin: '0 8px' }}>this will be highlighted</MockTarget>
     </ChildrenHighlighter>
   );
 };

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

@@ -5,7 +5,7 @@ import { ChildrenHighlighterPreview } from './children-highlighter.composition';
 it('should not throw when rendering the children-highlighter', () => {
   const { getByText } = render(<ChildrenHighlighterPreview />);
 
-  const rendered = getByText('hover here');
+  const rendered = getByText('target #1');
 
   expect(rendered).toBeInstanceOf(HTMLElement);
 });

package/children-highlighter/use-children-highlighter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, RefObject } from 'react';
+import { useEffect, RefObject, HtmlHTMLAttributes } from 'react';
 import getXPath from 'get-xpath';
 import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
 import {
@@ -7,7 +7,7 @@ import {
   hasComponentMeta,
   ReactComponentMetaHolder,
 } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-import { excludeHighlighterSelector } from '../ignore-highlighter';
+import { excludeHighlighterSelector, skipHighlighterSelector } from '../ignore-highlighter';
 import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
 
 type HighlighterTarget = Record<string, { element: HTMLElement; components: ComponentMetaHolder[] }>;
@@ -72,5 +72,8 @@ function targetsSelector(
    */
   scopeSelector = ':scope'
 ) {
-  return `:not(${scopeSelector} ${excludeHighlighterSelector}, ${scopeSelector} ${excludeHighlighterSelector} *)`;
+  const excludedSelector = `${scopeSelector} ${excludeHighlighterSelector}, ${scopeSelector} ${excludeHighlighterSelector} *`;
+  const skippedSelector = `${scopeSelector} ${skipHighlighterSelector}, ${scopeSelector} ${skipHighlighterSelector} *`;
+
+  return `:not(${excludedSelector}, ${skippedSelector})`;
 }

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

@@ -7,18 +7,19 @@ exports.ChildrenHighlighterWithComponentRule = exports.ChildrenHighlighterWithRu
 const react_1 = __importDefault(require("react"));
 // import { EnterpriseOffering } from '@teambit/evangelist.pages.enterprise-offering';
 const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
-const design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
 const ignore_highlighter_1 = require("../ignore-highlighter");
 const children_highlighter_1 = require("./children-highlighter");
+const mock_component_1 = require("../mock-component");
 const ChildrenHighlighterPreview = () => {
     return (
     // highlighter runs in compositions, therefor should not have our font
     react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { style: { padding: 40, minWidth: 200, fontFamily: 'sans-serif' } },
-        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "hover here"),
+        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "target #1"),
+        react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
-        react_1.default.createElement(design_ui_icon_button_1.IconButton, null, "this will be highlighted with dropdown")));
+        react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "target #2")));
 };
 exports.ChildrenHighlighterPreview = ChildrenHighlighterPreview;
 const ChildrenHighlighterWithCustomColors = () => {
@@ -48,10 +49,14 @@ const ChildrenHighlighterInsideIgnore = () => {
 };
 exports.ChildrenHighlighterInsideIgnore = ChildrenHighlighterInsideIgnore;
 const ChildrenHighlighterWithRule = () => {
-    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { rule: "#someSubTree *", style: { minWidth: 300, fontFamily: 'sans-serif' } },
+    const rule = '#someSubTree *';
+    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { rule: rule, style: { minWidth: 300, fontFamily: 'sans-serif' } },
         react_1.default.createElement("div", null,
             "element filter: ",
-            react_1.default.createElement("code", null, "\"#someSubTree *\"")),
+            react_1.default.createElement("code", null,
+                "\"",
+                rule,
+                "\"")),
         react_1.default.createElement("br", null),
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "no highlighter"),
         react_1.default.createElement("br", null),
@@ -62,16 +67,20 @@ const ChildrenHighlighterWithRule = () => {
 };
 exports.ChildrenHighlighterWithRule = ChildrenHighlighterWithRule;
 const ChildrenHighlighterWithComponentRule = () => {
-    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { componentRule: "teambit.design/ui/icon-button", style: { minWidth: 300, fontFamily: 'sans-serif' } },
+    const filterTarget = 'teambit.design/ui/mock-target';
+    return (react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { componentRule: filterTarget, style: { minWidth: 300, fontFamily: 'sans-serif' } },
         react_1.default.createElement("div", null,
             "component filter: ",
-            react_1.default.createElement("code", null, "\"teambit.design/ui/icon-button\"")),
+            react_1.default.createElement("code", null,
+                "\"",
+                filterTarget,
+                "\"")),
         react_1.default.createElement("br", null),
         react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "no highlighter"),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
-        react_1.default.createElement(design_ui_icon_button_1.IconButton, null, "this will be highlighted")));
+        react_1.default.createElement(mock_component_1.MockTarget, { style: { display: 'inline-block', margin: '0 8px' } }, "this will be highlighted")));
 };
 exports.ChildrenHighlighterWithComponentRule = ChildrenHighlighterWithComponentRule;
 // export const HighlightingAllElementsInTheEnterprisePage = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"children-highlighter.composition.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAAsF;AACtF,oJAA8G;AAC9G,0EAA4D;AAC5D,8DAA2D;AAC3D,iEAA6D;AAEtD,MAAM,0BAA0B,GAAG,GAAG,EAAE;IAC7C,OAAO;IACL,sEAAsE;IACtE,8BAAC,0CAAmB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAClF,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,iDAAoD,CAC3C,CACvB,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,0BAA0B,8BAWrC;AAEK,MAAM,mCAAmC,GAAG,GAAG,EAAE;IACtD,OAAO,CACL,8BAAC,0CAAmB,IAClB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,EAChF,OAAO,EAAC,gBAAgB,EACxB,YAAY,EAAC,MAAM,EACnB,aAAa,EAAC,eAAe;QAE7B,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CACxC,CACvB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,mCAAmC,uCAe9C;AAEK,MAAM,+BAA+B,GAAG,GAAG,EAAE;IAClD,OAAO,CACL,8BAAC,uCAAkB;QACjB,8BAAC,0CAAmB,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE;;YACN,4CAAO,sBAAsB,CAAQ;YACrF,yCAAM;;YAEN,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,qBAAqC;YAC7D,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,oBAAoC,CACxC,CACH,CACtB,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,+BAA+B,mCAkB1C;AAEK,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,OAAO,CACL,8BAAC,0CAAmB,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAC3F;;YACkB,iEAA6B,CACzC;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,uCAAK,EAAE,EAAC,aAAa;YACnB,8BAAC,oFAAuB,mCAAmD,CACvE,CACc,CACvB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,2BAA2B,+BAgBtC;AAEK,MAAM,oCAAoC,GAAG,GAAG,EAAE;IACvD,OAAO,CACL,8BAAC,0CAAmB,IAClB,aAAa,EAAC,+BAA+B,EAC7C,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAElD;;YACoB,gFAA4C,CAC1D;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,kCAAU,mCAAsC,CAC7B,CACvB,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,oCAAoC,wCAiB/C;AAEF,oEAAoE;AACpE,aAAa;AACb,4BAA4B;AAC5B,uDAAuD;AACvD,6BAA6B;AAC7B,OAAO;AACP,KAAK"}
+{"version":3,"file":"children-highlighter.composition.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAAsF;AACtF,oJAA8G;AAC9G,8DAA2D;AAC3D,iEAA6D;AAC7D,sDAA+C;AAExC,MAAM,0BAA0B,GAAG,GAAG,EAAE;IAC7C,OAAO;IACL,sEAAsE;IACtE,8BAAC,0CAAmB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAClF,8BAAC,oFAAuB,oBAAoC;QAC5D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CACxC,CACvB,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,0BAA0B,8BAYrC;AAEK,MAAM,mCAAmC,GAAG,GAAG,EAAE;IACtD,OAAO,CACL,8BAAC,0CAAmB,IAClB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,EAChF,OAAO,EAAC,gBAAgB,EACxB,YAAY,EAAC,MAAM,EACnB,aAAa,EAAC,eAAe;QAE7B,8BAAC,oFAAuB,qBAAqC;QAC7D,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,oFAAuB,oBAAoC,CACxC,CACvB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,mCAAmC,uCAe9C;AAEK,MAAM,+BAA+B,GAAG,GAAG,EAAE;IAClD,OAAO,CACL,8BAAC,uCAAkB;QACjB,8BAAC,0CAAmB,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE;;YACN,4CAAO,sBAAsB,CAAQ;YACrF,yCAAM;;YAEN,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,qBAAqC;YAC7D,yCAAM;YACN,yCAAM;YACN,yCAAM;YACN,8BAAC,oFAAuB,oBAAoC,CACxC,CACH,CACtB,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,+BAA+B,mCAkB1C;AAEK,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,MAAM,IAAI,GAAG,gBAAgB,CAAC;IAE9B,OAAO,CACL,8BAAC,0CAAmB,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QACjF;;YACkB;;gBAAQ,IAAI;qBAAS,CACjC;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,uCAAK,EAAE,EAAC,aAAa;YACnB,8BAAC,oFAAuB,mCAAmD,CACvE,CACc,CACvB,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,2BAA2B,+BAkBtC;AAEK,MAAM,oCAAoC,GAAG,GAAG,EAAE;IACvD,MAAM,YAAY,GAAG,+BAA+B,CAAC;IAErD,OAAO,CACL,8BAAC,0CAAmB,IAAC,aAAa,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QAClG;;YACoB;;gBAAQ,YAAY;qBAAS,CAC3C;QACN,yCAAM;QACN,8BAAC,oFAAuB,yBAAyC;QACjE,yCAAM;QACN,yCAAM;QACN,yCAAM;QACN,8BAAC,2BAAU,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,+BAAuC,CAClF,CACvB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,oCAAoC,wCAgB/C;AAEF,oEAAoE;AACpE,aAAa;AACb,4BAA4B;AAC5B,uDAAuD;AACvD,6BAA6B;AAC7B,OAAO;AACP,KAAK"}

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

@@ -8,7 +8,7 @@ const react_2 = require("@testing-library/react");
 const children_highlighter_composition_1 = require("./children-highlighter.composition");
 it('should not throw when rendering the children-highlighter', () => {
     const { getByText } = (0, react_2.render)(react_1.default.createElement(children_highlighter_composition_1.ChildrenHighlighterPreview, null));
-    const rendered = getByText('hover here');
+    const rendered = getByText('target #1');
     expect(rendered).toBeInstanceOf(HTMLElement);
 });
 // .querySelectorAll() is not working as expected during the test, ignoring for now :(

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

@@ -1 +1 @@
-{"version":3,"file":"children-highlighter.spec.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAChD,yFAAgF;AAEhF,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;IAClE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,6DAA0B,OAAG,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;IAEzC,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,sFAAsF;AACtF,4EAA4E;AAC5E,oDAAoD;AAEpD,8BAA8B;AAC9B,sDAAsD;AAEtD,qDAAqD;AACrD,sCAAsC;AACtC,MAAM"}
+{"version":3,"file":"children-highlighter.spec.js","sourceRoot":"","sources":["../../children-highlighter/children-highlighter.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAChD,yFAAgF;AAEhF,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;IAClE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,6DAA0B,OAAG,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;IAExC,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,sFAAsF;AACtF,4EAA4E;AAC5E,oDAAoD;AAEpD,8BAA8B;AAC9B,sDAAsD;AAEtD,qDAAqD;AACrD,sCAAsC;AACtC,MAAM"}

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

@@ -45,6 +45,8 @@ function targetsSelector(
  * The `:scope` modifier is appropriate, but is not supported in older browsers.
  */
 scopeSelector = ':scope') {
-    return `:not(${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector}, ${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector} *)`;
+    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

@@ -1 +1 @@
-{"version":3,"file":"use-children-highlighter.js","sourceRoot":"","sources":["../../children-highlighter/use-children-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA6C;AAC7C,0DAAiC;AACjC,oFAAiF;AACjF,oJAK6E;AAC7E,8DAAmE;AACnE,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,QAAQ;YAAE,OAAO;QAEtC,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;AAtCD,wDAsCC;AAED,SAAS,eAAe;AACtB;;;GAGG;AACH,aAAa,GAAG,QAAQ;IAExB,OAAO,QAAQ,aAAa,IAAI,+CAA0B,KAAK,aAAa,IAAI,+CAA0B,KAAK,CAAC;AAClH,CAAC"}
+{"version":3,"file":"use-children-highlighter.js","sourceRoot":"","sources":["../../children-highlighter/use-children-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,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,QAAQ;YAAE,OAAO;QAEtC,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;AAtCD,wDAsCC;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/element-highlighter/element-highlighter.compositions.d.ts

@@ -9,5 +9,6 @@ export declare const HighlightedElement: ({ style, targetStyle, watchMotion, cla
 export declare const Customized: () => JSX.Element;
 export declare const Sizes: () => JSX.Element;
 export declare const MovingElement: () => JSX.Element;
-export declare const ElementOnTheEdge: () => JSX.Element;
+export declare const FullscreenElement: () => JSX.Element;
+export declare function OffscreenElements(): JSX.Element;
 export {};

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

@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ElementOnTheEdge = exports.MovingElement = exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
+exports.OffscreenElements = exports.FullscreenElement = exports.MovingElement = exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
 const react_1 = __importStar(require("react"));
 const element_highlighter_1 = require("./element-highlighter");
 const mock_component_1 = require("../mock-component");
@@ -56,14 +56,44 @@ const MovingElement = () => {
     return react_1.default.createElement(exports.HighlightedElement, { targetStyle: { marginLeft: margin }, watchMotion: true });
 };
 exports.MovingElement = MovingElement;
-const ElementOnTheEdge = () => {
+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: { width: '100%', border: '1px solid black', boxSizing: 'border-box' } },
-            "This element is on the edge of the document, making the highlighter overflow. ",
+        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),
-            "It should instead shrink to fit inside the document."),
+            "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.ElementOnTheEdge = ElementOnTheEdge;
+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 }))));
+}
+exports.OffscreenElements = OffscreenElements;
 //# 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":"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"}
+{"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.js

@@ -23,7 +23,7 @@ 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.excludeHighlighterAtt, { className: (0, classnames_1.default)(classes === null || classes === void 0 ? void 0 : classes.container, element_highlighter_module_scss_1.default.container, className) }),
+    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 })))));

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

@@ -1 +1 @@
-{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAAyC;AACzC,4DAAoC;AAEpC,oCAAiC;AACjC,oCAA4D;AAC5D,8DAA8D;AAC9D,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,0CAAqB,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,yCAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/G,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;AApBD,gDAoBC"}
+{"version":3,"file":"element-highlighter.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,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;AApBD,gDAoBC"}

package/dist/frame/frame.js

@@ -18,6 +18,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 };
 };
@@ -31,13 +40,13 @@ const frame_module_scss_1 = __importDefault(require("./frame.module.scss"));
 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;
-// position - bottom start (bottom left corner)
-// x - width - horizontal (cross axis)
-// y - height - vertical (main axis)
+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 shiftRef = (0, react_1.useRef)();
-    const { x, y, strategy, reference, floating, update, refs } = (0, react_dom_1.useFloating)({
+    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
@@ -50,35 +59,47 @@ function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_s
                 },
             },
             // reposition x,y, to the top of the reference
-            (0, react_dom_1.offset)((options) => -options.reference.height),
+            (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 })),
-            // push the frame inside the screen
-            (0, react_dom_1.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)
+            // pushes the frame into the document. Similar to shift(), but only pushes when coods are negative
             {
-                name: 'read-shift',
-                fn({ middlewareData }) {
-                    shiftRef.current = middlewareData.shift;
-                    return {};
-                },
+                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({ reference: referenceRect, height, width }) {
-                    var _a, _b, _c;
-                    const paddingX = 2 * MARGIN_FROM_TARGET - (((_a = shiftRef.current) === null || _a === void 0 ? void 0 : _a.x) || 0);
-                    const paddingY = 2 * MARGIN_FROM_TARGET - (((_b = shiftRef.current) === null || _b === void 0 ? void 0 : _b.y) || 0);
-                    dimensionRef.current = {
-                        width: Math.min(referenceRect.width + paddingX, width),
-                        height: Math.min(referenceRect.height + paddingY, height),
+                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,
                     };
-                    Object.assign((_c = refs.floating.current) === null || _c === void 0 ? void 0 : _c.style, dimensionRef.current);
+                    // 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
@@ -88,12 +109,15 @@ function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_s
     // 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)
+        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]);
-    const isReady = x !== null;
-    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, top: y !== null && y !== void 0 ? y : '', left: x !== null && x !== void 0 ? x : '' }) }));
+    // 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 }) }));
 }
 exports.Frame = Frame;
 //# sourceMappingURL=frame.js.map

package/dist/frame/frame.js.map

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

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

@@ -1,2 +1,4 @@
 /// <reference types="react" />
 export declare const ShowWhenHovering: () => JSX.Element;
+export declare const UnmountingElement: () => JSX.Element;
+export declare const HoverExclusionZones: () => JSX.Element;

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

@@ -19,10 +19,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShowWhenHovering = void 0;
+exports.HoverExclusionZones = exports.UnmountingElement = exports.ShowWhenHovering = void 0;
 const react_1 = __importStar(require("react"));
-const design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
 const hover_highlighter_1 = require("./hover-highlighter");
+const mock_component_1 = require("../mock-component");
+const ignore_highlighter_1 = require("../ignore-highlighter");
 const ShowWhenHovering = () => {
     const [disabled, setDisabled] = (0, react_1.useState)(false);
     return (react_1.default.createElement("div", { style: { padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' } },
@@ -30,11 +31,39 @@ const ShowWhenHovering = () => {
             react_1.default.createElement("div", null,
                 react_1.default.createElement("br", null),
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement(design_ui_icon_button_1.IconButton, { onClick: () => setDisabled((x) => !x) }, "Hover here")),
+                    react_1.default.createElement(mock_component_1.MockButton, { onClick: () => setDisabled((x) => !x) }, "Hover here")),
                 react_1.default.createElement("div", null,
                     disabled ? 'X' : '✓',
                     " highlighter is ",
                     disabled ? 'disabled' : 'enabled')))));
 };
 exports.ShowWhenHovering = ShowWhenHovering;
+const UnmountingElement = () => {
+    const [shown, setShown] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        const tid = setInterval(() => setShown((x) => !x), 1500);
+        return () => clearInterval(tid);
+    }, []);
+    return (react_1.default.createElement("div", { style: { padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' } },
+        react_1.default.createElement(hover_highlighter_1.HoverHighlighter, null,
+            react_1.default.createElement("div", null, !shown && '(hidden)'),
+            react_1.default.createElement("div", null, shown && react_1.default.createElement(mock_component_1.MockButton, null, "Hover here")),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(mock_component_1.MockTarget, null,
+                react_1.default.createElement("div", null, shown && react_1.default.createElement(mock_component_1.MockButton, null, "Hover here")),
+                react_1.default.createElement("div", null, "same with a container")))));
+};
+exports.UnmountingElement = UnmountingElement;
+const HoverExclusionZones = () => {
+    return (react_1.default.createElement("div", { style: { padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' } },
+        react_1.default.createElement(hover_highlighter_1.HoverHighlighter, null,
+            react_1.default.createElement(mock_component_1.MockTarget, null,
+                "container (target-able)",
+                react_1.default.createElement("div", null, react_1.default.createElement(mock_component_1.MockButton, null, "will be highlighted"))),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(mock_component_1.MockTarget, null,
+                "container (target-able)",
+                react_1.default.createElement("div", Object.assign({}, ignore_highlighter_1.excludeHighlighterAtt), react_1.default.createElement(mock_component_1.MockButton, null, "will be ignored"))))));
+};
+exports.HoverExclusionZones = HoverExclusionZones;
 //# sourceMappingURL=hover-highlighter.compositions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hover-highlighter.compositions.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,0EAA4D;AAC5D,2DAAuD;AAEhD,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEzD,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QACrF,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC1D;gBACE,yCAAM;gBACN;oBACE,8BAAC,kCAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAyB,CACtE;gBACN;oBACG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;oBAAkB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CACpE,CACF,CACW,CACf,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,gBAAgB,oBAkB3B"}
+{"version":3,"file":"hover-highlighter.compositions.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,2DAAuD;AACvD,sDAA2D;AAC3D,8DAA8D;AAEvD,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEzD,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QACrF,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC1D;gBACE,yCAAM;gBACN;oBACE,8BAAC,2BAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAyB,CACtE;gBACN;oBACG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;oBAAkB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CACpE,CACF,CACW,CACf,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,gBAAgB,oBAkB3B;AAEK,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IACzC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;QACzD,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QACrF,8BAAC,oCAAgB;YACf,2CAAM,CAAC,KAAK,IAAI,UAAU,CAAO;YAEjC,2CAAM,KAAK,IAAI,8BAAC,2BAAU,qBAAwB,CAAO;YACzD,yCAAM;YACN,8BAAC,2BAAU;gBACT,2CAAM,KAAK,IAAI,8BAAC,2BAAU,qBAAwB,CAAO;gBACzD,mEAAgC,CACrB,CACI,CACf,CACP,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,iBAAiB,qBAqB5B;AAEK,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QACrF,8BAAC,oCAAgB;YACf,8BAAC,2BAAU;;gBAET,2CAAM,8BAAC,2BAAU,8BAAiC,CAAO,CAC9C;YACb,yCAAM;YACN,8BAAC,2BAAU;;gBAET,uDAAS,0CAAqB,GAAG,8BAAC,2BAAU,0BAA6B,CAAO,CACrE,CACI,CACf,CACP,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,mBAAmB,uBAgB9B"}

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

@@ -21,8 +21,13 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
             onChange(undefined);
             return;
         }
-        // skip DOM trees having 'data-ignore-component-highlight'
-        if (element.closest(`.${scopeClass} ${ignore_highlighter_1.excludeHighlighterSelector}`))
+        // clear when ancestor has 'data-ignore-component-highlight'
+        if (element.closest(`.${scopeClass} ${ignore_highlighter_1.excludeHighlighterSelector}`)) {
+            onChange(undefined);
+            return;
+        }
+        // skip DOM trees having 'data-skip-component-highlight'
+        if (element.closest(`.${scopeClass} ${ignore_highlighter_1.skipHighlighterSelector}`))
             return;
         const result = (0, bubble_to_component_1.bubbleToComponent)(element, { elementRule: rule, componentRule });
         if (!result)

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

@@ -1 +1 @@
-{"version":3,"file":"use-hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/use-hover-highlighter.tsx"],"names":[],"mappings":";;;AAAA,iCAAyC;AACzC,+CAAoD;AACpD,8EAAqE;AAGrE,8DAAmE;AAEnE,+DAA0D;AAa1D,oDAAoD;AACpD,SAAgB,mBAAmB,CACjC,QAA4C,EAC5C,QAAiC,EAAE,EACnC,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAA8B;IAE3F,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;IAErH,MAAM,QAAQ,GAAG,IAAA,2CAAiB,EAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAEhF,OAAO,QAAQ,CAAC;AAClB,CAAC;AAVD,kDAUC;AAWD,SAAS,eAAe,CAAC,EACvB,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,gBAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,aAAa,GACY;IACzB,yDAAyD;IACzD,MAAM,cAAc,GAAG,CAAC,OAA2B,EAAE,EAAE;QACrD,kCAAkC;QAClC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,kCAAkC,CAAC,EAAE;YACxE,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO;SACR;QAED,0DAA0D;QAC1D,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,UAAU,IAAI,+CAA0B,EAAE,CAAC;YAAE,OAAO;QAE5E,MAAM,MAAM,GAAG,IAAA,uCAAiB,EAAC,OAAO,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;QAChF,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,QAAQ,CAAC;YACP,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mCAAoB,EAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;IAE7E,uBAAuB;IACvB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,aAAa,CAAC,MAAM,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,aAAa,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"use-hover-highlighter.js","sourceRoot":"","sources":["../../hover-highlighter/use-hover-highlighter.tsx"],"names":[],"mappings":";;;AAAA,iCAAyC;AACzC,+CAAoD;AACpD,8EAAqE;AAGrE,8DAA4F;AAE5F,+DAA0D;AAa1D,oDAAoD;AACpD,SAAgB,mBAAmB,CACjC,QAA4C,EAC5C,QAAiC,EAAE,EACnC,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAA8B;IAE3F,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;IAErH,MAAM,QAAQ,GAAG,IAAA,2CAAiB,EAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAEhF,OAAO,QAAQ,CAAC;AAClB,CAAC;AAVD,kDAUC;AAWD,SAAS,eAAe,CAAC,EACvB,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,gBAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,aAAa,GACY;IACzB,yDAAyD;IACzD,MAAM,cAAc,GAAG,CAAC,OAA2B,EAAE,EAAE;QACrD,kCAAkC;QAClC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,kCAAkC,CAAC,EAAE;YACxE,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO;SACR;QAED,4DAA4D;QAC5D,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,UAAU,IAAI,+CAA0B,EAAE,CAAC,EAAE;YACnE,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO;SACR;QAED,wDAAwD;QACxD,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,UAAU,IAAI,4CAAuB,EAAE,CAAC;YAAE,OAAO;QAEzE,MAAM,MAAM,GAAG,IAAA,uCAAiB,EAAC,OAAO,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;QAChF,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,QAAQ,CAAC;YACP,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mCAAoB,EAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;IAE7E,uBAAuB;IACvB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,aAAa,CAAC,MAAM,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,aAAa,EAAE,CAAC;AAC3B,CAAC"}

package/dist/ignore-highlighter.d.ts

@@ -1,10 +1,19 @@
 import React from 'react';
+/** name of ignore attribute */
 export declare const excludeHighlighterAttrName = "data-ignore-component-highlight";
-/** select elements matching the exclusion pattern */
+/** selector for elements with the ignore attribute */
 export declare const excludeHighlighterSelector: string;
-/** elements with these attributes will be ignored by the automatic highlighter */
+/** highlighter will exclude elements with this attribute */
 export declare const excludeHighlighterAtt: {
     "data-ignore-component-highlight": boolean;
 };
-/** elements under this element will be ignored by the automatic highlighter */
+/** children of this element will be excluded by the automatic highlighter */
 export declare function ExcludeHighlighter(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+/** name of skip attribute */
+export declare const skipHighlighterAttrName = "data-skip-component-highlight";
+/** highlighter will skip (ignore) elements with these attributes */
+export declare const skipHighlighterAttr: {
+    "data-skip-component-highlight": boolean;
+};
+/** selector for elements with the skip attribute */
+export declare const skipHighlighterSelector: string;