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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,4 +10,5 @@ export declare const Customized: () => JSX.Element;
10
10
  export declare const Sizes: () => JSX.Element;
11
11
  export declare const MovingElement: () => JSX.Element;
12
12
  export declare const ElementOnTheEdge: () => JSX.Element;
13
+ export declare const FullscreenElement: () => JSX.Element;
13
14
  export {};
@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
19
19
  return result;
20
20
  };
21
21
  Object.defineProperty(exports, "__esModule", { value: true });
22
- exports.ElementOnTheEdge = exports.MovingElement = exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
22
+ exports.FullscreenElement = exports.ElementOnTheEdge = exports.MovingElement = exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
23
23
  const react_1 = __importStar(require("react"));
24
24
  const element_highlighter_1 = require("./element-highlighter");
25
25
  const mock_component_1 = require("../mock-component");
@@ -66,4 +66,20 @@ const ElementOnTheEdge = () => {
66
66
  react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: targetRef, components: [mock_component_1.MockTarget], watchMotion: true })));
67
67
  };
68
68
  exports.ElementOnTheEdge = ElementOnTheEdge;
69
+ const FullscreenElement = () => {
70
+ const targetRef = (0, react_1.createRef)();
71
+ return (react_1.default.createElement("div", { style: { fontFamily: 'sans-serif' } },
72
+ react_1.default.createElement("div", { ref: targetRef, style: {
73
+ height: '100vh',
74
+ width: '100%',
75
+ background: '#bceed4',
76
+ } },
77
+ "This element will cover the entire document,",
78
+ react_1.default.createElement("br", null),
79
+ "pushing the highlighter to the edge of the window.",
80
+ react_1.default.createElement("br", null),
81
+ "The highlighter should remain inside and expand no further than the document."),
82
+ react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: targetRef, components: [mock_component_1.MockTarget], watchMotion: true })));
83
+ };
84
+ exports.FullscreenElement = FullscreenElement;
69
85
  //# sourceMappingURL=element-highlighter.compositions.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":"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"}
@@ -93,7 +93,9 @@ function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_s
93
93
  return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update, { animationFrame: watchMotion });
94
94
  }, [refs.reference.current, refs.floating.current, update, watchMotion]);
95
95
  const isReady = x !== null;
96
- 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 : '' }) }));
96
+ 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,
97
+ // starting at pos [0,0] will ensure the label doesn't increase the document size.
98
+ top: y !== null && y !== void 0 ? y : 0, left: x !== null && x !== void 0 ? x : 0 }) }));
97
99
  }
98
100
  exports.Frame = Frame;
99
101
  //# sourceMappingURL=frame.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"frame.js","sourceRoot":"","sources":["../../frame/frame.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"frame.js","sourceRoot":"","sources":["../../frame/frame.tsx"],"names":[],"mappings":"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"}
@@ -46,7 +46,8 @@ function LabelContainer(_a) {
46
46
  middleware: (0, lodash_compact_1.default)([
47
47
  offset && (0, react_dom_1.offset)({ mainAxis: offset[0], crossAxis: offset[1] }),
48
48
  flip && (0, react_dom_1.flip)(),
49
- (0, react_dom_1.shift)({ rootBoundary: 'viewport' }),
49
+ // enabling 'shift' for 'crossAxis' will make floating-ui push the label _inside_, when it has nowhere to go
50
+ (0, react_dom_1.shift)({ rootBoundary: 'document', mainAxis: true, crossAxis: true }),
50
51
  ]),
51
52
  });
52
53
  (0, react_1.useLayoutEffect)(() => {
@@ -60,7 +61,9 @@ function LabelContainer(_a) {
60
61
  return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update, { animationFrame: !!watchMotion });
61
62
  }, [refs.reference.current, refs.floating.current, update, watchMotion]);
62
63
  const isReady = x !== null;
63
- return (react_1.default.createElement("div", Object.assign({}, rest, { ref: floating, className: (0, classnames_1.default)(className, !isReady && label_module_scss_1.default.hidden), style: Object.assign(Object.assign({}, style), { position: strategy, top: y !== null && y !== void 0 ? y : '', left: x !== null && x !== void 0 ? x : '' }) })));
64
+ return (react_1.default.createElement("div", Object.assign({}, rest, { ref: floating, className: (0, classnames_1.default)(className, !isReady && label_module_scss_1.default.hidden),
65
+ // starting at pos [0,0] will ensure the label doesn't increase the document size.
66
+ style: Object.assign(Object.assign({}, style), { position: strategy, top: y !== null && y !== void 0 ? y : 0, left: x !== null && x !== void 0 ? x : 0 }) })));
64
67
  }
65
68
  exports.LabelContainer = LabelContainer;
66
69
  //# sourceMappingURL=label-container.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"label-container.js","sourceRoot":"","sources":["../../label/label-container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqE;AACrE,4DAAoC;AACpC,oEAAqC;AACrC,sDAMgC;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,GAAG,IAAA,uBAAW,EAAC;QACxE,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,IAAA,iBAAK,EAAC,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;SACpC,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,KAAK,IAAI,CAAC;IAE3B,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,CAAC,OAAO,IAAI,2BAAM,CAAC,MAAM,CAAC,EAC3D,KAAK,kCAAO,KAAK,KAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,EAAE,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,OAClE,CACH,CAAC;AACJ,CAAC;AAzCD,wCAyCC"}
1
+ {"version":3,"file":"label-container.js","sourceRoot":"","sources":["../../label/label-container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqE;AACrE,4DAAoC;AACpC,oEAAqC;AACrC,sDAMgC;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,GAAG,IAAA,uBAAW,EAAC;QACxE,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;SACrE,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,KAAK,IAAI,CAAC;IAE3B,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;AA3CD,wCA2CC"}
@@ -24,6 +24,8 @@
24
24
  }
25
25
 
26
26
  .hidden {
27
+ // label size is needed for position calculations,
28
+ // so it can't be removed by `display: none`
27
29
  visibility: hidden;
28
30
  pointer-events: none;
29
31
  user-select: none;
@@ -80,3 +80,27 @@ export const ElementOnTheEdge = () => {
80
80
  </div>
81
81
  );
82
82
  };
83
+
84
+ export const FullscreenElement = () => {
85
+ const targetRef = createRef<HTMLDivElement>();
86
+
87
+ return (
88
+ <div style={{ fontFamily: 'sans-serif' }}>
89
+ <div
90
+ ref={targetRef}
91
+ style={{
92
+ height: '100vh',
93
+ width: '100%',
94
+ background: '#bceed4',
95
+ }}
96
+ >
97
+ This element will cover the entire document,
98
+ <br />
99
+ pushing the highlighter to the edge of the window.
100
+ <br />
101
+ The highlighter should remain inside and expand no further than the document.
102
+ </div>
103
+ <ElementHighlighter targetRef={targetRef} components={[MockTarget]} watchMotion />
104
+ </div>
105
+ );
106
+ };
package/frame/frame.tsx CHANGED
@@ -103,8 +103,9 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
103
103
  ...style,
104
104
  ...dimensionRef.current,
105
105
  position: strategy,
106
- top: y ?? '',
107
- left: x ?? '',
106
+ // starting at pos [0,0] will ensure the label doesn't increase the document size.
107
+ top: y ?? 0,
108
+ left: x ?? 0,
108
109
  }}
109
110
  />
110
111
  );
@@ -37,7 +37,8 @@ export function LabelContainer({
37
37
  middleware: compact([
38
38
  offset && offsetMiddleware({ mainAxis: offset[0], crossAxis: offset[1] }),
39
39
  flip && flipMiddleware(),
40
- shift({ rootBoundary: 'viewport' }),
40
+ // enabling 'shift' for 'crossAxis' will make floating-ui push the label _inside_, when it has nowhere to go
41
+ shift({ rootBoundary: 'document', mainAxis: true, crossAxis: true }),
41
42
  ]),
42
43
  });
43
44
 
@@ -60,7 +61,8 @@ export function LabelContainer({
60
61
  {...rest}
61
62
  ref={floating}
62
63
  className={classnames(className, !isReady && styles.hidden)}
63
- style={{ ...style, position: strategy, top: y ?? '', left: x ?? '' }}
64
+ // starting at pos [0,0] will ensure the label doesn't increase the document size.
65
+ style={{ ...style, position: strategy, top: y ?? 0, left: x ?? 0 }}
64
66
  />
65
67
  );
66
68
  }
@@ -24,6 +24,8 @@
24
24
  }
25
25
 
26
26
  .hidden {
27
+ // label size is needed for position calculations,
28
+ // so it can't be removed by `display: none`
27
29
  visibility: hidden;
28
30
  pointer-events: none;
29
31
  user-select: none;
package/package.json CHANGED
@@ -1,19 +1,19 @@
1
1
  {
2
2
  "name": "@teambit/react.ui.component-highlighter",
3
- "version": "0.0.513",
3
+ "version": "0.0.514",
4
4
  "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.react",
8
8
  "name": "ui/component-highlighter",
9
- "version": "0.0.513"
9
+ "version": "0.0.514"
10
10
  },
11
11
  "dependencies": {
12
12
  "get-xpath": "3.0.1",
13
13
  "classnames": "2.2.6",
14
- "@floating-ui/react-dom": "0.6.0",
15
14
  "use-debounce": "6.0.1",
16
15
  "uuid": "3.4.0",
16
+ "@floating-ui/react-dom": "0.6.0",
17
17
  "lodash.compact": "3.0.1",
18
18
  "url-join": "4.0.1",
19
19
  "@tippyjs/react": "4.2.0",
@@ -1,2 +1,2 @@
1
- export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.513/dist/children-highlighter/children-highlighter.composition.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.513/dist/element-highlighter/element-highlighter.compositions.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.513/dist/hover-highlighter/hover-highlighter.compositions.js')]
2
- export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.513/dist/component-highlighter.docs.md')]
1
+ export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.514/dist/children-highlighter/children-highlighter.composition.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.514/dist/element-highlighter/element-highlighter.compositions.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.514/dist/hover-highlighter/hover-highlighter.compositions.js')]
2
+ export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.514/dist/component-highlighter.docs.md')]