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

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

@@ -57,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>
@@ -75,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 />
-      <MockTarget>this will be highlighted</MockTarget>
+      <MockTarget style={{ display: 'inline-block', margin: '0 8px' }}>this will be highlighted</MockTarget>
     </ChildrenHighlighter>
   );
 };

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

@@ -49,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),
@@ -63,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(mock_component_1.MockTarget, 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,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,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,2BAAU,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/frame/frame.js

@@ -41,13 +41,11 @@ const MARGIN_FROM_TARGET = +frame_module_scss_1.default.offset || 6; // setting
 /** min. distance from the edge of the screen. */
 const MARGIN_FROM_DOC_EDGE = 0;
 const overflowParameters = { rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE };
-// position - bottom start (bottom left corner)
-// x - width - horizontal (cross axis)
-// y - height - vertical (main axis)
+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, middlewareData } = (0, react_dom_1.useFloating)({
         placement: 'bottom-start',
         middleware: [
@@ -61,7 +59,7 @@ 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 })),
             // pushes the frame into the document. Similar to shift(), but only pushes when coods are negative
@@ -77,7 +75,6 @@ function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_s
                         x: nextCoords.x - args.x,
                         y: nextCoords.y - args.y,
                     };
-                    shiftRef.current = shiftAmount;
                     return Object.assign(Object.assign({}, nextCoords), { data: shiftAmount });
                 }),
             },
@@ -86,15 +83,20 @@ function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_s
                 // 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' }),
@@ -107,7 +109,7 @@ 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]);

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/label/component-strip.compositions.d.ts

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

package/dist/label/component-strip.compositions.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentStripPreview = void 0;
+const react_1 = __importDefault(require("react"));
+const component_strip_1 = require("./component-strip");
+const mock_component_1 = require("../mock-component");
+const ComponentStripPreview = () => {
+    return (react_1.default.createElement("div", { style: { fontFamily: 'sans-serif', padding: 8 } },
+        react_1.default.createElement(component_strip_1.ComponentStrip, { component: mock_component_1.MockSnap }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(component_strip_1.ComponentStrip, { component: mock_component_1.MockButton })));
+};
+exports.ComponentStripPreview = ComponentStripPreview;
+//# sourceMappingURL=component-strip.compositions.js.map

package/dist/label/component-strip.compositions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-strip.compositions.js","sourceRoot":"","sources":["../../label/component-strip.compositions.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAAmD;AACnD,sDAAyD;AAElD,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE;QAClD,8BAAC,gCAAc,IAAC,SAAS,EAAE,yBAAQ,GAAI;QACvC,yCAAM;QACN,8BAAC,gCAAc,IAAC,SAAS,EAAE,2BAAU,GAAI,CACrC,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,qBAAqB,yBAQhC"}

package/dist/label/component-strip.js

@@ -37,14 +37,16 @@ exports.ComponentStrip = (0, react_1.forwardRef)(function ComponentStrip({ compo
     return (react_1.default.createElement("div", { className: component_strip_module_scss_1.default.componentStrip, ref: ref },
         !parsedId && react_1.default.createElement(LabelBlock, { link: homepage }, id),
         parsedId && react_1.default.createElement(LabelBlock, { link: component_modules_component_url_1.ScopeUrl.toUrl(parsedId.scope) }, parsedId.scope),
-        parsedId && (react_1.default.createElement(LabelBlock, { link: componentLink },
-            parsedId.fullName,
-            parsedId.version && parsedId.version !== 'latest' && `@${parsedId.version}`)),
+        parsedId && (react_1.default.createElement(LabelBlock, { link: componentLink, className: component_strip_module_scss_1.default.nameBlock },
+            react_1.default.createElement("span", null, parsedId.fullName),
+            parsedId.version && parsedId.version !== 'latest' && (react_1.default.createElement("span", { className: component_strip_module_scss_1.default.version },
+                "@",
+                parsedId.version)))),
         children));
 });
-function LabelBlock({ link, children }) {
+function LabelBlock({ link, children, className }) {
     const Comp = link ? base_ui_routing_native_link_1.NativeLink : 'span';
-    return (react_1.default.createElement(Comp, { href: link, external: !!link }, children));
+    return (react_1.default.createElement(Comp, { href: link, external: !!link, className: className }, children));
 }
 function extractMetadata(metadata) {
     if (typeof metadata === 'string') {

package/dist/label/component-strip.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-strip.js","sourceRoot":"","sources":["../../label/component-strip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4E;AAC5E,sFAAkE;AAClE,wDAAoD;AACpD,8FAAoE;AACpE,oJAI6E;AAC7E,gGAAmD;AACnD,mCAA4C;AAK/B,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAC,SAAS,cAAc,CAC9D,EAAE,SAAS,EAAE,QAAQ,EAAuB,EAC5C,GAAiC;IAEjC,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAE9D,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,0BAAW,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,QAAQ,IAAI,IAAA,yBAAiB,EAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAExE,OAAO,CACL,uCAAK,SAAS,EAAE,qCAAM,CAAC,cAAc,EAAE,GAAG,EAAE,GAAG;QAC5C,CAAC,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,QAAQ,IAAG,EAAE,CAAc;QAC1D,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,0CAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAG,QAAQ,CAAC,KAAK,CAAc;QAC3F,QAAQ,IAAI,CACX,8BAAC,UAAU,IAAC,IAAI,EAAE,aAAa;YAC5B,QAAQ,CAAC,QAAQ;YACjB,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,QAAQ,CAAC,OAAO,EAAE,CACjE,CACd;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAA0C;IAC5E,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,wCAAU,CAAC,CAAC,CAAC,MAAM,CAAC;IACxC,OAAO,CACL,8BAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,IAC/B,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,QAAsC;IAC7D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;QAChC,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACzC;IAED,OAAO,QAAQ,CAAC,+EAAkB,CAAC,CAAC;AACtC,CAAC"}
+{"version":3,"file":"component-strip.js","sourceRoot":"","sources":["../../label/component-strip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4E;AAC5E,sFAAkE;AAClE,wDAAoD;AACpD,8FAAoE;AACpE,oJAI6E;AAC7E,gGAAmD;AACnD,mCAA4C;AAK/B,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAC,SAAS,cAAc,CAC9D,EAAE,SAAS,EAAE,QAAQ,EAAuB,EAC5C,GAAiC;IAEjC,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAE9D,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,0BAAW,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,QAAQ,IAAI,IAAA,yBAAiB,EAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAExE,OAAO,CACL,uCAAK,SAAS,EAAE,qCAAM,CAAC,cAAc,EAAE,GAAG,EAAE,GAAG;QAC5C,CAAC,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,QAAQ,IAAG,EAAE,CAAc;QAC1D,QAAQ,IAAI,8BAAC,UAAU,IAAC,IAAI,EAAE,0CAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAG,QAAQ,CAAC,KAAK,CAAc;QAC3F,QAAQ,IAAI,CACX,8BAAC,UAAU,IAAC,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,qCAAM,CAAC,SAAS;YAC1D,4CAAO,QAAQ,CAAC,QAAQ,CAAQ;YAC/B,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,QAAQ,IAAI,CACpD,wCAAM,SAAS,EAAE,qCAAM,CAAC,OAAO;;gBAAI,QAAQ,CAAC,OAAO,CAAQ,CAC5D,CACU,CACd;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAA8D;IAC3G,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,wCAAU,CAAC,CAAC,CAAC,MAAM,CAAC;IACxC,OAAO,CACL,8BAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,IACrD,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,QAAsC;IAC7D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;QAChC,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACzC;IAED,OAAO,QAAQ,CAAC,+EAAkB,CAAC,CAAC;AACtC,CAAC"}

package/dist/label/component-strip.module.scss

@@ -7,6 +7,7 @@ $gap: 0.125em;
 
   border-radius: $borderRadius;
   box-shadow: var(--bit-highlighter-shadow);
+  white-space: nowrap;
 
   > * {
     padding: 0 0.5em;
@@ -47,3 +48,21 @@ $gap: 0.125em;
     }
   }
 }
+
+.nameBlock {
+  display: flex;
+
+  .version {
+    // leave room for 9 digits + 3 "."
+    max-width: 13ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    
+    transition: max-width 480ms;
+
+    &:hover {
+      max-width: 61ch;
+    }
+  }
+}

package/dist/label/label-container.js

@@ -39,6 +39,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const lodash_compact_1 = __importDefault(require("lodash.compact"));
 const react_dom_1 = require("@floating-ui/react-dom");
 const label_module_scss_1 = __importDefault(require("./label.module.scss"));
+const HAS_RESIZE_OBSERVER = typeof window !== 'undefined' && !!window.ResizeObserver;
 function LabelContainer(_a) {
     var _b;
     var { targetRef, offset, placement, flip = true, watchMotion, className, style } = _a, rest = __rest(_a, ["targetRef", "offset", "placement", "flip", "watchMotion", "className", "style"]);
@@ -58,7 +59,7 @@ function LabelContainer(_a) {
     // 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]);

package/dist/label/label-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"label-container.js","sourceRoot":"","sources":["../../label/label-container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqE;AACrE,4DAAoC;AACpC,oEAAqC;AACrC,sDAOgC;AAEhC,4EAAyC;AAazC,SAAgB,cAAc,CAAC,EAST;;QATS,EAC7B,SAAS,EACT,MAAM,EACN,SAAS,EACT,IAAI,GAAG,IAAI,EACX,WAAW,EACX,SAAS,EACT,KAAK,OAEe,EADjB,IAAI,cARsB,iFAS9B,CADQ;IAEP,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,uBAAW,EAAC;QACxF,SAAS;QACT,UAAU,EAAE,IAAA,wBAAO,EAAC;YAClB,MAAM,IAAI,IAAA,kBAAgB,EAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACzE,IAAI,IAAI,IAAA,gBAAc,GAAE;YACxB,4GAA4G;YAC5G,IAAA,iBAAK,EAAC,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;YACpE,IAAA,gBAAI,EAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC;SACtC,CAAC;KACH,CAAC,CAAC;IAEH,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,+CAA+C;IAC/C,sEAAsE;IACtE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAEvE,OAAO,IAAA,sBAAU,EAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;IAC9G,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,OAAO,GAAG,CAAC,CAAA,MAAA,cAAc,CAAC,IAAI,0CAAE,eAAe,CAAA,CAAC;IAEtD,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,CAAC,OAAO,IAAI,2BAAM,CAAC,MAAM,CAAC;QAC3D,kFAAkF;QAClF,KAAK,kCAAO,KAAK,KAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC,EAAE,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC,OAChE,CACH,CAAC;AACJ,CAAC;AA5CD,wCA4CC"}
+{"version":3,"file":"label-container.js","sourceRoot":"","sources":["../../label/label-container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqE;AACrE,4DAAoC;AACpC,oEAAqC;AACrC,sDAOgC;AAEhC,4EAAyC;AAEzC,MAAM,mBAAmB,GAAG,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;AAarF,SAAgB,cAAc,CAAC,EAST;;QATS,EAC7B,SAAS,EACT,MAAM,EACN,SAAS,EACT,IAAI,GAAG,IAAI,EACX,WAAW,EACX,SAAS,EACT,KAAK,OAEe,EADjB,IAAI,cARsB,iFAS9B,CADQ;IAEP,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,uBAAW,EAAC;QACxF,SAAS;QACT,UAAU,EAAE,IAAA,wBAAO,EAAC;YAClB,MAAM,IAAI,IAAA,kBAAgB,EAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACzE,IAAI,IAAI,IAAA,gBAAc,GAAE;YACxB,4GAA4G;YAC5G,IAAA,iBAAK,EAAC,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;YACpE,IAAA,gBAAI,EAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC;SACtC,CAAC;KACH,CAAC,CAAC;IAEH,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,+CAA+C;IAC/C,sEAAsE;IACtE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,mBAAmB;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAE/F,OAAO,IAAA,sBAAU,EAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;IAC9G,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,OAAO,GAAG,CAAC,CAAA,MAAA,cAAc,CAAC,IAAI,0CAAE,eAAe,CAAA,CAAC;IAEtD,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,CAAC,OAAO,IAAI,2BAAM,CAAC,MAAM,CAAC;QAC3D,kFAAkF;QAClF,KAAK,kCAAO,KAAK,KAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC,EAAE,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC,OAChE,CACH,CAAC;AACJ,CAAC;AA5CD,wCA4CC"}

package/dist/mock-component.d.ts

@@ -1,3 +1,4 @@
 import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
 export declare function MockTarget({ children, ...rest }: HTMLAttributes<HTMLDivElement>): JSX.Element;
 export declare function MockButton({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+export declare function MockSnap({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;

package/dist/mock-component.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MockButton = exports.MockTarget = void 0;
+exports.MockSnap = exports.MockButton = exports.MockTarget = void 0;
 const react_1 = __importDefault(require("react"));
 const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
 function MockTarget(_a) {
@@ -33,4 +33,12 @@ exports.MockButton = MockButton;
 MockButton[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] = {
     id: 'teambit.design/ui/icon-button@1.6.2',
 };
+function MockSnap(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return react_1.default.createElement("button", Object.assign({}, rest), children);
+}
+exports.MockSnap = MockSnap;
+MockSnap[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] = {
+    id: 'teambit.design/ui/icon-button@a21594d5cc63fd24d2b4763fa7d817b131f0edbb',
+};
 //# sourceMappingURL=mock-component.js.map

package/dist/mock-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"mock-component.js","sourceRoot":"","sources":["../mock-component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAAoE;AACpE,oJAAwH;AAExH,SAAgB,UAAU,CAAC,EAAqD;QAArD,EAAE,QAAQ,OAA2C,EAAtC,IAAI,cAAnB,YAAqB,CAAF;IAC5C,OAAO,uDAAS,IAAI,GAAG,QAAQ,CAAO,CAAC;AACzC,CAAC;AAFD,gCAEC;AACD,UAAU,CAAC,+EAAkB,CAAC,GAAG;IAC/B,EAAE,EAAE,qCAAqC;CACzB,CAAC;AAEnB,SAAgB,UAAU,CAAC,EAA8D;QAA9D,EAAE,QAAQ,OAAoD,EAA/C,IAAI,cAAnB,YAAqB,CAAF;IAC5C,OAAO,0DAAY,IAAI,GAAG,QAAQ,CAAU,CAAC;AAC/C,CAAC;AAFD,gCAEC;AACD,UAAU,CAAC,+EAAkB,CAAC,GAAG;IAC/B,EAAE,EAAE,qCAAqC;CACzB,CAAC"}
+{"version":3,"file":"mock-component.js","sourceRoot":"","sources":["../mock-component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAAoE;AACpE,oJAAwH;AAExH,SAAgB,UAAU,CAAC,EAAqD;QAArD,EAAE,QAAQ,OAA2C,EAAtC,IAAI,cAAnB,YAAqB,CAAF;IAC5C,OAAO,uDAAS,IAAI,GAAG,QAAQ,CAAO,CAAC;AACzC,CAAC;AAFD,gCAEC;AACD,UAAU,CAAC,+EAAkB,CAAC,GAAG;IAC/B,EAAE,EAAE,qCAAqC;CACzB,CAAC;AAEnB,SAAgB,UAAU,CAAC,EAA8D;QAA9D,EAAE,QAAQ,OAAoD,EAA/C,IAAI,cAAnB,YAAqB,CAAF;IAC5C,OAAO,0DAAY,IAAI,GAAG,QAAQ,CAAU,CAAC;AAC/C,CAAC;AAFD,gCAEC;AACD,UAAU,CAAC,+EAAkB,CAAC,GAAG;IAC/B,EAAE,EAAE,qCAAqC;CACzB,CAAC;AAEnB,SAAgB,QAAQ,CAAC,EAA8D;QAA9D,EAAE,QAAQ,OAAoD,EAA/C,IAAI,cAAnB,YAAqB,CAAF;IAC1C,OAAO,0DAAY,IAAI,GAAG,QAAQ,CAAU,CAAC;AAC/C,CAAC;AAFD,4BAEC;AACD,QAAQ,CAAC,+EAAkB,CAAC,GAAG;IAC7B,EAAE,EAAE,wEAAwE;CAC5D,CAAC"}

package/dist/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "es2019",
+            "DOM",
+            "ES6",
+            "DOM.Iterable"
+        ],
+        "target": "es2015",
+        "module": "CommonJS",
+        "jsx": "react",
+        "allowJs": true,
+        "composite": true,
+        "declaration": true,
+        "sourceMap": true,
+        "skipLibCheck": true,
+        "experimentalDecorators": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "rootDir": ".",
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "dist",
+        "package.json"
+    ],
+    "include": [
+        "**/*",
+        "**/*.json"
+    ]
+}

package/frame/frame.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, RefObject } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, RefObject, CSSProperties } from 'react';
 import classnames from 'classnames';
 import { useFloating, autoUpdate, offset, size, detectOverflow, hide } from '@floating-ui/react-dom';
 import type { Coords } from '@floating-ui/react-dom';
@@ -11,6 +11,9 @@ const MARGIN_FROM_TARGET = +styles.offset || 6; // setting fallback 6, for tests
 const MARGIN_FROM_DOC_EDGE = 0;
 
 const overflowParameters = { rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE } as const;
+const SHIFT_POSITIVE = 'shiftPositive';
+
+const HAS_RESIZE_OBSERVER = typeof window !== 'undefined' && !!window.ResizeObserver;
 
 export interface FrameProps extends React.HTMLAttributes<HTMLDivElement> {
   /** apply the frame to this element  */
@@ -28,9 +31,10 @@ export interface FrameProps extends React.HTMLAttributes<HTMLDivElement> {
 // x - width - horizontal (cross axis)
 // y - height - vertical (main axis)
 
+type DimensionsStyle = Pick<CSSProperties, 'width' | 'height' | 'maxWidth' | 'maxHeight'>;
+
 export function Frame({ targetRef, watchMotion, className, stylesClass = styles.overlayBorder, style }: FrameProps) {
-  const dimensionRef = useRef({ width: 0, height: 0 });
-  const shiftRef = useRef<Coords | undefined>();
+  const dimensionRef = useRef<DimensionsStyle>({ width: 0, height: 0 });
 
   const { x, y, strategy, reference, floating, update, refs, middlewareData } = useFloating({
     placement: 'bottom-start',
@@ -50,7 +54,7 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
         },
       },
       // reposition x,y, to the top of the reference
-      offset((options) => -options.reference.height),
+      offset(({ rects }) => -rects.reference.height),
       // offset the frame by its extra padding
       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
@@ -68,7 +72,6 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
             y: nextCoords.y - args.y,
           };
 
-          shiftRef.current = shiftAmount;
           return {
             ...nextCoords,
             data: shiftAmount,
@@ -80,16 +83,23 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
         // 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),
+        apply({ elements, rects, availableHeight, availableWidth, middlewareData }) {
+          const shift: Coords = 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: DimensionsStyle = {
+            width: rects.reference.width + paddingX,
+            height: rects.reference.height + paddingY,
+            maxWidth: availableWidth,
+            maxHeight: availableHeight,
           };
 
-          Object.assign(refs.floating.current?.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;
         },
       }),
       hide({ strategy: 'referenceHidden' }),
@@ -104,7 +114,7 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
   // automatically update on scroll, resize, etc.
   // `watchMotion` will trigger continuous updates using animation frame
   useEffect(() => {
-    if (!refs.reference.current || !refs.floating.current) return () => {};
+    if (!refs.reference.current || !refs.floating.current || !HAS_RESIZE_OBSERVER) return () => {};
 
     return autoUpdate(refs.reference.current, refs.floating.current, update, { animationFrame: watchMotion });
   }, [refs.reference.current, refs.floating.current, update, watchMotion]);

package/label/component-strip.compositions.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentStrip } from './component-strip';
+import { MockButton, MockSnap } from '../mock-component';
+
+export const ComponentStripPreview = () => {
+  return (
+    <div style={{ fontFamily: 'sans-serif', padding: 8 }}>
+      <ComponentStrip component={MockSnap} />
+      <br />
+      <ComponentStrip component={MockButton} />
+    </div>
+  );
+};

package/label/component-strip.module.scss

@@ -7,6 +7,7 @@ $gap: 0.125em;
 
   border-radius: $borderRadius;
   box-shadow: var(--bit-highlighter-shadow);
+  white-space: nowrap;
 
   > * {
     padding: 0 0.5em;
@@ -47,3 +48,21 @@ $gap: 0.125em;
     }
   }
 }
+
+.nameBlock {
+  display: flex;
+
+  .version {
+    // leave room for 9 digits + 3 "."
+    max-width: 13ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    
+    transition: max-width 480ms;
+
+    &:hover {
+      max-width: 61ch;
+    }
+  }
+}

package/label/component-strip.tsx

@@ -27,9 +27,11 @@ export const ComponentStrip = forwardRef(function ComponentStrip(
       {!parsedId && <LabelBlock link={homepage}>{id}</LabelBlock>}
       {parsedId && <LabelBlock link={ScopeUrl.toUrl(parsedId.scope)}>{parsedId.scope}</LabelBlock>}
       {parsedId && (
-        <LabelBlock link={componentLink}>
-          {parsedId.fullName}
-          {parsedId.version && parsedId.version !== 'latest' && `@${parsedId.version}`}
+        <LabelBlock link={componentLink} className={styles.nameBlock}>
+          <span>{parsedId.fullName}</span>
+          {parsedId.version && parsedId.version !== 'latest' && (
+            <span className={styles.version}>@{parsedId.version}</span>
+          )}
         </LabelBlock>
       )}
       {children}
@@ -37,10 +39,10 @@ export const ComponentStrip = forwardRef(function ComponentStrip(
   );
 });
 
-function LabelBlock({ link, children }: { link?: string; children: ReactNode }) {
+function LabelBlock({ link, children, className }: { link?: string; children: ReactNode; className?: string }) {
   const Comp = link ? NativeLink : 'span';
   return (
-    <Comp href={link} external={!!link}>
+    <Comp href={link} external={!!link} className={className}>
       {children}
     </Comp>
   );

package/label/label-container.tsx

@@ -12,6 +12,8 @@ import {
 import type { Placement } from '@floating-ui/react-dom';
 import styles from './label.module.scss';
 
+const HAS_RESIZE_OBSERVER = typeof window !== 'undefined' && !!window.ResizeObserver;
+
 export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   targetRef: RefObject<HTMLElement | null>;
   offset?: [number, number];
@@ -51,7 +53,7 @@ export function LabelContainer({
   // automatically update on scroll, resize, etc.
   // `watchMotion` will trigger continuous updates using animation frame
   useEffect(() => {
-    if (!refs.reference.current || !refs.floating.current) return () => {};
+    if (!refs.reference.current || !refs.floating.current || !HAS_RESIZE_OBSERVER) return () => {};
 
     return autoUpdate(refs.reference.current, refs.floating.current, update, { animationFrame: !!watchMotion });
   }, [refs.reference.current, refs.floating.current, update, watchMotion]);

package/mock-component.tsx

@@ -14,3 +14,10 @@ export function MockButton({ children, ...rest }: ButtonHTMLAttributes<HTMLButto
 MockButton[componentMetaField] = {
   id: 'teambit.design/ui/icon-button@1.6.2',
 } as ComponentMeta;
+
+export function MockSnap({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button {...rest}>{children}</button>;
+}
+MockSnap[componentMetaField] = {
+  id: 'teambit.design/ui/icon-button@a21594d5cc63fd24d2b4763fa7d817b131f0edbb',
+} as ComponentMeta;

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.1.0"
+    "version": "0.2.0"
   },
   "dependencies": {
-    "get-xpath": "3.0.1",
-    "classnames": "2.3.1",
-    "@floating-ui/react-dom": "0.6.0",
-    "uuid": "3.4.0",
-    "use-debounce": "6.0.1",
-    "lodash.compact": "3.0.1",
-    "url-join": "^4.0.0",
+    "get-xpath": "^3.0.1",
+    "classnames": "^2.3.1",
+    "uuid": "^3.4.0",
+    "use-debounce": "^8.0.1",
+    "@floating-ui/react-dom": "0.7.2",
+    "lodash.compact": "^3.0.1",
+    "url-join": "^4.0.1",
     "@tippyjs/react": "4.2.0",
     "core-js": "^3.0.0",
     "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
@@ -23,57 +23,27 @@
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
     "@teambit/base-ui.routing.native-link": "1.0.0",
     "@teambit/component.modules.component-url": "0.0.124",
-    "@teambit/react.modules.dom-to-react": "0.1.0",
-    "@teambit/react.ui.hover-selector": "0.1.0"
+    "@teambit/react.modules.dom-to-react": "0.2.0",
+    "@teambit/react.ui.hover-selector": "0.2.0"
   },
   "devDependencies": {
-    "@testing-library/react": "11.2.6",
+    "@types/react": "^17.0.8",
+    "@testing-library/react": "^12.1.5",
     "@types/uuid": "3.4.9",
+    "@types/react-dom": "^17.0.5",
     "@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/react-dom": "^17.0.5",
-    "@types/react": "^17.0.8",
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
   "license": "Apache-2.0",
-  "bit": {
-    "bindingPrefix": "@teambit",
-    "env": {},
-    "overrides": {
-      "dependencies": {
-        "@teambit/legacy": "-",
-        "core-js": "^3.0.0",
-        "react-dom": "-",
-        "react": "-"
-      },
-      "devDependencies": {
-        "@teambit/legacy": "-",
-        "@types/mocha": "9.1.0",
-        "@types/testing-library__jest-dom": "5.9.5",
-        "@babel/runtime": "7.12.18",
-        "@types/jest": "^26.0.0",
-        "@types/react-dom": "^17.0.5",
-        "@types/react": "^17.0.8",
-        "@types/node": "12.20.4",
-        "react-dom": "-",
-        "react": "-"
-      },
-      "peerDependencies": {
-        "react-dom": "^16.8.0 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0"
-      }
-    }
-  },
   "private": false,
   "repository": {
     "type": "git",

package/preview-1657547073447.js

@@ -0,0 +1,8 @@
+import * as compositions_0 from '/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.2.0/dist/children-highlighter/children-highlighter.composition.js';
+import * as compositions_1 from '/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.2.0/dist/element-highlighter/element-highlighter.compositions.js';
+import * as compositions_2 from '/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.2.0/dist/hover-highlighter/hover-highlighter.compositions.js';
+import * as compositions_3 from '/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.2.0/dist/label/component-strip.compositions.js';
+import * as overview_0 from '/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.2.0/dist/component-highlighter.docs.md';
+
+export const compositions = [compositions_0, compositions_1, compositions_2, compositions_3];
+export const overview = [overview_0];

package/tsconfig.json

@@ -7,13 +7,14 @@
       "DOM.Iterable"
     ],
     "target": "es2015",
-    "module": "commonjs",
+    "module": "CommonJS",
     "jsx": "react",
     "allowJs": true,
     "composite": true,
     "declaration": true,
     "sourceMap": true,
     "skipLibCheck": true,
+    "experimentalDecorators": true,
     "outDir": "dist",
     "moduleResolution": "node",
     "esModuleInterop": true,
@@ -21,6 +22,11 @@
     "resolveJsonModule": true
   },
   "exclude": [
-    "dist"
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
   ]
 }

package/preview-1649170982547.js

@@ -1,2 +0,0 @@
-export const compositions = [require('/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.1.0/dist/children-highlighter/children-highlighter.composition.js'), require('/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.1.0/dist/element-highlighter/element-highlighter.compositions.js'), require('/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.1.0/dist/hover-highlighter/hover-highlighter.compositions.js')]
-export const overview = [require('/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.1.0/dist/component-highlighter.docs.md')]