@teambit/react.ui.component-highlighter 0.0.512 → 0.1.0
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.
- package/children-highlighter/children-highlighter.composition.tsx +5 -4
- package/children-highlighter/children-highlighter.spec.tsx +1 -1
- package/children-highlighter/use-children-highlighter.tsx +6 -3
- package/dist/children-highlighter/children-highlighter.composition.js +5 -4
- package/dist/children-highlighter/children-highlighter.composition.js.map +1 -1
- package/dist/children-highlighter/children-highlighter.spec.js +1 -1
- package/dist/children-highlighter/children-highlighter.spec.js.map +1 -1
- package/dist/children-highlighter/use-children-highlighter.js +3 -1
- package/dist/children-highlighter/use-children-highlighter.js.map +1 -1
- package/dist/element-highlighter/element-highlighter.compositions.d.ts +2 -1
- package/dist/element-highlighter/element-highlighter.compositions.js +36 -6
- package/dist/element-highlighter/element-highlighter.compositions.js.map +1 -1
- package/dist/element-highlighter/element-highlighter.js +1 -1
- package/dist/element-highlighter/element-highlighter.js.map +1 -1
- package/dist/frame/frame.js +33 -11
- package/dist/frame/frame.js.map +1 -1
- package/dist/hover-highlighter/hover-highlighter.compositions.d.ts +2 -0
- package/dist/hover-highlighter/hover-highlighter.compositions.js +32 -3
- package/dist/hover-highlighter/hover-highlighter.compositions.js.map +1 -1
- package/dist/hover-highlighter/use-hover-highlighter.js +7 -2
- package/dist/hover-highlighter/use-hover-highlighter.js.map +1 -1
- package/dist/ignore-highlighter.d.ts +12 -3
- package/dist/ignore-highlighter.js +11 -4
- package/dist/ignore-highlighter.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/dist/label/label-container.js +9 -4
- package/dist/label/label-container.js.map +1 -1
- package/dist/label/label.module.scss +2 -0
- package/dist/mock-component.d.ts +3 -2
- package/dist/mock-component.js +10 -4
- package/dist/mock-component.js.map +1 -1
- package/element-highlighter/element-highlighter.compositions.tsx +52 -4
- package/element-highlighter/element-highlighter.tsx +2 -2
- package/frame/frame.tsx +30 -12
- package/hover-highlighter/hover-highlighter.compositions.tsx +45 -3
- package/hover-highlighter/use-hover-highlighter.tsx +9 -3
- package/ignore-highlighter.tsx +11 -3
- package/index.ts +2 -1
- package/label/label-container.tsx +8 -4
- package/label/label.module.scss +2 -0
- package/mock-component.tsx +12 -5
- package/package-tar/teambit-react.ui.component-highlighter-0.1.0.tgz +0 -0
- package/package.json +16 -23
- package/preview-1649170982547.js +2 -0
- package/package-tar/teambit-react.ui.component-highlighter-0.0.512.tgz +0 -0
- package/preview-1648659683881.js +0 -2
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
// import { EnterpriseOffering } from '@teambit/evangelist.pages.enterprise-offering';
|
|
3
3
|
import { MockedComponentWithMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
4
|
-
import { IconButton } from '@teambit/design.ui.icon-button';
|
|
5
4
|
import { ExcludeHighlighter } from '../ignore-highlighter';
|
|
6
5
|
import { ChildrenHighlighter } from './children-highlighter';
|
|
6
|
+
import { MockTarget } from '../mock-component';
|
|
7
7
|
|
|
8
8
|
export const ChildrenHighlighterPreview = () => {
|
|
9
9
|
return (
|
|
10
10
|
// highlighter runs in compositions, therefor should not have our font
|
|
11
11
|
<ChildrenHighlighter style={{ padding: 40, minWidth: 200, fontFamily: 'sans-serif' }}>
|
|
12
|
-
<MockedComponentWithMeta>
|
|
12
|
+
<MockedComponentWithMeta>target #1</MockedComponentWithMeta>
|
|
13
|
+
<br />
|
|
13
14
|
<br />
|
|
14
15
|
<br />
|
|
15
16
|
<br />
|
|
16
|
-
<
|
|
17
|
+
<MockedComponentWithMeta>target #2</MockedComponentWithMeta>
|
|
17
18
|
</ChildrenHighlighter>
|
|
18
19
|
);
|
|
19
20
|
};
|
|
@@ -87,7 +88,7 @@ export const ChildrenHighlighterWithComponentRule = () => {
|
|
|
87
88
|
<br />
|
|
88
89
|
<br />
|
|
89
90
|
<br />
|
|
90
|
-
<
|
|
91
|
+
<MockTarget>this will be highlighted</MockTarget>
|
|
91
92
|
</ChildrenHighlighter>
|
|
92
93
|
);
|
|
93
94
|
};
|
|
@@ -5,7 +5,7 @@ import { ChildrenHighlighterPreview } from './children-highlighter.composition';
|
|
|
5
5
|
it('should not throw when rendering the children-highlighter', () => {
|
|
6
6
|
const { getByText } = render(<ChildrenHighlighterPreview />);
|
|
7
7
|
|
|
8
|
-
const rendered = getByText('
|
|
8
|
+
const rendered = getByText('target #1');
|
|
9
9
|
|
|
10
10
|
expect(rendered).toBeInstanceOf(HTMLElement);
|
|
11
11
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, RefObject } from 'react';
|
|
1
|
+
import { useEffect, RefObject, HtmlHTMLAttributes } from 'react';
|
|
2
2
|
import getXPath from 'get-xpath';
|
|
3
3
|
import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
|
|
4
4
|
import {
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
hasComponentMeta,
|
|
8
8
|
ReactComponentMetaHolder,
|
|
9
9
|
} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
10
|
-
import { excludeHighlighterSelector } from '../ignore-highlighter';
|
|
10
|
+
import { excludeHighlighterSelector, skipHighlighterSelector } from '../ignore-highlighter';
|
|
11
11
|
import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
|
|
12
12
|
|
|
13
13
|
type HighlighterTarget = Record<string, { element: HTMLElement; components: ComponentMetaHolder[] }>;
|
|
@@ -72,5 +72,8 @@ function targetsSelector(
|
|
|
72
72
|
*/
|
|
73
73
|
scopeSelector = ':scope'
|
|
74
74
|
) {
|
|
75
|
-
|
|
75
|
+
const excludedSelector = `${scopeSelector} ${excludeHighlighterSelector}, ${scopeSelector} ${excludeHighlighterSelector} *`;
|
|
76
|
+
const skippedSelector = `${scopeSelector} ${skipHighlighterSelector}, ${scopeSelector} ${skipHighlighterSelector} *`;
|
|
77
|
+
|
|
78
|
+
return `:not(${excludedSelector}, ${skippedSelector})`;
|
|
76
79
|
}
|
|
@@ -7,18 +7,19 @@ exports.ChildrenHighlighterWithComponentRule = exports.ChildrenHighlighterWithRu
|
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
// import { EnterpriseOffering } from '@teambit/evangelist.pages.enterprise-offering';
|
|
9
9
|
const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
|
|
10
|
-
const design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
|
|
11
10
|
const ignore_highlighter_1 = require("../ignore-highlighter");
|
|
12
11
|
const children_highlighter_1 = require("./children-highlighter");
|
|
12
|
+
const mock_component_1 = require("../mock-component");
|
|
13
13
|
const ChildrenHighlighterPreview = () => {
|
|
14
14
|
return (
|
|
15
15
|
// highlighter runs in compositions, therefor should not have our font
|
|
16
16
|
react_1.default.createElement(children_highlighter_1.ChildrenHighlighter, { style: { padding: 40, minWidth: 200, fontFamily: 'sans-serif' } },
|
|
17
|
-
react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "
|
|
17
|
+
react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "target #1"),
|
|
18
|
+
react_1.default.createElement("br", null),
|
|
18
19
|
react_1.default.createElement("br", null),
|
|
19
20
|
react_1.default.createElement("br", null),
|
|
20
21
|
react_1.default.createElement("br", null),
|
|
21
|
-
react_1.default.createElement(
|
|
22
|
+
react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta, null, "target #2")));
|
|
22
23
|
};
|
|
23
24
|
exports.ChildrenHighlighterPreview = ChildrenHighlighterPreview;
|
|
24
25
|
const ChildrenHighlighterWithCustomColors = () => {
|
|
@@ -71,7 +72,7 @@ const ChildrenHighlighterWithComponentRule = () => {
|
|
|
71
72
|
react_1.default.createElement("br", null),
|
|
72
73
|
react_1.default.createElement("br", null),
|
|
73
74
|
react_1.default.createElement("br", null),
|
|
74
|
-
react_1.default.createElement(
|
|
75
|
+
react_1.default.createElement(mock_component_1.MockTarget, null, "this will be highlighted")));
|
|
75
76
|
};
|
|
76
77
|
exports.ChildrenHighlighterWithComponentRule = ChildrenHighlighterWithComponentRule;
|
|
77
78
|
// export const HighlightingAllElementsInTheEnterprisePage = () => {
|
|
@@ -1 +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,
|
|
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"}
|
|
@@ -8,7 +8,7 @@ const react_2 = require("@testing-library/react");
|
|
|
8
8
|
const children_highlighter_composition_1 = require("./children-highlighter.composition");
|
|
9
9
|
it('should not throw when rendering the children-highlighter', () => {
|
|
10
10
|
const { getByText } = (0, react_2.render)(react_1.default.createElement(children_highlighter_composition_1.ChildrenHighlighterPreview, null));
|
|
11
|
-
const rendered = getByText('
|
|
11
|
+
const rendered = getByText('target #1');
|
|
12
12
|
expect(rendered).toBeInstanceOf(HTMLElement);
|
|
13
13
|
});
|
|
14
14
|
// .querySelectorAll() is not working as expected during the test, ignoring for now :(
|
|
@@ -1 +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,
|
|
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,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"}
|
|
@@ -45,6 +45,8 @@ function targetsSelector(
|
|
|
45
45
|
* The `:scope` modifier is appropriate, but is not supported in older browsers.
|
|
46
46
|
*/
|
|
47
47
|
scopeSelector = ':scope') {
|
|
48
|
-
|
|
48
|
+
const excludedSelector = `${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector}, ${scopeSelector} ${ignore_highlighter_1.excludeHighlighterSelector} *`;
|
|
49
|
+
const skippedSelector = `${scopeSelector} ${ignore_highlighter_1.skipHighlighterSelector}, ${scopeSelector} ${ignore_highlighter_1.skipHighlighterSelector} *`;
|
|
50
|
+
return `:not(${excludedSelector}, ${skippedSelector})`;
|
|
49
51
|
}
|
|
50
52
|
//# sourceMappingURL=use-children-highlighter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-children-highlighter.js","sourceRoot":"","sources":["../../children-highlighter/use-children-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,
|
|
1
|
+
{"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"}
|
|
@@ -9,5 +9,6 @@ export declare const HighlightedElement: ({ style, targetStyle, watchMotion, cla
|
|
|
9
9
|
export declare const Customized: () => JSX.Element;
|
|
10
10
|
export declare const Sizes: () => JSX.Element;
|
|
11
11
|
export declare const MovingElement: () => JSX.Element;
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const FullscreenElement: () => JSX.Element;
|
|
13
|
+
export declare function OffscreenElements(): 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.
|
|
22
|
+
exports.OffscreenElements = exports.FullscreenElement = 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");
|
|
@@ -56,14 +56,44 @@ const MovingElement = () => {
|
|
|
56
56
|
return react_1.default.createElement(exports.HighlightedElement, { targetStyle: { marginLeft: margin }, watchMotion: true });
|
|
57
57
|
};
|
|
58
58
|
exports.MovingElement = MovingElement;
|
|
59
|
-
const
|
|
59
|
+
const FullscreenElement = () => {
|
|
60
60
|
const targetRef = (0, react_1.createRef)();
|
|
61
61
|
return (react_1.default.createElement("div", { style: { fontFamily: 'sans-serif' } },
|
|
62
|
-
react_1.default.createElement("div", { ref: targetRef, style: {
|
|
63
|
-
|
|
62
|
+
react_1.default.createElement("div", { ref: targetRef, style: {
|
|
63
|
+
height: '100vh',
|
|
64
|
+
width: '100%',
|
|
65
|
+
background: '#bceed4',
|
|
66
|
+
} },
|
|
67
|
+
"This element will cover the entire document,",
|
|
64
68
|
react_1.default.createElement("br", null),
|
|
65
|
-
"
|
|
69
|
+
"pushing the highlighter to the edge of the window.",
|
|
70
|
+
react_1.default.createElement("br", null),
|
|
71
|
+
"The highlighter should remain inside and expand no further than the document."),
|
|
66
72
|
react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: targetRef, components: [mock_component_1.MockTarget], watchMotion: true })));
|
|
67
73
|
};
|
|
68
|
-
exports.
|
|
74
|
+
exports.FullscreenElement = FullscreenElement;
|
|
75
|
+
const edgeStyles = { position: 'absolute', background: 'cyan', padding: 30 };
|
|
76
|
+
const centerStyles = {
|
|
77
|
+
top: { top: -30, left: '50%', transform: 'translate(-50%,0)' },
|
|
78
|
+
right: { right: -30, top: '50%', transform: 'translate(0, -50%)' },
|
|
79
|
+
bottom: { bottom: -30, left: '50%', transform: 'translate(-50%,0)' },
|
|
80
|
+
left: { left: -30, top: '50%', transform: 'translate(0, -50%)' },
|
|
81
|
+
};
|
|
82
|
+
function OffscreenElements() {
|
|
83
|
+
const target01 = (0, react_1.createRef)();
|
|
84
|
+
const target02 = (0, react_1.createRef)();
|
|
85
|
+
const target03 = (0, react_1.createRef)();
|
|
86
|
+
const target04 = (0, react_1.createRef)();
|
|
87
|
+
return (react_1.default.createElement("div", { style: { fontFamily: 'sans-serif', height: '100%' } },
|
|
88
|
+
react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' } },
|
|
89
|
+
react_1.default.createElement("div", { ref: target01, style: Object.assign(Object.assign({}, edgeStyles), centerStyles.top) }, "top"),
|
|
90
|
+
react_1.default.createElement("div", { ref: target02, style: Object.assign(Object.assign({}, edgeStyles), centerStyles.right) }, "right"),
|
|
91
|
+
react_1.default.createElement("div", { ref: target03, style: Object.assign(Object.assign({}, edgeStyles), centerStyles.bottom) }, "bottom"),
|
|
92
|
+
react_1.default.createElement("div", { ref: target04, style: Object.assign(Object.assign({}, edgeStyles), centerStyles.left) }, "left"),
|
|
93
|
+
react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: target01, components: [mock_component_1.MockTarget], watchMotion: true }),
|
|
94
|
+
react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: target02, components: [mock_component_1.MockTarget], watchMotion: true }),
|
|
95
|
+
react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: target03, components: [mock_component_1.MockTarget], watchMotion: true }),
|
|
96
|
+
react_1.default.createElement(element_highlighter_1.ElementHighlighter, { targetRef: target04, components: [mock_component_1.MockTarget], watchMotion: true }))));
|
|
97
|
+
}
|
|
98
|
+
exports.OffscreenElements = OffscreenElements;
|
|
69
99
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6E;AAC7E,+DAA2D;AAC3D,sDAA+C;AASxC,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAA2B,EAAE,EAAE;IAC5G,MAAM,SAAS,GAAG,IAAA,iBAAS,GAAkB,CAAC;IAE9C,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE;QACxG,uCAAK,GAAG,EAAE,SAAS,EAAE,KAAK,kBAAI,KAAK,EAAE,GAAG,IAAK,WAAW,wBAElD;QAEN,8BAAC,wCAAkB,IACjB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,CAAC,2BAAU,CAAC,EACxB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAC,QAAQ,GAClB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,kBAAkB,sBAkB7B;AAEK,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,8BAAC,0BAAkB,IACjB,KAAK,EACH;YACE,yBAAyB,EAAE,SAAS;YACpC,+BAA+B,EAAE,SAAS;YAC1C,gCAAgC,EAAE,SAAS;SAC3B,GAEpB,CACH,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,UAAU,cAYrB;AAEK,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,CACL;QACE,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI;QAC/C,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI;QAC/C,8BAAC,0BAAkB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI,CAC3C,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,KAAK,SAQhB;AAEF,MAAM,GAAG,GAAG,EAAE,CAAC;AACf,MAAM,aAAa,GAAG,IAAI,GAAG,GAAG,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAExC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,aAAa,CAAC,CAAC;QACrF,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,8BAAC,0BAAkB,IAAC,WAAW,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,WAAW,SAAG,CAAC;AACjF,CAAC,CAAC;AATW,QAAA,aAAa,iBASxB;AAEK,MAAM,
|
|
1
|
+
{"version":3,"file":"element-highlighter.compositions.js","sourceRoot":"","sources":["../../element-highlighter/element-highlighter.compositions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ const ignore_highlighter_1 = require("../ignore-highlighter");
|
|
|
23
23
|
const element_highlighter_module_scss_1 = __importDefault(require("./element-highlighter.module.scss"));
|
|
24
24
|
function ElementHighlighter(_a) {
|
|
25
25
|
var { targetRef, components, placement = 'top', watchMotion, className, classes } = _a, props = __rest(_a, ["targetRef", "components", "placement", "watchMotion", "className", "classes"]);
|
|
26
|
-
return (react_1.default.createElement("div", Object.assign({}, props, ignore_highlighter_1.
|
|
26
|
+
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) }),
|
|
27
27
|
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 }),
|
|
28
28
|
components && (react_1.default.createElement(label_1.LabelContainer, { targetRef: targetRef, className: element_highlighter_module_scss_1.default.label, placement: placement, watchMotion: watchMotion },
|
|
29
29
|
react_1.default.createElement(label_1.Label, { components: components, className: classes === null || classes === void 0 ? void 0 : classes.label })))));
|
|
@@ -1 +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,
|
|
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,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
CHANGED
|
@@ -18,6 +18,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
18
18
|
__setModuleDefault(result, mod);
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
22
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
23
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
24
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
25
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
26
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
27
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
28
|
+
});
|
|
29
|
+
};
|
|
21
30
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
22
31
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
32
|
};
|
|
@@ -31,13 +40,15 @@ const frame_module_scss_1 = __importDefault(require("./frame.module.scss"));
|
|
|
31
40
|
const MARGIN_FROM_TARGET = +frame_module_scss_1.default.offset || 6; // setting fallback 6, for tests
|
|
32
41
|
/** min. distance from the edge of the screen. */
|
|
33
42
|
const MARGIN_FROM_DOC_EDGE = 0;
|
|
43
|
+
const overflowParameters = { rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE };
|
|
34
44
|
// position - bottom start (bottom left corner)
|
|
35
45
|
// x - width - horizontal (cross axis)
|
|
36
46
|
// y - height - vertical (main axis)
|
|
37
47
|
function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_scss_1.default.overlayBorder, style }) {
|
|
48
|
+
var _a;
|
|
38
49
|
const dimensionRef = (0, react_1.useRef)({ width: 0, height: 0 });
|
|
39
50
|
const shiftRef = (0, react_1.useRef)();
|
|
40
|
-
const { x, y, strategy, reference, floating, update, refs } = (0, react_dom_1.useFloating)({
|
|
51
|
+
const { x, y, strategy, reference, floating, update, refs, middlewareData } = (0, react_dom_1.useFloating)({
|
|
41
52
|
placement: 'bottom-start',
|
|
42
53
|
middleware: [
|
|
43
54
|
// replace dimensions from previous iterations with the target's size
|
|
@@ -53,15 +64,22 @@ function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_s
|
|
|
53
64
|
(0, react_dom_1.offset)((options) => -options.reference.height),
|
|
54
65
|
// offset the frame by its extra padding
|
|
55
66
|
(0, react_dom_1.offset)(() => ({ mainAxis: -MARGIN_FROM_TARGET, crossAxis: -MARGIN_FROM_TARGET })),
|
|
56
|
-
//
|
|
57
|
-
(0, react_dom_1.shift)({ rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE, mainAxis: true, crossAxis: true }),
|
|
58
|
-
// read "shift" for the size-apply() method (because it doesn't forward middlewareData)
|
|
67
|
+
// pushes the frame into the document. Similar to shift(), but only pushes when coods are negative
|
|
59
68
|
{
|
|
60
|
-
name: '
|
|
61
|
-
fn(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
name: 'shiftPositive',
|
|
70
|
+
fn: (args) => __awaiter(this, void 0, void 0, function* () {
|
|
71
|
+
const overflow = yield (0, react_dom_1.detectOverflow)(args, overflowParameters);
|
|
72
|
+
const nextCoords = {
|
|
73
|
+
x: overflow.left > 0 ? args.x + overflow.left : args.x,
|
|
74
|
+
y: overflow.top > 0 ? args.y + overflow.top : args.y,
|
|
75
|
+
};
|
|
76
|
+
const shiftAmount = {
|
|
77
|
+
x: nextCoords.x - args.x,
|
|
78
|
+
y: nextCoords.y - args.y,
|
|
79
|
+
};
|
|
80
|
+
shiftRef.current = shiftAmount;
|
|
81
|
+
return Object.assign(Object.assign({}, nextCoords), { data: shiftAmount });
|
|
82
|
+
}),
|
|
65
83
|
},
|
|
66
84
|
// size also applies overflow detection via width and height
|
|
67
85
|
(0, react_dom_1.size)({
|
|
@@ -79,6 +97,7 @@ function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_s
|
|
|
79
97
|
Object.assign((_c = refs.floating.current) === null || _c === void 0 ? void 0 : _c.style, dimensionRef.current);
|
|
80
98
|
},
|
|
81
99
|
}),
|
|
100
|
+
(0, react_dom_1.hide)({ strategy: 'referenceHidden' }),
|
|
82
101
|
],
|
|
83
102
|
});
|
|
84
103
|
// set target as floating reference
|
|
@@ -92,8 +111,11 @@ function Frame({ targetRef, watchMotion, className, stylesClass = frame_module_s
|
|
|
92
111
|
return () => { };
|
|
93
112
|
return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update, { animationFrame: watchMotion });
|
|
94
113
|
}, [refs.reference.current, refs.floating.current, update, watchMotion]);
|
|
95
|
-
|
|
96
|
-
|
|
114
|
+
// could check if x !== null
|
|
115
|
+
const isReady = !((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden);
|
|
116
|
+
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,
|
|
117
|
+
// starting at pos [0,0] will ensure the label doesn't increase the document size.
|
|
118
|
+
top: y !== null && y !== void 0 ? y : 0, left: x !== null && x !== void 0 ? x : 0 }) }));
|
|
97
119
|
}
|
|
98
120
|
exports.Frame = Frame;
|
|
99
121
|
//# sourceMappingURL=frame.js.map
|
package/dist/frame/frame.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frame.js","sourceRoot":"","sources":["../../frame/frame.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"frame.js","sourceRoot":"","sources":["../../frame/frame.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,10 +19,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
exports.ShowWhenHovering = void 0;
|
|
22
|
+
exports.HoverExclusionZones = exports.UnmountingElement = exports.ShowWhenHovering = void 0;
|
|
23
23
|
const react_1 = __importStar(require("react"));
|
|
24
|
-
const design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
|
|
25
24
|
const hover_highlighter_1 = require("./hover-highlighter");
|
|
25
|
+
const mock_component_1 = require("../mock-component");
|
|
26
|
+
const ignore_highlighter_1 = require("../ignore-highlighter");
|
|
26
27
|
const ShowWhenHovering = () => {
|
|
27
28
|
const [disabled, setDisabled] = (0, react_1.useState)(false);
|
|
28
29
|
return (react_1.default.createElement("div", { style: { padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' } },
|
|
@@ -30,11 +31,39 @@ const ShowWhenHovering = () => {
|
|
|
30
31
|
react_1.default.createElement("div", null,
|
|
31
32
|
react_1.default.createElement("br", null),
|
|
32
33
|
react_1.default.createElement("div", null,
|
|
33
|
-
react_1.default.createElement(
|
|
34
|
+
react_1.default.createElement(mock_component_1.MockButton, { onClick: () => setDisabled((x) => !x) }, "Hover here")),
|
|
34
35
|
react_1.default.createElement("div", null,
|
|
35
36
|
disabled ? 'X' : '✓',
|
|
36
37
|
" highlighter is ",
|
|
37
38
|
disabled ? 'disabled' : 'enabled')))));
|
|
38
39
|
};
|
|
39
40
|
exports.ShowWhenHovering = ShowWhenHovering;
|
|
41
|
+
const UnmountingElement = () => {
|
|
42
|
+
const [shown, setShown] = (0, react_1.useState)(true);
|
|
43
|
+
(0, react_1.useEffect)(() => {
|
|
44
|
+
const tid = setInterval(() => setShown((x) => !x), 1500);
|
|
45
|
+
return () => clearInterval(tid);
|
|
46
|
+
}, []);
|
|
47
|
+
return (react_1.default.createElement("div", { style: { padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' } },
|
|
48
|
+
react_1.default.createElement(hover_highlighter_1.HoverHighlighter, null,
|
|
49
|
+
react_1.default.createElement("div", null, !shown && '(hidden)'),
|
|
50
|
+
react_1.default.createElement("div", null, shown && react_1.default.createElement(mock_component_1.MockButton, null, "Hover here")),
|
|
51
|
+
react_1.default.createElement("br", null),
|
|
52
|
+
react_1.default.createElement(mock_component_1.MockTarget, null,
|
|
53
|
+
react_1.default.createElement("div", null, shown && react_1.default.createElement(mock_component_1.MockButton, null, "Hover here")),
|
|
54
|
+
react_1.default.createElement("div", null, "same with a container")))));
|
|
55
|
+
};
|
|
56
|
+
exports.UnmountingElement = UnmountingElement;
|
|
57
|
+
const HoverExclusionZones = () => {
|
|
58
|
+
return (react_1.default.createElement("div", { style: { padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' } },
|
|
59
|
+
react_1.default.createElement(hover_highlighter_1.HoverHighlighter, null,
|
|
60
|
+
react_1.default.createElement(mock_component_1.MockTarget, null,
|
|
61
|
+
"container (target-able)",
|
|
62
|
+
react_1.default.createElement("div", null, react_1.default.createElement(mock_component_1.MockButton, null, "will be highlighted"))),
|
|
63
|
+
react_1.default.createElement("br", null),
|
|
64
|
+
react_1.default.createElement(mock_component_1.MockTarget, null,
|
|
65
|
+
"container (target-able)",
|
|
66
|
+
react_1.default.createElement("div", Object.assign({}, ignore_highlighter_1.excludeHighlighterAtt), react_1.default.createElement(mock_component_1.MockButton, null, "will be ignored"))))));
|
|
67
|
+
};
|
|
68
|
+
exports.HoverExclusionZones = HoverExclusionZones;
|
|
40
69
|
//# sourceMappingURL=hover-highlighter.compositions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hover-highlighter.compositions.js","sourceRoot":"","sources":["../../hover-highlighter/hover-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"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"}
|
|
@@ -21,8 +21,13 @@ function useHoverHandler({ onChange, scopeClass = '', debounceDuration, disabled
|
|
|
21
21
|
onChange(undefined);
|
|
22
22
|
return;
|
|
23
23
|
}
|
|
24
|
-
//
|
|
25
|
-
if (element.closest(`.${scopeClass} ${ignore_highlighter_1.excludeHighlighterSelector}`))
|
|
24
|
+
// clear when ancestor has 'data-ignore-component-highlight'
|
|
25
|
+
if (element.closest(`.${scopeClass} ${ignore_highlighter_1.excludeHighlighterSelector}`)) {
|
|
26
|
+
onChange(undefined);
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
// skip DOM trees having 'data-skip-component-highlight'
|
|
30
|
+
if (element.closest(`.${scopeClass} ${ignore_highlighter_1.skipHighlighterSelector}`))
|
|
26
31
|
return;
|
|
27
32
|
const result = (0, bubble_to_component_1.bubbleToComponent)(element, { elementRule: rule, componentRule });
|
|
28
33
|
if (!result)
|
|
@@ -1 +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,
|
|
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,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"}
|
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
/** name of ignore attribute */
|
|
2
3
|
export declare const excludeHighlighterAttrName = "data-ignore-component-highlight";
|
|
3
|
-
/**
|
|
4
|
+
/** selector for elements with the ignore attribute */
|
|
4
5
|
export declare const excludeHighlighterSelector: string;
|
|
5
|
-
/**
|
|
6
|
+
/** highlighter will exclude elements with this attribute */
|
|
6
7
|
export declare const excludeHighlighterAtt: {
|
|
7
8
|
"data-ignore-component-highlight": boolean;
|
|
8
9
|
};
|
|
9
|
-
/**
|
|
10
|
+
/** children of this element will be excluded by the automatic highlighter */
|
|
10
11
|
export declare function ExcludeHighlighter(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
|
|
12
|
+
/** name of skip attribute */
|
|
13
|
+
export declare const skipHighlighterAttrName = "data-skip-component-highlight";
|
|
14
|
+
/** highlighter will skip (ignore) elements with these attributes */
|
|
15
|
+
export declare const skipHighlighterAttr: {
|
|
16
|
+
"data-skip-component-highlight": boolean;
|
|
17
|
+
};
|
|
18
|
+
/** selector for elements with the skip attribute */
|
|
19
|
+
export declare const skipHighlighterSelector: string;
|
|
@@ -3,16 +3,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ExcludeHighlighter = exports.excludeHighlighterAtt = exports.excludeHighlighterSelector = exports.excludeHighlighterAttrName = void 0;
|
|
6
|
+
exports.skipHighlighterSelector = exports.skipHighlighterAttr = exports.skipHighlighterAttrName = exports.ExcludeHighlighter = exports.excludeHighlighterAtt = exports.excludeHighlighterSelector = exports.excludeHighlighterAttrName = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
+
/** name of ignore attribute */
|
|
8
9
|
exports.excludeHighlighterAttrName = 'data-ignore-component-highlight';
|
|
9
|
-
/**
|
|
10
|
+
/** selector for elements with the ignore attribute */
|
|
10
11
|
exports.excludeHighlighterSelector = `[${exports.excludeHighlighterAttrName}]`;
|
|
11
|
-
/**
|
|
12
|
+
/** highlighter will exclude elements with this attribute */
|
|
12
13
|
exports.excludeHighlighterAtt = { [exports.excludeHighlighterAttrName]: true };
|
|
13
|
-
/**
|
|
14
|
+
/** children of this element will be excluded by the automatic highlighter */
|
|
14
15
|
function ExcludeHighlighter(props) {
|
|
15
16
|
return react_1.default.createElement("div", Object.assign({}, props, exports.excludeHighlighterAtt));
|
|
16
17
|
}
|
|
17
18
|
exports.ExcludeHighlighter = ExcludeHighlighter;
|
|
19
|
+
/** name of skip attribute */
|
|
20
|
+
exports.skipHighlighterAttrName = 'data-skip-component-highlight';
|
|
21
|
+
/** highlighter will skip (ignore) elements with these attributes */
|
|
22
|
+
exports.skipHighlighterAttr = { [exports.skipHighlighterAttrName]: true };
|
|
23
|
+
/** selector for elements with the skip attribute */
|
|
24
|
+
exports.skipHighlighterSelector = `[${exports.skipHighlighterAttrName}]`;
|
|
18
25
|
//# sourceMappingURL=ignore-highlighter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ignore-highlighter.js","sourceRoot":"","sources":["../ignore-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;
|
|
1
|
+
{"version":3,"file":"ignore-highlighter.js","sourceRoot":"","sources":["../ignore-highlighter.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,+BAA+B;AAClB,QAAA,0BAA0B,GAAG,iCAAiC,CAAC;AAE5E,sDAAsD;AACzC,QAAA,0BAA0B,GAAG,IAAI,kCAA0B,GAAG,CAAC;AAE5E,4DAA4D;AAC/C,QAAA,qBAAqB,GAAG,EAAE,CAAC,kCAA0B,CAAC,EAAE,IAAI,EAAE,CAAC;AAE5E,6EAA6E;AAC7E,SAAgB,kBAAkB,CAAC,KAA2C;IAC5E,OAAO,uDAAS,KAAK,EAAM,6BAAqB,EAAI,CAAC;AACvD,CAAC;AAFD,gDAEC;AAED,6BAA6B;AAChB,QAAA,uBAAuB,GAAG,+BAA+B,CAAC;AACvE,oEAAoE;AACvD,QAAA,mBAAmB,GAAG,EAAE,CAAC,+BAAuB,CAAC,EAAE,IAAI,EAAE,CAAC;AACvE,oDAAoD;AACvC,QAAA,uBAAuB,GAAG,IAAI,+BAAuB,GAAG,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -6,5 +6,5 @@ export { ChildrenHighlighter } from './children-highlighter';
|
|
|
6
6
|
export type { ChildrenHighlighterProps } from './children-highlighter';
|
|
7
7
|
export { ElementHighlighter } from './element-highlighter';
|
|
8
8
|
export type { ElementHighlighterProps, Placement, HighlightClasses } from './element-highlighter';
|
|
9
|
-
export { ExcludeHighlighter, excludeHighlighterAtt,
|
|
9
|
+
export { ExcludeHighlighter, excludeHighlighterAtt, excludeHighlighterAttrName, skipHighlighterAttr, skipHighlighterAttrName, } from './ignore-highlighter';
|
|
10
10
|
export type { MatchRule } from './rule-matcher';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.skipHighlighterAttrName = exports.skipHighlighterAttr = exports.excludeHighlighterAttrName = exports.excludeHighlighterAtt = exports.ExcludeHighlighter = exports.ElementHighlighter = exports.ChildrenHighlighter = exports.HoverHighlighter = exports.ComponentHighlighter = void 0;
|
|
4
4
|
var hybrid_highlighter_1 = require("./hybrid-highlighter");
|
|
5
5
|
Object.defineProperty(exports, "ComponentHighlighter", { enumerable: true, get: function () { return hybrid_highlighter_1.HybridHighlighter; } });
|
|
6
6
|
var hover_highlighter_1 = require("./hover-highlighter");
|
|
@@ -12,6 +12,7 @@ Object.defineProperty(exports, "ElementHighlighter", { enumerable: true, get: fu
|
|
|
12
12
|
var ignore_highlighter_1 = require("./ignore-highlighter");
|
|
13
13
|
Object.defineProperty(exports, "ExcludeHighlighter", { enumerable: true, get: function () { return ignore_highlighter_1.ExcludeHighlighter; } });
|
|
14
14
|
Object.defineProperty(exports, "excludeHighlighterAtt", { enumerable: true, get: function () { return ignore_highlighter_1.excludeHighlighterAtt; } });
|
|
15
|
-
Object.defineProperty(exports, "excludeHighlighterSelector", { enumerable: true, get: function () { return ignore_highlighter_1.excludeHighlighterSelector; } });
|
|
16
15
|
Object.defineProperty(exports, "excludeHighlighterAttrName", { enumerable: true, get: function () { return ignore_highlighter_1.excludeHighlighterAttrName; } });
|
|
16
|
+
Object.defineProperty(exports, "skipHighlighterAttr", { enumerable: true, get: function () { return ignore_highlighter_1.skipHighlighterAttr; } });
|
|
17
|
+
Object.defineProperty(exports, "skipHighlighterAttrName", { enumerable: true, get: function () { return ignore_highlighter_1.skipHighlighterAttrName; } });
|
|
17
18
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,2DAAiF;AAAxE,0HAAA,iBAAiB,OAAwB;AAGlD,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AAGzB,+DAA6D;AAApD,2HAAA,mBAAmB,OAAA;AAG5B,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAG3B,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,2DAAiF;AAAxE,0HAAA,iBAAiB,OAAwB;AAGlD,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA;AAGzB,+DAA6D;AAApD,2HAAA,mBAAmB,OAAA;AAG5B,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAG3B,2DAM8B;AAL5B,wHAAA,kBAAkB,OAAA;AAClB,2HAAA,qBAAqB,OAAA;AACrB,gIAAA,0BAA0B,OAAA;AAC1B,yHAAA,mBAAmB,OAAA;AACnB,6HAAA,uBAAuB,OAAA"}
|
|
@@ -40,13 +40,16 @@ const lodash_compact_1 = __importDefault(require("lodash.compact"));
|
|
|
40
40
|
const react_dom_1 = require("@floating-ui/react-dom");
|
|
41
41
|
const label_module_scss_1 = __importDefault(require("./label.module.scss"));
|
|
42
42
|
function LabelContainer(_a) {
|
|
43
|
+
var _b;
|
|
43
44
|
var { targetRef, offset, placement, flip = true, watchMotion, className, style } = _a, rest = __rest(_a, ["targetRef", "offset", "placement", "flip", "watchMotion", "className", "style"]);
|
|
44
|
-
const { x, y, strategy, floating, reference, refs, update } = (0, react_dom_1.useFloating)({
|
|
45
|
+
const { x, y, strategy, floating, reference, refs, update, middlewareData } = (0, react_dom_1.useFloating)({
|
|
45
46
|
placement,
|
|
46
47
|
middleware: (0, lodash_compact_1.default)([
|
|
47
48
|
offset && (0, react_dom_1.offset)({ mainAxis: offset[0], crossAxis: offset[1] }),
|
|
48
49
|
flip && (0, react_dom_1.flip)(),
|
|
49
|
-
|
|
50
|
+
// enabling 'shift' for 'crossAxis' will make floating-ui push the label _inside_, when it has nowhere to go
|
|
51
|
+
(0, react_dom_1.shift)({ rootBoundary: 'document', mainAxis: true, crossAxis: true }),
|
|
52
|
+
(0, react_dom_1.hide)({ strategy: 'referenceHidden' }),
|
|
50
53
|
]),
|
|
51
54
|
});
|
|
52
55
|
(0, react_1.useLayoutEffect)(() => {
|
|
@@ -59,8 +62,10 @@ function LabelContainer(_a) {
|
|
|
59
62
|
return () => { };
|
|
60
63
|
return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update, { animationFrame: !!watchMotion });
|
|
61
64
|
}, [refs.reference.current, refs.floating.current, update, watchMotion]);
|
|
62
|
-
const isReady =
|
|
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),
|
|
65
|
+
const isReady = !((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden);
|
|
66
|
+
return (react_1.default.createElement("div", Object.assign({}, rest, { ref: floating, className: (0, classnames_1.default)(className, !isReady && label_module_scss_1.default.hidden),
|
|
67
|
+
// starting at pos [0,0] will ensure the label doesn't increase the document size.
|
|
68
|
+
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
69
|
}
|
|
65
70
|
exports.LabelContainer = LabelContainer;
|
|
66
71
|
//# 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,
|
|
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"}
|
package/dist/mock-component.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function MockTarget({ children, ...rest }:
|
|
1
|
+
import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
|
|
2
|
+
export declare function MockTarget({ children, ...rest }: HTMLAttributes<HTMLDivElement>): JSX.Element;
|
|
3
|
+
export declare function MockButton({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
|
package/dist/mock-component.js
CHANGED
|
@@ -14,17 +14,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.MockTarget = void 0;
|
|
17
|
+
exports.MockButton = exports.MockTarget = void 0;
|
|
18
18
|
const react_1 = __importDefault(require("react"));
|
|
19
19
|
const react_ui_highlighter_component_metadata_bit_component_meta_1 = require("@teambit/react.ui.highlighter.component-metadata.bit-component-meta");
|
|
20
20
|
function MockTarget(_a) {
|
|
21
21
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
22
|
-
return react_1.default.createElement("div", Object.assign({}, rest),
|
|
23
|
-
"mocked ",
|
|
24
|
-
children);
|
|
22
|
+
return react_1.default.createElement("div", Object.assign({}, rest), children);
|
|
25
23
|
}
|
|
26
24
|
exports.MockTarget = MockTarget;
|
|
27
25
|
MockTarget[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] = {
|
|
26
|
+
id: 'teambit.design/ui/mock-target@1.6.2',
|
|
27
|
+
};
|
|
28
|
+
function MockButton(_a) {
|
|
29
|
+
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
30
|
+
return react_1.default.createElement("button", Object.assign({}, rest), children);
|
|
31
|
+
}
|
|
32
|
+
exports.MockButton = MockButton;
|
|
33
|
+
MockButton[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField] = {
|
|
28
34
|
id: 'teambit.design/ui/icon-button@1.6.2',
|
|
29
35
|
};
|
|
30
36
|
//# sourceMappingURL=mock-component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mock-component.js","sourceRoot":"","sources":["../mock-component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,
|
|
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"}
|
|
@@ -67,16 +67,64 @@ export const MovingElement = () => {
|
|
|
67
67
|
return <HighlightedElement targetStyle={{ marginLeft: margin }} watchMotion />;
|
|
68
68
|
};
|
|
69
69
|
|
|
70
|
-
export const
|
|
70
|
+
export const FullscreenElement = () => {
|
|
71
71
|
const targetRef = createRef<HTMLDivElement>();
|
|
72
72
|
|
|
73
73
|
return (
|
|
74
74
|
<div style={{ fontFamily: 'sans-serif' }}>
|
|
75
|
-
<div
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
<div
|
|
76
|
+
ref={targetRef}
|
|
77
|
+
style={{
|
|
78
|
+
height: '100vh',
|
|
79
|
+
width: '100%',
|
|
80
|
+
background: '#bceed4',
|
|
81
|
+
}}
|
|
82
|
+
>
|
|
83
|
+
This element will cover the entire document,
|
|
84
|
+
<br />
|
|
85
|
+
pushing the highlighter to the edge of the window.
|
|
86
|
+
<br />
|
|
87
|
+
The highlighter should remain inside and expand no further than the document.
|
|
78
88
|
</div>
|
|
79
89
|
<ElementHighlighter targetRef={targetRef} components={[MockTarget]} watchMotion />
|
|
80
90
|
</div>
|
|
81
91
|
);
|
|
82
92
|
};
|
|
93
|
+
|
|
94
|
+
const edgeStyles = { position: 'absolute', background: 'cyan', padding: 30 } as const;
|
|
95
|
+
const centerStyles = {
|
|
96
|
+
top: { top: -30, left: '50%', transform: 'translate(-50%,0)' },
|
|
97
|
+
right: { right: -30, top: '50%', transform: 'translate(0, -50%)' },
|
|
98
|
+
bottom: { bottom: -30, left: '50%', transform: 'translate(-50%,0)' },
|
|
99
|
+
left: { left: -30, top: '50%', transform: 'translate(0, -50%)' },
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
export function OffscreenElements() {
|
|
103
|
+
const target01 = createRef<HTMLDivElement>();
|
|
104
|
+
const target02 = createRef<HTMLDivElement>();
|
|
105
|
+
const target03 = createRef<HTMLDivElement>();
|
|
106
|
+
const target04 = createRef<HTMLDivElement>();
|
|
107
|
+
|
|
108
|
+
return (
|
|
109
|
+
<div style={{ fontFamily: 'sans-serif', height: '100%' }}>
|
|
110
|
+
<div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
|
|
111
|
+
<div ref={target01} style={{ ...edgeStyles, ...centerStyles.top }}>
|
|
112
|
+
top
|
|
113
|
+
</div>
|
|
114
|
+
<div ref={target02} style={{ ...edgeStyles, ...centerStyles.right }}>
|
|
115
|
+
right
|
|
116
|
+
</div>
|
|
117
|
+
<div ref={target03} style={{ ...edgeStyles, ...centerStyles.bottom }}>
|
|
118
|
+
bottom
|
|
119
|
+
</div>
|
|
120
|
+
<div ref={target04} style={{ ...edgeStyles, ...centerStyles.left }}>
|
|
121
|
+
left
|
|
122
|
+
</div>
|
|
123
|
+
<ElementHighlighter targetRef={target01} components={[MockTarget]} watchMotion />
|
|
124
|
+
<ElementHighlighter targetRef={target02} components={[MockTarget]} watchMotion />
|
|
125
|
+
<ElementHighlighter targetRef={target03} components={[MockTarget]} watchMotion />
|
|
126
|
+
<ElementHighlighter targetRef={target04} components={[MockTarget]} watchMotion />
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
);
|
|
130
|
+
}
|
|
@@ -3,7 +3,7 @@ import classnames from 'classnames';
|
|
|
3
3
|
import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
4
4
|
import { Frame } from '../frame';
|
|
5
5
|
import { Label, LabelContainer, Placement } from '../label';
|
|
6
|
-
import {
|
|
6
|
+
import { skipHighlighterAttr } from '../ignore-highlighter';
|
|
7
7
|
import styles from './element-highlighter.module.scss';
|
|
8
8
|
|
|
9
9
|
export interface ElementHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
@@ -38,7 +38,7 @@ export function ElementHighlighter({
|
|
|
38
38
|
...props
|
|
39
39
|
}: ElementHighlighterProps) {
|
|
40
40
|
return (
|
|
41
|
-
<div {...props} {...
|
|
41
|
+
<div {...props} {...skipHighlighterAttr} className={classnames(classes?.container, styles.container, className)}>
|
|
42
42
|
<Frame targetRef={targetRef} className={classnames(styles.frame, classes?.frame)} watchMotion={watchMotion} />
|
|
43
43
|
|
|
44
44
|
{components && (
|
package/frame/frame.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useLayoutEffect, useRef, RefObject } from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
|
-
import { useFloating, autoUpdate, offset, size,
|
|
3
|
+
import { useFloating, autoUpdate, offset, size, detectOverflow, hide } from '@floating-ui/react-dom';
|
|
4
4
|
import type { Coords } from '@floating-ui/react-dom';
|
|
5
5
|
|
|
6
6
|
import styles from './frame.module.scss';
|
|
@@ -10,6 +10,8 @@ const MARGIN_FROM_TARGET = +styles.offset || 6; // setting fallback 6, for tests
|
|
|
10
10
|
/** min. distance from the edge of the screen. */
|
|
11
11
|
const MARGIN_FROM_DOC_EDGE = 0;
|
|
12
12
|
|
|
13
|
+
const overflowParameters = { rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE } as const;
|
|
14
|
+
|
|
13
15
|
export interface FrameProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
14
16
|
/** apply the frame to this element */
|
|
15
17
|
targetRef: RefObject<HTMLElement | null>;
|
|
@@ -30,7 +32,7 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
|
|
|
30
32
|
const dimensionRef = useRef({ width: 0, height: 0 });
|
|
31
33
|
const shiftRef = useRef<Coords | undefined>();
|
|
32
34
|
|
|
33
|
-
const { x, y, strategy, reference, floating, update, refs } = useFloating({
|
|
35
|
+
const { x, y, strategy, reference, floating, update, refs, middlewareData } = useFloating({
|
|
34
36
|
placement: 'bottom-start',
|
|
35
37
|
middleware: [
|
|
36
38
|
// replace dimensions from previous iterations with the target's size
|
|
@@ -51,14 +53,26 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
|
|
|
51
53
|
offset((options) => -options.reference.height),
|
|
52
54
|
// offset the frame by its extra padding
|
|
53
55
|
offset(() => ({ mainAxis: -MARGIN_FROM_TARGET, crossAxis: -MARGIN_FROM_TARGET })),
|
|
54
|
-
//
|
|
55
|
-
shift({ rootBoundary: 'document', padding: MARGIN_FROM_DOC_EDGE, mainAxis: true, crossAxis: true }),
|
|
56
|
-
// read "shift" for the size-apply() method (because it doesn't forward middlewareData)
|
|
56
|
+
// pushes the frame into the document. Similar to shift(), but only pushes when coods are negative
|
|
57
57
|
{
|
|
58
|
-
name: '
|
|
59
|
-
fn
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
name: 'shiftPositive',
|
|
59
|
+
fn: async (args) => {
|
|
60
|
+
const overflow = await detectOverflow(args, overflowParameters);
|
|
61
|
+
|
|
62
|
+
const nextCoords = {
|
|
63
|
+
x: overflow.left > 0 ? args.x + overflow.left : args.x,
|
|
64
|
+
y: overflow.top > 0 ? args.y + overflow.top : args.y,
|
|
65
|
+
};
|
|
66
|
+
const shiftAmount = {
|
|
67
|
+
x: nextCoords.x - args.x,
|
|
68
|
+
y: nextCoords.y - args.y,
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
shiftRef.current = shiftAmount;
|
|
72
|
+
return {
|
|
73
|
+
...nextCoords,
|
|
74
|
+
data: shiftAmount,
|
|
75
|
+
};
|
|
62
76
|
},
|
|
63
77
|
},
|
|
64
78
|
// size also applies overflow detection via width and height
|
|
@@ -74,9 +88,11 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
|
|
|
74
88
|
width: Math.min(referenceRect.width + paddingX, width),
|
|
75
89
|
height: Math.min(referenceRect.height + paddingY, height),
|
|
76
90
|
};
|
|
91
|
+
|
|
77
92
|
Object.assign(refs.floating.current?.style, dimensionRef.current);
|
|
78
93
|
},
|
|
79
94
|
}),
|
|
95
|
+
hide({ strategy: 'referenceHidden' }),
|
|
80
96
|
],
|
|
81
97
|
});
|
|
82
98
|
|
|
@@ -93,7 +109,8 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
|
|
|
93
109
|
return autoUpdate(refs.reference.current, refs.floating.current, update, { animationFrame: watchMotion });
|
|
94
110
|
}, [refs.reference.current, refs.floating.current, update, watchMotion]);
|
|
95
111
|
|
|
96
|
-
|
|
112
|
+
// could check if x !== null
|
|
113
|
+
const isReady = !middlewareData.hide?.referenceHidden;
|
|
97
114
|
|
|
98
115
|
return (
|
|
99
116
|
<div
|
|
@@ -103,8 +120,9 @@ export function Frame({ targetRef, watchMotion, className, stylesClass = styles.
|
|
|
103
120
|
...style,
|
|
104
121
|
...dimensionRef.current,
|
|
105
122
|
position: strategy,
|
|
106
|
-
|
|
107
|
-
|
|
123
|
+
// starting at pos [0,0] will ensure the label doesn't increase the document size.
|
|
124
|
+
top: y ?? 0,
|
|
125
|
+
left: x ?? 0,
|
|
108
126
|
}}
|
|
109
127
|
/>
|
|
110
128
|
);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { IconButton } from '@teambit/design.ui.icon-button';
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
3
2
|
import { HoverHighlighter } from './hover-highlighter';
|
|
3
|
+
import { MockButton, MockTarget } from '../mock-component';
|
|
4
|
+
import { excludeHighlighterAtt } from '../ignore-highlighter';
|
|
4
5
|
|
|
5
6
|
export const ShowWhenHovering = () => {
|
|
6
7
|
const [disabled, setDisabled] = useState<boolean>(false);
|
|
@@ -11,7 +12,7 @@ export const ShowWhenHovering = () => {
|
|
|
11
12
|
<div>
|
|
12
13
|
<br />
|
|
13
14
|
<div>
|
|
14
|
-
<
|
|
15
|
+
<MockButton onClick={() => setDisabled((x) => !x)}>Hover here</MockButton>
|
|
15
16
|
</div>
|
|
16
17
|
<div>
|
|
17
18
|
{disabled ? 'X' : '✓'} highlighter is {disabled ? 'disabled' : 'enabled'}
|
|
@@ -21,3 +22,44 @@ export const ShowWhenHovering = () => {
|
|
|
21
22
|
</div>
|
|
22
23
|
);
|
|
23
24
|
};
|
|
25
|
+
|
|
26
|
+
export const UnmountingElement = () => {
|
|
27
|
+
const [shown, setShown] = useState(true);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
const tid = setInterval(() => setShown((x) => !x), 1500);
|
|
30
|
+
return () => clearInterval(tid);
|
|
31
|
+
}, []);
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div style={{ padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' }}>
|
|
35
|
+
<HoverHighlighter>
|
|
36
|
+
<div>{!shown && '(hidden)'}</div>
|
|
37
|
+
|
|
38
|
+
<div>{shown && <MockButton>Hover here</MockButton>}</div>
|
|
39
|
+
<br />
|
|
40
|
+
<MockTarget>
|
|
41
|
+
<div>{shown && <MockButton>Hover here</MockButton>}</div>
|
|
42
|
+
<div>same with a container</div>
|
|
43
|
+
</MockTarget>
|
|
44
|
+
</HoverHighlighter>
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export const HoverExclusionZones = () => {
|
|
50
|
+
return (
|
|
51
|
+
<div style={{ padding: '16px 50px 32px 16px', minWidth: 300, fontFamily: 'sans-serif' }}>
|
|
52
|
+
<HoverHighlighter>
|
|
53
|
+
<MockTarget>
|
|
54
|
+
container (target-able)
|
|
55
|
+
<div>{<MockButton>will be highlighted</MockButton>}</div>
|
|
56
|
+
</MockTarget>
|
|
57
|
+
<br />
|
|
58
|
+
<MockTarget>
|
|
59
|
+
container (target-able)
|
|
60
|
+
<div {...excludeHighlighterAtt}>{<MockButton>will be ignored</MockButton>}</div>
|
|
61
|
+
</MockTarget>
|
|
62
|
+
</HoverHighlighter>
|
|
63
|
+
</div>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
@@ -3,7 +3,7 @@ import { useDebouncedCallback } from 'use-debounce';
|
|
|
3
3
|
import { useHoverSelection } from '@teambit/react.ui.hover-selector';
|
|
4
4
|
import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
5
5
|
|
|
6
|
-
import { excludeHighlighterSelector } from '../ignore-highlighter';
|
|
6
|
+
import { excludeHighlighterSelector, skipHighlighterSelector } from '../ignore-highlighter';
|
|
7
7
|
import { MatchRule, ComponentMatchRule } from '../rule-matcher';
|
|
8
8
|
import { bubbleToComponent } from './bubble-to-component';
|
|
9
9
|
|
|
@@ -56,8 +56,14 @@ function useHoverHandler({
|
|
|
56
56
|
return;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
//
|
|
60
|
-
if (element.closest(`.${scopeClass} ${excludeHighlighterSelector}`))
|
|
59
|
+
// clear when ancestor has 'data-ignore-component-highlight'
|
|
60
|
+
if (element.closest(`.${scopeClass} ${excludeHighlighterSelector}`)) {
|
|
61
|
+
onChange(undefined);
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// skip DOM trees having 'data-skip-component-highlight'
|
|
66
|
+
if (element.closest(`.${scopeClass} ${skipHighlighterSelector}`)) return;
|
|
61
67
|
|
|
62
68
|
const result = bubbleToComponent(element, { elementRule: rule, componentRule });
|
|
63
69
|
if (!result) return;
|
package/ignore-highlighter.tsx
CHANGED
|
@@ -1,14 +1,22 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
+
/** name of ignore attribute */
|
|
3
4
|
export const excludeHighlighterAttrName = 'data-ignore-component-highlight';
|
|
4
5
|
|
|
5
|
-
/**
|
|
6
|
+
/** selector for elements with the ignore attribute */
|
|
6
7
|
export const excludeHighlighterSelector = `[${excludeHighlighterAttrName}]`;
|
|
7
8
|
|
|
8
|
-
/**
|
|
9
|
+
/** highlighter will exclude elements with this attribute */
|
|
9
10
|
export const excludeHighlighterAtt = { [excludeHighlighterAttrName]: true };
|
|
10
11
|
|
|
11
|
-
/**
|
|
12
|
+
/** children of this element will be excluded by the automatic highlighter */
|
|
12
13
|
export function ExcludeHighlighter(props: React.HTMLAttributes<HTMLDivElement>) {
|
|
13
14
|
return <div {...props} {...excludeHighlighterAtt} />;
|
|
14
15
|
}
|
|
16
|
+
|
|
17
|
+
/** name of skip attribute */
|
|
18
|
+
export const skipHighlighterAttrName = 'data-skip-component-highlight';
|
|
19
|
+
/** highlighter will skip (ignore) elements with these attributes */
|
|
20
|
+
export const skipHighlighterAttr = { [skipHighlighterAttrName]: true };
|
|
21
|
+
/** selector for elements with the skip attribute */
|
|
22
|
+
export const skipHighlighterSelector = `[${skipHighlighterAttrName}]`;
|
package/index.ts
CHANGED
|
@@ -13,8 +13,9 @@ export type { ElementHighlighterProps, Placement, HighlightClasses } from './ele
|
|
|
13
13
|
export {
|
|
14
14
|
ExcludeHighlighter,
|
|
15
15
|
excludeHighlighterAtt,
|
|
16
|
-
excludeHighlighterSelector,
|
|
17
16
|
excludeHighlighterAttrName,
|
|
17
|
+
skipHighlighterAttr,
|
|
18
|
+
skipHighlighterAttrName,
|
|
18
19
|
} from './ignore-highlighter';
|
|
19
20
|
|
|
20
21
|
export type { MatchRule } from './rule-matcher';
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
flip as flipMiddleware,
|
|
8
8
|
shift,
|
|
9
9
|
autoUpdate,
|
|
10
|
+
hide,
|
|
10
11
|
} from '@floating-ui/react-dom';
|
|
11
12
|
import type { Placement } from '@floating-ui/react-dom';
|
|
12
13
|
import styles from './label.module.scss';
|
|
@@ -32,12 +33,14 @@ export function LabelContainer({
|
|
|
32
33
|
style,
|
|
33
34
|
...rest
|
|
34
35
|
}: LabelContainerProps) {
|
|
35
|
-
const { x, y, strategy, floating, reference, refs, update } = useFloating({
|
|
36
|
+
const { x, y, strategy, floating, reference, refs, update, middlewareData } = useFloating({
|
|
36
37
|
placement,
|
|
37
38
|
middleware: compact([
|
|
38
39
|
offset && offsetMiddleware({ mainAxis: offset[0], crossAxis: offset[1] }),
|
|
39
40
|
flip && flipMiddleware(),
|
|
40
|
-
shift
|
|
41
|
+
// enabling 'shift' for 'crossAxis' will make floating-ui push the label _inside_, when it has nowhere to go
|
|
42
|
+
shift({ rootBoundary: 'document', mainAxis: true, crossAxis: true }),
|
|
43
|
+
hide({ strategy: 'referenceHidden' }),
|
|
41
44
|
]),
|
|
42
45
|
});
|
|
43
46
|
|
|
@@ -53,14 +56,15 @@ export function LabelContainer({
|
|
|
53
56
|
return autoUpdate(refs.reference.current, refs.floating.current, update, { animationFrame: !!watchMotion });
|
|
54
57
|
}, [refs.reference.current, refs.floating.current, update, watchMotion]);
|
|
55
58
|
|
|
56
|
-
const isReady =
|
|
59
|
+
const isReady = !middlewareData.hide?.referenceHidden;
|
|
57
60
|
|
|
58
61
|
return (
|
|
59
62
|
<div
|
|
60
63
|
{...rest}
|
|
61
64
|
ref={floating}
|
|
62
65
|
className={classnames(className, !isReady && styles.hidden)}
|
|
63
|
-
|
|
66
|
+
// starting at pos [0,0] will ensure the label doesn't increase the document size.
|
|
67
|
+
style={{ ...style, position: strategy, top: y ?? 0, left: x ?? 0 }}
|
|
64
68
|
/>
|
|
65
69
|
);
|
|
66
70
|
}
|
package/label/label.module.scss
CHANGED
package/mock-component.tsx
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import { componentMetaField } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
1
|
+
import React, { ButtonHTMLAttributes, HTMLAttributes } from 'react';
|
|
2
|
+
import { componentMetaField, ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
|
|
3
3
|
|
|
4
|
-
export function MockTarget({ children, ...rest }:
|
|
5
|
-
return <div {...rest}>
|
|
4
|
+
export function MockTarget({ children, ...rest }: HTMLAttributes<HTMLDivElement>) {
|
|
5
|
+
return <div {...rest}>{children}</div>;
|
|
6
6
|
}
|
|
7
7
|
MockTarget[componentMetaField] = {
|
|
8
|
+
id: 'teambit.design/ui/mock-target@1.6.2',
|
|
9
|
+
} as ComponentMeta;
|
|
10
|
+
|
|
11
|
+
export function MockButton({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
|
|
12
|
+
return <button {...rest}>{children}</button>;
|
|
13
|
+
}
|
|
14
|
+
MockButton[componentMetaField] = {
|
|
8
15
|
id: 'teambit.design/ui/icon-button@1.6.2',
|
|
9
|
-
};
|
|
16
|
+
} as ComponentMeta;
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,47 +1,47 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/react.ui.component-highlighter",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
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
|
|
9
|
+
"version": "0.1.0"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"get-xpath": "3.0.1",
|
|
13
|
+
"classnames": "2.3.1",
|
|
13
14
|
"@floating-ui/react-dom": "0.6.0",
|
|
14
|
-
"classnames": "2.2.6",
|
|
15
|
-
"use-debounce": "6.0.1",
|
|
16
15
|
"uuid": "3.4.0",
|
|
16
|
+
"use-debounce": "6.0.1",
|
|
17
17
|
"lodash.compact": "3.0.1",
|
|
18
|
-
"url-join": "4.0.
|
|
18
|
+
"url-join": "^4.0.0",
|
|
19
19
|
"@tippyjs/react": "4.2.0",
|
|
20
20
|
"core-js": "^3.0.0",
|
|
21
|
-
"@teambit/base-ui.routing.native-link": "1.0.0",
|
|
22
21
|
"@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
|
|
23
22
|
"@teambit/component-id": "0.0.402",
|
|
24
|
-
"@teambit/react.modules.dom-to-react": "0.0.489",
|
|
25
|
-
"@teambit/react.ui.hover-selector": "0.0.165",
|
|
26
23
|
"@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
|
|
27
|
-
"@teambit/
|
|
24
|
+
"@teambit/base-ui.routing.native-link": "1.0.0",
|
|
25
|
+
"@teambit/component.modules.component-url": "0.0.124",
|
|
26
|
+
"@teambit/react.modules.dom-to-react": "0.1.0",
|
|
27
|
+
"@teambit/react.ui.hover-selector": "0.1.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@types/react": "^17.0.8",
|
|
31
30
|
"@testing-library/react": "11.2.6",
|
|
32
|
-
"@types/classnames": "2.2.11",
|
|
33
|
-
"@types/react-dom": "^17.0.5",
|
|
34
31
|
"@types/uuid": "3.4.9",
|
|
35
32
|
"@types/lodash.compact": "3.0.6",
|
|
36
|
-
"@types/url-join": "4.0.0",
|
|
33
|
+
"@types/url-join": "^4.0.0",
|
|
37
34
|
"@types/mocha": "9.1.0",
|
|
38
35
|
"@types/testing-library__jest-dom": "5.9.5",
|
|
39
36
|
"@babel/runtime": "7.12.18",
|
|
40
37
|
"@types/jest": "^26.0.0",
|
|
41
|
-
"@types/
|
|
42
|
-
"@
|
|
38
|
+
"@types/react-dom": "^17.0.5",
|
|
39
|
+
"@types/react": "^17.0.8",
|
|
40
|
+
"@types/node": "12.20.4"
|
|
43
41
|
},
|
|
44
42
|
"peerDependencies": {
|
|
43
|
+
"@types/react": "17.0.0",
|
|
44
|
+
"@types/react-dom": "17.0.0",
|
|
45
45
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
46
46
|
"react": "^16.8.0 || ^17.0.0"
|
|
47
47
|
},
|
|
@@ -75,9 +75,6 @@
|
|
|
75
75
|
}
|
|
76
76
|
},
|
|
77
77
|
"private": false,
|
|
78
|
-
"engines": {
|
|
79
|
-
"node": ">=12.22.0"
|
|
80
|
-
},
|
|
81
78
|
"repository": {
|
|
82
79
|
"type": "git",
|
|
83
80
|
"url": "https://github.com/teambit/bit"
|
|
@@ -88,10 +85,6 @@
|
|
|
88
85
|
"collaboration",
|
|
89
86
|
"web",
|
|
90
87
|
"react",
|
|
91
|
-
"react-components"
|
|
92
|
-
"angular",
|
|
93
|
-
"angular-components",
|
|
94
|
-
"vue",
|
|
95
|
-
"vue-components"
|
|
88
|
+
"react-components"
|
|
96
89
|
]
|
|
97
90
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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')]
|
|
2
|
+
export const overview = [require('/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.1.0/dist/component-highlighter.docs.md')]
|
|
Binary file
|
package/preview-1648659683881.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.512/dist/children-highlighter/children-highlighter.composition.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.512/dist/hover-highlighter/hover-highlighter.compositions.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.512/dist/element-highlighter/element-highlighter.compositions.js')]
|
|
2
|
-
export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.512/dist/component-highlighter.docs.md')]
|