@elvia/elvis-spotlight 1.6.5 → 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.
Files changed (4) hide show
  1. package/CHANGELOG.json +14 -0
  2. package/dist/react/elvia-spotlight.js +11 -6
  3. package/dist/react/styledComponents.d.ts +8 -9
  4. package/package.json +4 -4
package/CHANGELOG.json CHANGED
@@ -2,6 +2,20 @@
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
+ },
5
19
  {
6
20
  "date": "30.05.24",
7
21
  "version": "1.6.5",
package/dist/react/elvia-spotlight.js CHANGED
@@ -62,24 +62,29 @@ function useLockBodyScroll(removeLockBodyScroll) {
62
62
  }
63
63
 
64
64
  // components/elvis-spotlight/src/react/elvia-spotlight.tsx
65
+ var DEFAULT_RECTANGLE_PROPS = {
66
+ width: 200,
67
+ height: 200,
68
+ borderRadius: 8
69
+ };
65
70
  var Spotlight = ({
66
71
  position,
67
72
  shape = "circle",
68
73
  radius = 200,
69
74
  hasLockBodyScroll = true,
70
75
  transitionDuration = "350ms",
71
- rectangleProps = {
72
- width: 200,
73
- height: 200,
74
- borderRadius: 8
75
- },
76
+ rectangleProps = DEFAULT_RECTANGLE_PROPS,
76
77
  className,
77
78
  inlineStyle,
78
79
  ...rest
79
80
  }) => {
80
81
  const hasPosition = position && position.horizontal !== void 0 && position.vertical !== void 0;
82
+ const rectangle = {
83
+ ...DEFAULT_RECTANGLE_PROPS,
84
+ ...rectangleProps
85
+ };
81
86
  useLockBodyScroll(hasLockBodyScroll);
82
- 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: rectangleProps.width, height: rectangleProps.height, x: position.horizontal, y: position.vertical, rx: rectangleProps.borderRadius, ry: rectangleProps.borderRadius, fill: "black" }))), /* @__PURE__ */ React.createElement(SpotlightMask, { mask: "url(#hole)" }))) : /* @__PURE__ */ React.createElement("div", null);
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);
83
88
  };
84
89
  var elvia_spotlight_default = Spotlight;
85
90
  export {
package/dist/react/styledComponents.d.ts CHANGED
@@ -1,24 +1,23 @@
1
- /// <reference types="react" />
2
1
  export declare const SpotlightArea: import("@emotion/styled").StyledComponent<{
3
- theme?: import("@emotion/react").Theme | undefined;
4
- as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
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 | undefined;
11
- as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
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 | undefined;
18
- as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
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 | undefined;
22
- as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
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.5",
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.2.0",
20
- "@elvia/elvis-toolbox": "^12.0.1",
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
  },