@elvia/elvis-spotlight 1.5.3 → 1.6.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/CHANGELOG.json +20 -0
- package/dist/react/js/config.js.map +1 -1
- package/dist/react/js/elvia-spotlight.js +1 -1
- package/dist/react/js/elvia-spotlight.js.map +1 -1
- package/dist/react/js/styledComponents.d.ts +1 -0
- package/dist/react/js/styledComponents.js +1 -1
- package/dist/react/js/styledComponents.js.map +1 -1
- package/dist/react/js/useLockBodyScroll.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.json
CHANGED
|
@@ -1,6 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "../../changelogSchema.json",
|
|
3
3
|
"content": [
|
|
4
|
+
{
|
|
5
|
+
"date": "24.08.23",
|
|
6
|
+
"version": "1.6.0",
|
|
7
|
+
"changelog": [
|
|
8
|
+
{
|
|
9
|
+
"type": "new_feature",
|
|
10
|
+
"changes": ["Dark theme support."]
|
|
11
|
+
}
|
|
12
|
+
]
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"date": "24.08.23",
|
|
16
|
+
"version": "1.5.4",
|
|
17
|
+
"changelog": [
|
|
18
|
+
{
|
|
19
|
+
"type": "bug_fix",
|
|
20
|
+
"changes": ["Spotlight now correctly supports dark theme."]
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
},
|
|
4
24
|
{
|
|
5
25
|
"date": "28.06.23",
|
|
6
26
|
"version": "1.5.3",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["config.ts"],"names":["config","name","attributes","type"],"mappings":";;;;AAEA,MAAO,
|
|
1
|
+
{"version":3,"sources":["config.ts"],"names":["config","name","attributes","type"],"mappings":";;;;AAEA,MAAO,IAAM,CAAAA,MAAuB,CAAG,CACrCC,IAAI,CAAE,WAAW,CACjBC,UAAU,CAAE,CACV,CAAED,IAAI,CAAE,UAAU,CAAEE,IAAI,CAAE,QAAS,CAAC,CACpC,CAAEF,IAAI,CAAE,OAAO,CAAEE,IAAI,CAAE,QAAS,CAAC,CACjC,CAAEF,IAAI,CAAE,QAAQ,CAAEE,IAAI,CAAE,QAAS,CAAC,CAClC,CAAEF,IAAI,CAAE,gBAAgB,CAAEE,IAAI,CAAE,QAAS,CAAC,CAC1C,CAAEF,IAAI,CAAE,mBAAmB,CAAEE,IAAI,CAAE,SAAU,CAAC,CAC9C,CAAEF,IAAI,CAAE,oBAAoB,CAAEE,IAAI,CAAE,QAAS,CAAC,CAC9C,CAAEF,IAAI,CAAE,WAAW,CAAEE,IAAI,CAAE,QAAS,CAAC,CACrC,CAAEF,IAAI,CAAE,aAAa,CAAEE,IAAI,CAAE,QAAS,CAAC,CAE3C,CAAC","file":"config.js","sourcesContent":["import { ComponentConfig } from '@elvia/elvis-toolbox';\n\nexport const config: ComponentConfig = {\n name: 'Spotlight',\n attributes: [\n { name: 'position', type: 'object' },\n { name: 'shape', type: 'string' },\n { name: 'radius', type: 'number' },\n { name: 'rectangleProps', type: 'object' },\n { name: 'hasLockBodyScroll', type: 'boolean' },\n { name: 'transitionDuration', type: 'string' },\n { name: 'className', type: 'string' },\n { name: 'inlineStyle', type: 'object' },\n ],\n};\n"]}
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
|
|
3
3
|
* DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
|
|
4
4
|
*/
|
|
5
|
-
var _excluded=["position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","className","inlineStyle"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||(e[c]=a[c]);return e}import React
|
|
5
|
+
var _excluded=["position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","className","inlineStyle"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||(e[c]=a[c]);return e}import React from"react";import{SpotlightArea,SpotlightCircle,SpotlightMask,SpotlightRect}from"./styledComponents";import{useLockBodyScroll}from"./useLockBodyScroll";var Spotlight=function(a){var b=a.position,c=a.shape,d=void 0===c?"circle":c,e=a.radius,f=void 0===e?200:e,g=a.hasLockBodyScroll,h=a.transitionDuration,i=void 0===h?"350ms":h,j=a.rectangleProps,k=void 0===j?{width:200,height:200,borderRadius:8}:j,l=a.className,m=a.inlineStyle,n=_objectWithoutProperties(a,_excluded),o=b&&void 0!==b.horizontal&&void 0!==b.vertical;return useLockBodyScroll(void 0===g||g),o?/*#__PURE__*/React.createElement("div",_extends({className:l,style:m},n),/*#__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"}),"circle"===d?/*#__PURE__*/React.createElement(SpotlightCircle,{transitionDuration:i,r:f,cx:b.horizontal,cy:b.vertical,fill:"black"}):/*#__PURE__*/React.createElement(SpotlightRect,{transitionDuration:i,width:k.width,height:k.height,x:b.horizontal,y:b.vertical,rx:k.borderRadius,ry:k.borderRadius,fill:"black"}))),/*#__PURE__*/React.createElement(SpotlightMask,{mask:"url(#hole)"}))):/*#__PURE__*/React.createElement("div",null)};export default Spotlight;
|
|
6
6
|
//# sourceMappingURL=elvia-spotlight.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["elvia-spotlight.tsx"],"names":["React","
|
|
1
|
+
{"version":3,"sources":["elvia-spotlight.tsx"],"names":["React","SpotlightArea","SpotlightCircle","SpotlightMask","SpotlightRect","useLockBodyScroll","Spotlight","a","position","c","shape","e","radius","g","hasLockBodyScroll","h","transitionDuration","j","rectangleProps","width","height","borderRadius","className","inlineStyle","rest","_objectWithoutProperties","_excluded","hasPosition","horizontal","vertical","createElement","_extends","style","id","fill","r","cx","cy","x","y","rx","ry","mask"],"mappings":";;;;4zBAAA,MAAO,CAAAA,KAAK,KAAc,OAAO,CACjC,OAASC,aAAa,CAAEC,eAAe,CAAEC,aAAa,CAAEC,aAAa,KAAQ,oBAAoB,CAEjG,OAASC,iBAAiB,KAAQ,qBAAqB,CAGvD,GAAM,CAAAC,SAA6B,CAAG,QAAAA,CAAAC,CAAA,CAUhC,IATJ,CAAAC,CAAQ,CAAAD,CAAA,CAARC,QAAQ,CAAAC,CAAA,CAAAF,CAAA,CACRG,KAAK,CAALA,CAAK,UAAAD,CAAA,CAAG,QAAQ,CAAAA,CAAA,CAAAE,CAAA,CAAAJ,CAAA,CAChBK,MAAM,CAANA,CAAM,UAAAD,CAAA,CAAG,GAAG,CAAAA,CAAA,CAAAE,CAAA,CAAAN,CAAA,CACZO,iBAAiB,CAAAC,CAAA,CAAAR,CAAA,CACjBS,kBAAkB,CAAlBA,CAAkB,UAAAD,CAAA,CAAG,OAAO,CAAAA,CAAA,CAAAE,CAAA,CAAAV,CAAA,CAC5BW,cAAc,CAAdA,CAAc,UAAAD,CAAA,CAAG,CAAEE,KAAK,CAAE,GAAG,CAAEC,MAAM,CAAE,GAAG,CAAEC,YAAY,CAAE,CAAE,CAAC,CAAAJ,CAAA,CAC7DK,CAAS,CAAAf,CAAA,CAATe,SAAS,CACTC,CAAW,CAAAhB,CAAA,CAAXgB,WAAW,CACRC,CAAI,CAAAC,wBAAA,CAAAlB,CAAA,CAAAmB,SAAA,EAEDC,CAAW,CAAGnB,CAAQ,EAAI,SAAAA,CAAQ,CAACoB,UAAwB,EAAI,SAAApB,CAAQ,CAACqB,QAAsB,CAGpG,MAFA,CAAAxB,iBAAiB,UAAAQ,CAAA,EAAAA,CAAkB,CAAC,CAE7Bc,CAAW,cAChB3B,KAAA,CAAA8B,aAAA,OAAAC,QAAA,EAAKT,SAAS,CAAEA,CAAU,CAACU,KAAK,CAAET,CAAY,EAAKC,CAAI,eACrDxB,KAAA,CAAA8B,aAAA,CAAC7B,aAAa,mBACZD,KAAA,CAAA8B,aAAA,0BACE9B,KAAA,CAAA8B,aAAA,SAAMG,EAAE,CAAC,MAAM,eACbjC,KAAA,CAAA8B,aAAA,SAAMX,KAAK,CAAC,MAAM,CAACC,MAAM,CAAC,MAAM,CAACc,IAAI,CAAC,OAAO,CAAE,CAAC,CACrC,QAAQ,GAAlBxB,CAAkB,cACjBV,KAAA,CAAA8B,aAAA,CAAC5B,eAAe,EACdc,kBAAkB,CAAEA,CAAmB,CACvCmB,CAAC,CAAEvB,CAAO,CACVwB,EAAE,CAAE5B,CAAQ,CAACoB,UAAW,CACxBS,EAAE,CAAE7B,CAAQ,CAACqB,QAAS,CACtBK,IAAI,CAAC,OAAO,CACb,CAAC,cAEFlC,KAAA,CAAA8B,aAAA,CAAC1B,aAAa,EACZY,kBAAkB,CAAEA,CAAmB,CACvCG,KAAK,CAAED,CAAc,CAACC,KAAM,CAC5BC,MAAM,CAAEF,CAAc,CAACE,MAAO,CAC9BkB,CAAC,CAAE9B,CAAQ,CAACoB,UAAW,CACvBW,CAAC,CAAE/B,CAAQ,CAACqB,QAAS,CACrBW,EAAE,CAAEtB,CAAc,CAACG,YAAa,CAChCoB,EAAE,CAAEvB,CAAc,CAACG,YAAa,CAChCa,IAAI,CAAC,OAAO,CACb,CAEC,CACF,CAAC,cACPlC,KAAA,CAAA8B,aAAA,CAAC3B,aAAa,EAACuC,IAAI,CAAC,YAAY,CAAE,CACrB,CACZ,CAAC,cAEN1C,KAAA,CAAA8B,aAAA,WAAU,CAEd,CAAC,CAED,cAAe,CAAAxB,SAAS","file":"elvia-spotlight.js","sourcesContent":["import React, { FC } from 'react';\nimport { SpotlightArea, SpotlightCircle, SpotlightMask, SpotlightRect } from './styledComponents';\n\nimport { useLockBodyScroll } from './useLockBodyScroll';\nimport { SpotlightProps } from './elvia-spotlight.types';\n\nconst Spotlight: FC<SpotlightProps> = ({\n position,\n shape = 'circle',\n radius = 200,\n hasLockBodyScroll = true,\n transitionDuration = '350ms',\n rectangleProps = { width: 200, height: 200, borderRadius: 8 },\n className,\n inlineStyle,\n ...rest\n}) => {\n const hasPosition = position && position.horizontal !== undefined && position.vertical !== undefined;\n useLockBodyScroll(hasLockBodyScroll);\n\n return hasPosition ? (\n <div className={className} style={inlineStyle} {...rest}>\n <SpotlightArea>\n <defs>\n <mask id=\"hole\">\n <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n {shape === 'circle' ? (\n <SpotlightCircle\n transitionDuration={transitionDuration}\n r={radius}\n cx={position.horizontal}\n cy={position.vertical}\n fill=\"black\"\n />\n ) : (\n <SpotlightRect\n transitionDuration={transitionDuration}\n width={rectangleProps.width}\n height={rectangleProps.height}\n x={position.horizontal}\n y={position.vertical}\n rx={rectangleProps.borderRadius}\n ry={rectangleProps.borderRadius}\n fill=\"black\"\n />\n )}\n </mask>\n </defs>\n <SpotlightMask mask=\"url(#hole)\" />\n </SpotlightArea>\n </div>\n ) : (\n <div></div>\n );\n};\n\nexport default Spotlight;\n"]}
|
|
@@ -7,4 +7,5 @@ interface SpotlightRectProps {
|
|
|
7
7
|
transitionDuration: string;
|
|
8
8
|
}
|
|
9
9
|
export declare const SpotlightRect: import("styled-components").StyledComponent<"rect", any, SpotlightRectProps, never>;
|
|
10
|
+
export declare const SpotlightMask: import("styled-components").StyledComponent<"rect", any, {}, never>;
|
|
10
11
|
export {};
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
|
|
3
3
|
* DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
|
|
4
4
|
*/
|
|
5
|
-
import styled from"styled-components";export var SpotlightArea=styled.svg.withConfig({displayName:"styledComponents__SpotlightArea",componentId:"sc-env4mw-0"})(["position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh;"]);export var SpotlightCircle=styled.circle.withConfig({displayName:"styledComponents__SpotlightCircle",componentId:"sc-env4mw-1"})(["transition:all "," ease-in-out;"],function(a){
|
|
5
|
+
import styled from"styled-components";export var SpotlightArea=styled.svg.withConfig({displayName:"styledComponents__SpotlightArea",componentId:"sc-env4mw-0"})(["position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh;"]);export var SpotlightCircle=styled.circle.withConfig({displayName:"styledComponents__SpotlightCircle",componentId:"sc-env4mw-1"})(["transition:all "," ease-in-out;"],function(a){var b=a.transitionDuration;return b});export var SpotlightRect=styled.rect.withConfig({displayName:"styledComponents__SpotlightRect",componentId:"sc-env4mw-2"})(["transition:all "," ease-in-out;"],function(a){var b=a.transitionDuration;return b});export var SpotlightMask=styled.rect.withConfig({displayName:"styledComponents__SpotlightMask",componentId:"sc-env4mw-3"})(["--ewc-spotlight-mask-fill:0.25;.e-theme-dark &&,.e-color-background-3 &&{--ewc-spotlight-mask-fill:0.5;}fill:rgba(0,0,0,var(--ewc-spotlight-mask-fill));width:100%;height:100%;"]);
|
|
6
6
|
//# sourceMappingURL=styledComponents.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["styledComponents.tsx"],"names":["styled","SpotlightArea","svg","SpotlightCircle","circle","
|
|
1
|
+
{"version":3,"sources":["styledComponents.tsx"],"names":["styled","SpotlightArea","svg","withConfig","displayName","componentId","SpotlightCircle","circle","a","transitionDuration","SpotlightRect","rect","SpotlightMask"],"mappings":";;;;AAAA,MAAO,CAAAA,MAAM,KAAM,mBAAmB,CAEtC,MAAO,IAAM,CAAAC,aAAa,CAAGD,MAAM,CAACE,GAAG,CAAAC,UAAA,EAAAC,WAAA,mCAAAC,WAAA,yFAOtC,CAMD,MAAO,IAAM,CAAAC,eAAe,CAAGN,MAAM,CAACO,MAAM,CAAAJ,UAAA,EAAAC,WAAA,qCAAAC,WAAA,qDACxB,SAAAG,CAAA,KAAG,CAAAC,CAAkB,CAAAD,CAAA,CAAlBC,kBAAkB,OAAO,CAAAA,CAAkB,EACjE,CAKD,MAAO,IAAM,CAAAC,aAAa,CAAGV,MAAM,CAACW,IAAI,CAAAR,UAAA,EAAAC,WAAA,mCAAAC,WAAA,qDACpB,SAAAG,CAAA,KAAG,CAAAC,CAAkB,CAAAD,CAAA,CAAlBC,kBAAkB,OAAO,CAAAA,CAAkB,EACjE,CAED,MAAO,IAAM,CAAAG,aAAa,CAAGZ,MAAM,CAACW,IAAI,CAAAR,UAAA,EAAAC,WAAA,mCAAAC,WAAA,qMAUvC","file":"styledComponents.js","sourcesContent":["import styled from 'styled-components';\n\nexport const SpotlightArea = styled.svg`\n position: fixed;\n top: 0;\n left: 0;\n z-index: 99999;\n width: 100vw;\n height: 100vh;\n`;\n\ninterface SpotlightCircleProps {\n transitionDuration: string;\n}\n\nexport const SpotlightCircle = styled.circle<SpotlightCircleProps>`\n transition: all ${({ transitionDuration }) => transitionDuration} ease-in-out;\n`;\ninterface SpotlightRectProps {\n transitionDuration: string;\n}\n\nexport const SpotlightRect = styled.rect<SpotlightRectProps>`\n transition: all ${({ transitionDuration }) => transitionDuration} ease-in-out;\n`;\n\nexport const SpotlightMask = styled.rect`\n --ewc-spotlight-mask-fill: 0.25;\n .e-theme-dark &&,\n .e-color-background-3 && {\n --ewc-spotlight-mask-fill: 0.5;\n }\n\n fill: rgba(0, 0, 0, var(--ewc-spotlight-mask-fill));\n width: 100%;\n height: 100%;\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useLockBodyScroll.tsx"],"names":["useEffect","useLockBodyScroll","removeLockBodyScroll","originalStyleOverflowBody","window","getComputedStyle","document","body","overflow","originalStyleOverflowHtml","documentElement","style"],"mappings":";;;;AAAA,OAASA,SAAS,KAAQ,OAAO,CAEjC;AACA,MAAO,
|
|
1
|
+
{"version":3,"sources":["useLockBodyScroll.tsx"],"names":["useEffect","useLockBodyScroll","removeLockBodyScroll","originalStyleOverflowBody","window","getComputedStyle","document","body","overflow","originalStyleOverflowHtml","documentElement","style"],"mappings":";;;;AAAA,OAASA,SAAS,KAAQ,OAAO,CAEjC;AACA,MAAO,SAAS,CAAAC,iBAAiBA,CAACC,CAA6B,CAAE,CAC/DF,SAAS,CAAC,UAAM,IACR,CAAAG,CAAyB,CAAGC,MAAM,CAACC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,QAAQ,CAC3EC,CAAyB,CAAGL,MAAM,CAACC,gBAAgB,CAACC,QAAQ,CAACI,eAAe,CAAC,CAACF,QAAQ,OACvF,CAAAN,CAAoB,EAKzBI,QAAQ,CAACC,IAAI,CAACI,KAAK,CAACH,QAAQ,CAAG,QAAQ,CACvCF,QAAQ,CAACI,eAAe,CAACC,KAAK,CAACH,QAAQ,CAAG,QAAQ,CAE3C,UAAM,CACXF,QAAQ,CAACC,IAAI,CAACI,KAAK,CAACH,QAAQ,CAAGL,CAAyB,CACxDG,QAAQ,CAACI,eAAe,CAACC,KAAK,CAACH,QAAQ,CAAGC,CAC5C,CAAC,GAVCH,QAAQ,CAACC,IAAI,CAACI,KAAK,CAACH,QAAQ,CAAGL,CAAyB,MACxDG,QAAQ,CAACI,eAAe,CAACC,KAAK,CAACH,QAAQ,CAAGC,CAAyB,EAUvE,CAAC,CAAE,CAACP,CAAoB,CAAC,CAC3B","file":"useLockBodyScroll.js","sourcesContent":["import { useEffect } from 'react';\n\n// eslint-disable-next-line\nexport function useLockBodyScroll(removeLockBodyScroll: boolean) {\n useEffect(() => {\n const originalStyleOverflowBody = window.getComputedStyle(document.body).overflow;\n const originalStyleOverflowHtml = window.getComputedStyle(document.documentElement).overflow;\n if (!removeLockBodyScroll) {\n document.body.style.overflow = originalStyleOverflowBody;\n document.documentElement.style.overflow = originalStyleOverflowHtml;\n return;\n }\n document.body.style.overflow = 'hidden';\n document.documentElement.style.overflow = 'hidden';\n\n return () => {\n document.body.style.overflow = originalStyleOverflowBody;\n document.documentElement.style.overflow = originalStyleOverflowHtml;\n };\n }, [removeLockBodyScroll]);\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elvia/elvis-spotlight",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"main": "web_component.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://design.elvia.io/components/spotlight",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
],
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@elvia/elvis-component-wrapper": "^4.1.3",
|
|
17
|
-
"@elvia/elvis-toolbox": "^9.
|
|
17
|
+
"@elvia/elvis-toolbox": "^9.6.0",
|
|
18
18
|
"styled-components": "^5.3.3"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|