@elvia/elvis-spotlight 1.6.4 → 1.6.6
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/CHANGELOG.json +24 -0
- package/dist/react/elvia-spotlight.js +13 -10
- package/dist/react/styledComponents.d.ts +8 -9
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,6 +2,30 @@
|
|
|
2
2
|
"$schema": "../../changelogSchema.json",
|
|
3
3
|
"name": "elvis-spotlight",
|
|
4
4
|
"content": [
|
|
5
|
+
{
|
|
6
|
+
"date": "09.10.26",
|
|
7
|
+
"version": "1.6.6",
|
|
8
|
+
"changelog": [
|
|
9
|
+
{
|
|
10
|
+
"type": "bug_fix",
|
|
11
|
+
"changes": ["Spotlight rectangles now keep the default border radius when dimensions are provided."]
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"type": "patch",
|
|
15
|
+
"changes": ["Updated internal dependencies."]
|
|
16
|
+
}
|
|
17
|
+
]
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "30.05.24",
|
|
21
|
+
"version": "1.6.5",
|
|
22
|
+
"changelog": [
|
|
23
|
+
{
|
|
24
|
+
"type": "bug_fix",
|
|
25
|
+
"changes": ["Republish the package to fix an issue with the previous release."]
|
|
26
|
+
}
|
|
27
|
+
]
|
|
28
|
+
},
|
|
5
29
|
{
|
|
6
30
|
"date": "30.05.24",
|
|
7
31
|
"version": "1.6.4",
|
|
@@ -15,7 +15,6 @@ var SpotlightArea = /* @__PURE__ */ _styled("svg", {
|
|
|
15
15
|
} : {
|
|
16
16
|
name: "8afq30",
|
|
17
17
|
styles: "position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh",
|
|
18
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV1QyIsImZpbGUiOiJzdHlsZWRDb21wb25lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFNwb3RsaWdodEFyZWEgPSBzdHlsZWQuc3ZnYFxuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgei1pbmRleDogOTk5OTk7XG4gIHdpZHRoOiAxMDB2dztcbiAgaGVpZ2h0OiAxMDB2aDtcbmA7XG5cbmludGVyZmFjZSBTcG90bGlnaHRDaXJjbGVQcm9wcyB7XG4gIHRyYW5zaXRpb25EdXJhdGlvbjogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgU3BvdGxpZ2h0Q2lyY2xlID0gc3R5bGVkLmNpcmNsZTxTcG90bGlnaHRDaXJjbGVQcm9wcz5gXG4gIHRyYW5zaXRpb246IGFsbCAkeyh7IHRyYW5zaXRpb25EdXJhdGlvbiB9KSA9PiB0cmFuc2l0aW9uRHVyYXRpb259IGVhc2UtaW4tb3V0O1xuYDtcbmludGVyZmFjZSBTcG90bGlnaHRSZWN0UHJvcHMge1xuICB0cmFuc2l0aW9uRHVyYXRpb246IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFNwb3RsaWdodFJlY3QgPSBzdHlsZWQucmVjdDxTcG90bGlnaHRSZWN0UHJvcHM+YFxuICB0cmFuc2l0aW9uOiBhbGwgJHsoeyB0cmFuc2l0aW9uRHVyYXRpb24gfSkgPT4gdHJhbnNpdGlvbkR1cmF0aW9ufSBlYXNlLWluLW91dDtcbmA7XG5cbmV4cG9ydCBjb25zdCBTcG90bGlnaHRNYXNrID0gc3R5bGVkLnJlY3RgXG4gIC0tZXdjLXNwb3RsaWdodC1tYXNrLWZpbGw6IDAuMjU7XG4gIC5lLWNvbG9yLWJhY2tncm91bmQtMyAmJixcbiAgLmUtdGhlbWUtZGFyayAmJixcbiAgLmUtY29sb3ItYmFja2dyb3VuZC0zICYmIHtcbiAgICAtLWV3Yy1zcG90bGlnaHQtbWFzay1maWxsOiAwLjU7XG4gIH1cblxuICBmaWxsOiByZ2JhKDAsIDAsIDAsIHZhcigtLWV3Yy1zcG90bGlnaHQtbWFzay1maWxsKSk7XG4gIHdpZHRoOiAxMDB2dztcbiAgaGVpZ2h0OiAxMDB2aDtcbmA7XG4iXX0= */",
|
|
19
18
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
20
19
|
});
|
|
21
20
|
var SpotlightCircle = /* @__PURE__ */ _styled("circle", {
|
|
@@ -23,13 +22,13 @@ var SpotlightCircle = /* @__PURE__ */ _styled("circle", {
|
|
|
23
22
|
label: "SpotlightCircle"
|
|
24
23
|
})("transition:all ", ({
|
|
25
24
|
transitionDuration
|
|
26
|
-
}) => transitionDuration, " ease-in-out;"
|
|
25
|
+
}) => transitionDuration, " ease-in-out;");
|
|
27
26
|
var SpotlightRect = /* @__PURE__ */ _styled("rect", {
|
|
28
27
|
target: "e1uexsug1",
|
|
29
28
|
label: "SpotlightRect"
|
|
30
29
|
})("transition:all ", ({
|
|
31
30
|
transitionDuration
|
|
32
|
-
}) => transitionDuration, " ease-in-out;"
|
|
31
|
+
}) => transitionDuration, " ease-in-out;");
|
|
33
32
|
var SpotlightMask = /* @__PURE__ */ _styled("rect", {
|
|
34
33
|
target: "e1uexsug0",
|
|
35
34
|
label: "SpotlightMask"
|
|
@@ -39,7 +38,6 @@ var SpotlightMask = /* @__PURE__ */ _styled("rect", {
|
|
|
39
38
|
} : {
|
|
40
39
|
name: "j858q8",
|
|
41
40
|
styles: "--ewc-spotlight-mask-fill:0.25;.e-color-background-3 &&,.e-theme-dark &&,.e-color-background-3 &&{--ewc-spotlight-mask-fill:0.5;}fill:rgba(0, 0, 0, var(--ewc-spotlight-mask-fill));width:100vw;height:100vh",
|
|
42
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZENvbXBvbmVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCd0MiLCJmaWxlIjoic3R5bGVkQ29tcG9uZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBTcG90bGlnaHRBcmVhID0gc3R5bGVkLnN2Z2BcbiAgcG9zaXRpb246IGZpeGVkO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIHotaW5kZXg6IDk5OTk5O1xuICB3aWR0aDogMTAwdnc7XG4gIGhlaWdodDogMTAwdmg7XG5gO1xuXG5pbnRlcmZhY2UgU3BvdGxpZ2h0Q2lyY2xlUHJvcHMge1xuICB0cmFuc2l0aW9uRHVyYXRpb246IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFNwb3RsaWdodENpcmNsZSA9IHN0eWxlZC5jaXJjbGU8U3BvdGxpZ2h0Q2lyY2xlUHJvcHM+YFxuICB0cmFuc2l0aW9uOiBhbGwgJHsoeyB0cmFuc2l0aW9uRHVyYXRpb24gfSkgPT4gdHJhbnNpdGlvbkR1cmF0aW9ufSBlYXNlLWluLW91dDtcbmA7XG5pbnRlcmZhY2UgU3BvdGxpZ2h0UmVjdFByb3BzIHtcbiAgdHJhbnNpdGlvbkR1cmF0aW9uOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBTcG90bGlnaHRSZWN0ID0gc3R5bGVkLnJlY3Q8U3BvdGxpZ2h0UmVjdFByb3BzPmBcbiAgdHJhbnNpdGlvbjogYWxsICR7KHsgdHJhbnNpdGlvbkR1cmF0aW9uIH0pID0+IHRyYW5zaXRpb25EdXJhdGlvbn0gZWFzZS1pbi1vdXQ7XG5gO1xuXG5leHBvcnQgY29uc3QgU3BvdGxpZ2h0TWFzayA9IHN0eWxlZC5yZWN0YFxuICAtLWV3Yy1zcG90bGlnaHQtbWFzay1maWxsOiAwLjI1O1xuICAuZS1jb2xvci1iYWNrZ3JvdW5kLTMgJiYsXG4gIC5lLXRoZW1lLWRhcmsgJiYsXG4gIC5lLWNvbG9yLWJhY2tncm91bmQtMyAmJiB7XG4gICAgLS1ld2Mtc3BvdGxpZ2h0LW1hc2stZmlsbDogMC41O1xuICB9XG5cbiAgZmlsbDogcmdiYSgwLCAwLCAwLCB2YXIoLS1ld2Mtc3BvdGxpZ2h0LW1hc2stZmlsbCkpO1xuICB3aWR0aDogMTAwdnc7XG4gIGhlaWdodDogMTAwdmg7XG5gO1xuIl19 */",
|
|
43
41
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
44
42
|
});
|
|
45
43
|
|
|
@@ -64,24 +62,29 @@ function useLockBodyScroll(removeLockBodyScroll) {
|
|
|
64
62
|
}
|
|
65
63
|
|
|
66
64
|
// components/elvis-spotlight/src/react/elvia-spotlight.tsx
|
|
65
|
+
var DEFAULT_RECTANGLE_PROPS = {
|
|
66
|
+
width: 200,
|
|
67
|
+
height: 200,
|
|
68
|
+
borderRadius: 8
|
|
69
|
+
};
|
|
67
70
|
var Spotlight = ({
|
|
68
71
|
position,
|
|
69
72
|
shape = "circle",
|
|
70
73
|
radius = 200,
|
|
71
74
|
hasLockBodyScroll = true,
|
|
72
75
|
transitionDuration = "350ms",
|
|
73
|
-
rectangleProps =
|
|
74
|
-
width: 200,
|
|
75
|
-
height: 200,
|
|
76
|
-
borderRadius: 8
|
|
77
|
-
},
|
|
76
|
+
rectangleProps = DEFAULT_RECTANGLE_PROPS,
|
|
78
77
|
className,
|
|
79
78
|
inlineStyle,
|
|
80
79
|
...rest
|
|
81
80
|
}) => {
|
|
82
81
|
const hasPosition = position && position.horizontal !== void 0 && position.vertical !== void 0;
|
|
82
|
+
const rectangle = {
|
|
83
|
+
...DEFAULT_RECTANGLE_PROPS,
|
|
84
|
+
...rectangleProps
|
|
85
|
+
};
|
|
83
86
|
useLockBodyScroll(hasLockBodyScroll);
|
|
84
|
-
return hasPosition ? /* @__PURE__ */ React.createElement("div", { className, style: inlineStyle, ...rest }, /* @__PURE__ */ React.createElement(SpotlightArea, null, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("mask", { id: "hole" }, /* @__PURE__ */ React.createElement("rect", { width: "100%", height: "100%", fill: "white" }), shape === "circle" ? /* @__PURE__ */ React.createElement(SpotlightCircle, { transitionDuration, r: radius, cx: position.horizontal, cy: position.vertical, fill: "black" }) : /* @__PURE__ */ React.createElement(SpotlightRect, { transitionDuration, width:
|
|
87
|
+
return hasPosition ? /* @__PURE__ */ React.createElement("div", { className, style: inlineStyle, ...rest }, /* @__PURE__ */ React.createElement(SpotlightArea, null, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("mask", { id: "hole" }, /* @__PURE__ */ React.createElement("rect", { width: "100%", height: "100%", fill: "white" }), shape === "circle" ? /* @__PURE__ */ React.createElement(SpotlightCircle, { transitionDuration, r: radius, cx: position.horizontal, cy: position.vertical, fill: "black" }) : /* @__PURE__ */ React.createElement(SpotlightRect, { transitionDuration, width: rectangle.width, height: rectangle.height, x: position.horizontal, y: position.vertical, rx: rectangle.borderRadius, ry: rectangle.borderRadius, fill: "black" }))), /* @__PURE__ */ React.createElement(SpotlightMask, { mask: "url(#hole)" }))) : /* @__PURE__ */ React.createElement("div", null);
|
|
85
88
|
};
|
|
86
89
|
var elvia_spotlight_default = Spotlight;
|
|
87
90
|
export {
|
|
@@ -1,24 +1,23 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
export declare const SpotlightArea: import("@emotion/styled").StyledComponent<{
|
|
3
|
-
theme?: import("@emotion/react").Theme
|
|
4
|
-
as?:
|
|
2
|
+
theme?: import("@emotion/react").Theme;
|
|
3
|
+
as?: React.ElementType;
|
|
5
4
|
}, import("react").SVGProps<SVGSVGElement>, {}>;
|
|
6
5
|
interface SpotlightCircleProps {
|
|
7
6
|
transitionDuration: string;
|
|
8
7
|
}
|
|
9
8
|
export declare const SpotlightCircle: import("@emotion/styled").StyledComponent<{
|
|
10
|
-
theme?: import("@emotion/react").Theme
|
|
11
|
-
as?:
|
|
9
|
+
theme?: import("@emotion/react").Theme;
|
|
10
|
+
as?: React.ElementType;
|
|
12
11
|
} & SpotlightCircleProps, import("react").SVGProps<SVGCircleElement>, {}>;
|
|
13
12
|
interface SpotlightRectProps {
|
|
14
13
|
transitionDuration: string;
|
|
15
14
|
}
|
|
16
15
|
export declare const SpotlightRect: import("@emotion/styled").StyledComponent<{
|
|
17
|
-
theme?: import("@emotion/react").Theme
|
|
18
|
-
as?:
|
|
16
|
+
theme?: import("@emotion/react").Theme;
|
|
17
|
+
as?: React.ElementType;
|
|
19
18
|
} & SpotlightRectProps, import("react").SVGProps<SVGRectElement>, {}>;
|
|
20
19
|
export declare const SpotlightMask: import("@emotion/styled").StyledComponent<{
|
|
21
|
-
theme?: import("@emotion/react").Theme
|
|
22
|
-
as?:
|
|
20
|
+
theme?: import("@emotion/react").Theme;
|
|
21
|
+
as?: React.ElementType;
|
|
23
22
|
}, import("react").SVGProps<SVGRectElement>, {}>;
|
|
24
23
|
export {};
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elvia/elvis-spotlight",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://design.elvia.io/components/spotlight",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
|
-
"url": "https://github.com/3lvia/designsystem.git",
|
|
8
|
+
"url": "git+https://github.com/3lvia/designsystem.git",
|
|
9
9
|
"directory": "packages/components/components/elvis-spotlight"
|
|
10
10
|
},
|
|
11
11
|
"source": "src/react/elvia-spotlight.tsx",
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
"dist"
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@elvia/elvis-component-wrapper": "^4.
|
|
20
|
-
"@elvia/elvis-toolbox": "^12.
|
|
19
|
+
"@elvia/elvis-component-wrapper": "^4.3.0",
|
|
20
|
+
"@elvia/elvis-toolbox": "^12.2.0",
|
|
21
21
|
"@emotion/react": "^11.11.4",
|
|
22
22
|
"@emotion/styled": "^11.11.5"
|
|
23
23
|
},
|