@elvia/elvis-spotlight 1.4.5 → 1.5.1

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 CHANGED
@@ -1,6 +1,34 @@
1
1
  {
2
2
  "$schema": "../../changelogSchema.json",
3
3
  "content": [
4
+ {
5
+ "date": "09.05.23",
6
+ "version": "1.5.1",
7
+ "changelog": [
8
+ {
9
+ "type": "patch",
10
+ "changes": ["Updated internal dependencies. "]
11
+ }
12
+ ]
13
+ },
14
+ {
15
+ "date": "04.04.23",
16
+ "version": "1.5.0",
17
+ "changelog": [
18
+ {
19
+ "type": "new_feature",
20
+ "changes": ["Added support for dark theme."]
21
+ },
22
+ {
23
+ "type": "patch",
24
+ "changes": ["Updated internal dependencies."]
25
+ },
26
+ {
27
+ "type": "bug_fix",
28
+ "changes": ["Fixed the prop type exports for React."]
29
+ }
30
+ ]
31
+ },
4
32
  {
5
33
  "date": "20.12.22",
6
34
  "version": "1.4.5",
@@ -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
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.config=void 0;var config={name:"Spotlight",attributes:[{name:"position",type:"object"},{name:"shape",type:"string"},{name:"radius",type:"number"},{name:"rectangleProps",type:"object"},{name:"hasLockBodyScroll",type:"boolean"},{name:"transitionDuration",type:"string"},{name:"className",type:"string"},{name:"inlineStyle",type:"object"}]};exports.config=config;
5
+ export var config={name:"Spotlight",attributes:[{name:"position",type:"object"},{name:"shape",type:"string"},{name:"radius",type:"number"},{name:"rectangleProps",type:"object"},{name:"hasLockBodyScroll",type:"boolean"},{name:"transitionDuration",type:"string"},{name:"className",type:"string"},{name:"inlineStyle",type:"object"}]};
6
6
  //# sourceMappingURL=config.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["config.ts"],"names":["config","name","attributes","type"],"mappings":";;;;0FAEO,GAAMA,OAAuB,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,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"]}
1
+ {"version":3,"sources":["config.ts"],"names":["config","name","attributes","type"],"mappings":";;;;AAEA,MAAO,IAAMA,OAAuB,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"]}
@@ -1,23 +1,4 @@
1
- import { CSSProperties, FC } from 'react';
2
- export declare type SpotlightShape = 'circle' | 'rectangle';
3
- export interface SpotlightPosition {
4
- vertical: number;
5
- horizontal: number;
6
- }
7
- export interface SpotlightRectangleProps {
8
- width?: number;
9
- height?: number;
10
- borderRadius?: number;
11
- }
12
- export interface SpotlightProps {
13
- position: SpotlightPosition | undefined;
14
- shape?: SpotlightShape;
15
- radius?: number;
16
- rectangleProps?: SpotlightRectangleProps;
17
- hasLockBodyScroll?: boolean;
18
- transitionDuration?: string;
19
- className?: string;
20
- inlineStyle?: CSSProperties;
21
- }
1
+ import { FC } from 'react';
2
+ import { SpotlightProps } from './elvia-spotlight.types';
22
3
  declare const Spotlight: FC<SpotlightProps>;
23
4
  export default Spotlight;
@@ -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
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_styledComponents=require("./styledComponents"),_useLockBodyScroll=require("./useLockBodyScroll"),_excluded=["position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","className","inlineStyle"];function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}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}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(0,_useLockBodyScroll.useLockBodyScroll)(void 0===g||g),o?/*#__PURE__*/_react.default.createElement("div",_extends({className:"".concat(l?l:""),style:m},n),/*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightArea,null,/*#__PURE__*/_react.default.createElement("defs",null,/*#__PURE__*/_react.default.createElement("mask",{id:"hole"},/*#__PURE__*/_react.default.createElement("rect",{width:"100%",height:"100%",fill:"white"}),"circle"===d?/*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightCircle,{transitionDuration:i,r:f,cx:b.horizontal,cy:b.vertical,fill:"black"}):/*#__PURE__*/_react.default.createElement(_styledComponents.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.default.createElement("rect",{fill:"rgba(0,0,0,0.25)",width:"100%",height:"100%",mask:"url(#hole)"}))):/*#__PURE__*/_react.default.createElement("div",null)},_default=Spotlight;exports.default=_default;
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,{useRef}from"react";import{SpotlightArea,SpotlightCircle,SpotlightRect}from"./styledComponents";import{useCurrentTheme}from"@elvia/elvis-toolbox";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,p=useRef(null),q=useCurrentTheme(p),r=q.currentTheme;return useLockBodyScroll(void 0===g||g),o?/*#__PURE__*/React.createElement("div",_extends({className:"".concat(l?l:""),style:m},n,{ref:p}),/*#__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("rect",{fill:"rgba(0,0,0,".concat("light"===r?.25:.5,")"),width:"100%",height:"100%",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":["Spotlight","position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","width","height","borderRadius","className","inlineStyle","rest","hasPosition","horizontal","vertical","useLockBodyScroll"],"mappings":";;;;onCA4BMA,UAA6B,CAAG,WAUhC,IATJC,EAAQ,GAARA,QAAQ,KACRC,KAAK,CAALA,CAAK,YAAG,QAAQ,OAChBC,MAAM,CAANA,CAAM,YAAG,GAAG,OACZC,iBAAiB,KACjBC,kBAAkB,CAAlBA,CAAkB,YAAG,OAAO,OAC5BC,cAAc,CAAdA,CAAc,YAAG,CAAEC,KAAK,CAAE,GAAG,CAAEC,MAAM,CAAE,GAAG,CAAEC,YAAY,CAAE,CAAE,CAAC,GAC7DC,CAAS,GAATA,SAAS,CACTC,CAAW,GAAXA,WAAW,CACRC,CAAI,uCAEDC,CAAW,CAAGZ,CAAQ,EAAI,SAAAA,CAAQ,CAACa,UAAwB,EAAI,SAAAb,CAAQ,CAACc,QAAsB,CAGpG,MAFA,GAAAC,oCAAiB,gBAAmB,CAE7BH,CAAW,cAChB,6CAAK,SAAS,WAAKH,CAAS,CAAGA,CAAS,CAAG,EAAE,CAAG,CAAC,KAAK,CAAEC,CAAY,EAAKC,CAAI,eAC3E,6BAAC,+BAAa,mBACZ,sDACE,qCAAM,EAAE,CAAC,MAAM,eACb,qCAAM,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAG,CACrC,QAAQ,GAAlBV,CAAkB,cACjB,6BAAC,iCAAe,EACd,kBAAkB,CAAEG,CAAmB,CACvC,CAAC,CAAEF,CAAO,CACV,EAAE,CAAEF,CAAQ,CAACa,UAAW,CACxB,EAAE,CAAEb,CAAQ,CAACc,QAAS,CACtB,IAAI,CAAC,OAAO,EACZ,cAEF,6BAAC,+BAAa,EACZ,kBAAkB,CAAEV,CAAmB,CACvC,KAAK,CAAEC,CAAc,CAACC,KAAM,CAC5B,MAAM,CAAED,CAAc,CAACE,MAAO,CAC9B,CAAC,CAAEP,CAAQ,CAACa,UAAW,CACvB,CAAC,CAAEb,CAAQ,CAACc,QAAS,CACrB,EAAE,CAAET,CAAc,CAACG,YAAa,CAChC,EAAE,CAAEH,CAAc,CAACG,YAAa,CAChC,IAAI,CAAC,OAAO,EAEf,CACI,CACF,cACP,qCAAM,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,EAAG,CAC/D,CACZ,cAEN,wCAEJ,CAAC,UAEcT,SAAS","file":"elvia-spotlight.js","sourcesContent":["import React, { CSSProperties, FC } from 'react';\nimport { SpotlightArea, SpotlightCircle, SpotlightRect } from './styledComponents';\nimport { useLockBodyScroll } from './useLockBodyScroll';\n\nexport type SpotlightShape = 'circle' | 'rectangle';\n\nexport interface SpotlightPosition {\n vertical: number;\n horizontal: number;\n}\n\nexport interface SpotlightRectangleProps {\n width?: number;\n height?: number;\n borderRadius?: number;\n}\n\nexport interface SpotlightProps {\n position: SpotlightPosition | undefined;\n shape?: SpotlightShape;\n radius?: number;\n rectangleProps?: SpotlightRectangleProps;\n hasLockBodyScroll?: boolean;\n transitionDuration?: string;\n className?: string;\n inlineStyle?: CSSProperties;\n}\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 ? 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 <rect fill=\"rgba(0,0,0,0.25)\" width=\"100%\" height=\"100%\" mask=\"url(#hole)\" />\n </SpotlightArea>\n </div>\n ) : (\n <div></div>\n );\n};\n\nexport default Spotlight;\n"]}
1
+ {"version":3,"sources":["elvia-spotlight.tsx"],"names":["React","useRef","SpotlightArea","SpotlightCircle","SpotlightRect","useCurrentTheme","useLockBodyScroll","Spotlight","position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","width","height","borderRadius","className","inlineStyle","rest","hasPosition","horizontal","vertical","spotlightDivRef","currentTheme"],"mappings":";;;;4zBAAA,MAAOA,MAAK,EAAQC,MAAM,KAAQ,OAAO,CACzC,OAASC,aAAa,CAAEC,eAAe,CAAEC,aAAa,KAAQ,oBAAoB,CAClF,OAASC,eAAe,KAAQ,sBAAsB,CAEtD,OAASC,iBAAiB,KAAQ,qBAAqB,CAGvD,GAAMC,UAA6B,CAAG,WAUhC,IATJC,EAAQ,GAARA,QAAQ,KACRC,KAAK,CAALA,CAAK,YAAG,QAAQ,OAChBC,MAAM,CAANA,CAAM,YAAG,GAAG,OACZC,iBAAiB,KACjBC,kBAAkB,CAAlBA,CAAkB,YAAG,OAAO,OAC5BC,cAAc,CAAdA,CAAc,YAAG,CAAEC,KAAK,CAAE,GAAG,CAAEC,MAAM,CAAE,GAAG,CAAEC,YAAY,CAAE,CAAE,CAAC,GAC7DC,CAAS,GAATA,SAAS,CACTC,CAAW,GAAXA,WAAW,CACRC,CAAI,uCAEDC,CAAW,CAAGZ,CAAQ,EAAI,SAAAA,CAAQ,CAACa,UAAwB,EAAI,SAAAb,CAAQ,CAACc,QAAsB,CAC9FC,CAAe,CAAGtB,MAAM,CAAiB,IAAI,CAAC,GAC3BI,eAAe,CAACkB,CAAe,CAAC,CAAjDC,CAAY,GAAZA,YAAY,CAGpB,MAFAlB,kBAAiB,eAAmB,CAE7Bc,CAAW,cAChB,oCAAK,SAAS,WAAKH,CAAS,CAAGA,CAAS,CAAG,EAAE,CAAG,CAAC,KAAK,CAAEC,CAAY,EAAKC,CAAI,EAAE,GAAG,CAAEI,CAAgB,gBAClG,oBAAC,aAAa,mBACZ,6CACE,4BAAM,EAAE,CAAC,MAAM,eACb,4BAAM,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAG,CACrC,QAAQ,GAAlBd,CAAkB,cACjB,oBAAC,eAAe,EACd,kBAAkB,CAAEG,CAAmB,CACvC,CAAC,CAAEF,CAAO,CACV,EAAE,CAAEF,CAAQ,CAACa,UAAW,CACxB,EAAE,CAAEb,CAAQ,CAACc,QAAS,CACtB,IAAI,CAAC,OAAO,EACZ,cAEF,oBAAC,aAAa,EACZ,kBAAkB,CAAEV,CAAmB,CACvC,KAAK,CAAEC,CAAc,CAACC,KAAM,CAC5B,MAAM,CAAED,CAAc,CAACE,MAAO,CAC9B,CAAC,CAAEP,CAAQ,CAACa,UAAW,CACvB,CAAC,CAAEb,CAAQ,CAACc,QAAS,CACrB,EAAE,CAAET,CAAc,CAACG,YAAa,CAChC,EAAE,CAAEH,CAAc,CAACG,YAAa,CAChC,IAAI,CAAC,OAAO,EAEf,CACI,CACF,cACP,4BACE,IAAI,sBAAiC,OAAO,GAAxBQ,CAAwB,CAAG,GAAI,CAAG,EAAG,KAAI,CAC7D,KAAK,CAAC,MAAM,CACZ,MAAM,CAAC,MAAM,CACb,IAAI,CAAC,YAAY,EACjB,CACY,CACZ,cAEN,+BAEJ,CAAC,CAED,cAAejB,UAAS","file":"elvia-spotlight.js","sourcesContent":["import React, { FC, useRef } from 'react';\nimport { SpotlightArea, SpotlightCircle, SpotlightRect } from './styledComponents';\nimport { useCurrentTheme } from '@elvia/elvis-toolbox';\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 const spotlightDivRef = useRef<HTMLDivElement>(null);\n const { currentTheme } = useCurrentTheme(spotlightDivRef);\n useLockBodyScroll(hasLockBodyScroll);\n\n return hasPosition ? (\n <div className={`${className ? className : ''}`} style={inlineStyle} {...rest} ref={spotlightDivRef}>\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 <rect\n fill={`rgba(0,0,0,${currentTheme === 'light' ? 0.25 : 0.5})`}\n width=\"100%\"\n height=\"100%\"\n mask=\"url(#hole)\"\n />\n </SpotlightArea>\n </div>\n ) : (\n <div></div>\n );\n};\n\nexport default Spotlight;\n"]}
@@ -0,0 +1,18 @@
1
+ import { BaseProps, HasTransitionDuration } from '@elvia/elvis-toolbox';
2
+ export type SpotlightShape = 'circle' | 'rectangle';
3
+ export interface SpotlightPosition {
4
+ vertical: number;
5
+ horizontal: number;
6
+ }
7
+ export interface SpotlightRectangleProps {
8
+ width?: number;
9
+ height?: number;
10
+ borderRadius?: number;
11
+ }
12
+ export interface SpotlightProps extends BaseProps, HasTransitionDuration {
13
+ position?: SpotlightPosition;
14
+ shape?: SpotlightShape;
15
+ radius?: number;
16
+ rectangleProps?: SpotlightRectangleProps;
17
+ hasLockBodyScroll?: boolean;
18
+ }
@@ -0,0 +1,6 @@
1
+ /*
2
+ * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
3
+ * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
4
+ */
5
+ export{};
6
+ //# sourceMappingURL=elvia-spotlight.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["elvia-spotlight.types.tsx"],"names":[],"mappings":";;;;AAAA","file":"elvia-spotlight.types.js","sourcesContent":["import { BaseProps, HasTransitionDuration } from '@elvia/elvis-toolbox';\n\nexport type SpotlightShape = 'circle' | 'rectangle';\n\nexport interface SpotlightPosition {\n vertical: number;\n horizontal: number;\n}\n\nexport interface SpotlightRectangleProps {\n width?: number;\n height?: number;\n borderRadius?: number;\n}\n\nexport interface SpotlightProps extends BaseProps, HasTransitionDuration {\n position?: SpotlightPosition;\n shape?: SpotlightShape;\n radius?: number;\n rectangleProps?: SpotlightRectangleProps;\n hasLockBodyScroll?: boolean;\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
- "use strict";var _styledComponents=_interopRequireDefault(require("styled-components"));Object.defineProperty(exports,"__esModule",{value:!0}),exports.SpotlightRect=exports.SpotlightCircle=exports.SpotlightArea=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var SpotlightArea=_styledComponents.default.svg.withConfig({displayName:"styledComponents__SpotlightArea",componentId:"sc-env4mw-0"})(["position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh;"]);exports.SpotlightArea=SpotlightArea;var SpotlightCircle=_styledComponents.default.circle.withConfig({displayName:"styledComponents__SpotlightCircle",componentId:"sc-env4mw-1"})(["transition:all "," ease-in-out;"],function(a){return a.transitionDuration});exports.SpotlightCircle=SpotlightCircle;var SpotlightRect=_styledComponents.default.rect.withConfig({displayName:"styledComponents__SpotlightRect",componentId:"sc-env4mw-2"})(["transition:all "," ease-in-out;"],function(a){return a.transitionDuration});exports.SpotlightRect=SpotlightRect;
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){return a.transitionDuration});export var SpotlightRect=styled.rect.withConfig({displayName:"styledComponents__SpotlightRect",componentId:"sc-env4mw-2"})(["transition:all "," ease-in-out;"],function(a){return a.transitionDuration});
6
6
  //# sourceMappingURL=styledComponents.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["styledComponents.tsx"],"names":["SpotlightArea","styled","svg","SpotlightCircle","circle","props","transitionDuration","SpotlightRect","rect"],"mappings":";;;;aAAA,2EAAuC,0MAEhC,GAAMA,cAAa,CAAGC,yBAAM,CAACC,GAAG,+JAOtC,CAAC,oCAMK,GAAMC,gBAAe,CAAGF,yBAAM,CAACG,MAAM,6HACxB,SAACC,CAAK,QAAKA,EAAK,CAACC,kBAAkB,EACtD,CAAC,wCAKK,GAAMC,cAAa,CAAGN,yBAAM,CAACO,IAAI,2HACpB,SAACH,CAAK,QAAKA,EAAK,CAACC,kBAAkB,EACtD,CAAC","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 ${(props) => props.transitionDuration} ease-in-out;\n`;\ninterface SpotlightRectProps {\n transitionDuration: string;\n}\n\nexport const SpotlightRect = styled.rect<SpotlightRectProps>`\n transition: all ${(props) => props.transitionDuration} ease-in-out;\n`;\n"]}
1
+ {"version":3,"sources":["styledComponents.tsx"],"names":["styled","SpotlightArea","svg","SpotlightCircle","circle","props","transitionDuration","SpotlightRect","rect"],"mappings":";;;;AAAA,MAAOA,OAAM,KAAM,mBAAmB,CAEtC,MAAO,IAAMC,cAAa,CAAGD,MAAM,CAACE,GAAG,+JAOtC,CAMD,MAAO,IAAMC,gBAAe,CAAGH,MAAM,CAACI,MAAM,6HACxB,SAACC,CAAK,QAAKA,EAAK,CAACC,kBAAkB,EACtD,CAKD,MAAO,IAAMC,cAAa,CAAGP,MAAM,CAACQ,IAAI,2HACpB,SAACH,CAAK,QAAKA,EAAK,CAACC,kBAAkB,EACtD","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 ${(props) => props.transitionDuration} ease-in-out;\n`;\ninterface SpotlightRectProps {\n transitionDuration: string;\n}\n\nexport const SpotlightRect = styled.rect<SpotlightRectProps>`\n transition: all ${(props) => props.transitionDuration} ease-in-out;\n`;\n"]}
@@ -2,6 +2,6 @@
2
2
  * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
3
3
  * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
4
4
  */
5
- "use strict";var _react=require("react");Object.defineProperty(exports,"__esModule",{value:!0}),exports.useLockBodyScroll=useLockBodyScroll;// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
6
- function useLockBodyScroll(a){(0,_react.useEffect)(function(){var b=window.getComputedStyle(document.body).overflow,c=window.getComputedStyle(document.documentElement).overflow;return a?(document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden",function(){document.body.style.overflow=b,document.documentElement.style.overflow=c}):(document.body.style.overflow=b,void(document.documentElement.style.overflow=c))},[a])}
5
+ import{useEffect}from"react";// eslint-disable-next-line
6
+ export function useLockBodyScroll(a){useEffect(function(){var b=window.getComputedStyle(document.body).overflow,c=window.getComputedStyle(document.documentElement).overflow;return a?(document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden",function(){document.body.style.overflow=b,document.documentElement.style.overflow=c}):(document.body.style.overflow=b,void(document.documentElement.style.overflow=c))},[a])}
7
7
  //# sourceMappingURL=useLockBodyScroll.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["useLockBodyScroll.tsx"],"names":["useLockBodyScroll","removeLockBodyScroll","useEffect","originalStyleOverflowBody","window","getComputedStyle","document","body","overflow","originalStyleOverflowHtml","documentElement","style"],"mappings":";;;;aAAA,4BAAkC,mGAElC;AACO,QAASA,kBAAiB,CAACC,CAA6B,CAAE,CAC/D,GAAAC,gBAAS,EAAC,UAAM,IACRC,EAAyB,CAAGC,MAAM,CAACC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,QAAQ,CAC3EC,CAAyB,CAAGL,MAAM,CAACC,gBAAgB,CAACC,QAAQ,CAACI,eAAe,CAAC,CAACF,QAAQ,OACvFP,EAAoB,EAKzBK,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,CAACR,CAAoB,CAAC,CAC3B","file":"useLockBodyScroll.js","sourcesContent":["import { useEffect } from 'react';\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\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"]}
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,SAASC,kBAAiB,CAACC,CAA6B,CAAE,CAC/DF,SAAS,CAAC,UAAM,IACRG,EAAyB,CAAGC,MAAM,CAACC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,QAAQ,CAC3EC,CAAyB,CAAGL,MAAM,CAACC,gBAAgB,CAACC,QAAQ,CAACI,eAAe,CAAC,CAACF,QAAQ,OACvFN,EAAoB,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,10 +1,9 @@
1
1
  {
2
2
  "name": "@elvia/elvis-spotlight",
3
- "version": "1.4.5",
4
- "description": "",
3
+ "version": "1.5.1",
5
4
  "main": "web_component.js",
6
- "author": "",
7
5
  "license": "MIT",
6
+ "homepage": "https://design.elvia.io/components/spotlight",
8
7
  "files": [
9
8
  "web_component.js",
10
9
  "react.js",
@@ -14,13 +13,24 @@
14
13
  "dist/**/*"
15
14
  ],
16
15
  "dependencies": {
17
- "@elvia/elvis-component-wrapper": "^4.0.0",
18
- "@elvia/elvis-toolbox": "^7.4.3",
16
+ "@elvia/elvis-component-wrapper": "^4.1.2",
17
+ "@elvia/elvis-toolbox": "^8.0.0",
19
18
  "styled-components": "^5.3.3"
20
19
  },
21
20
  "peerDependencies": {
22
21
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
23
22
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
24
23
  "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0"
24
+ },
25
+ "peerDependenciesMeta": {
26
+ "react": {
27
+ "optional": true
28
+ },
29
+ "react-dom": {
30
+ "optional": true
31
+ },
32
+ "react-is": {
33
+ "optional": true
34
+ }
25
35
  }
26
36
  }
package/react.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  declare module '@elvia/elvis-spotlight/react';
2
2
  export { default as Spotlight } from './dist/react/js/elvia-spotlight';
3
- export type { SpotlightProps } from './dist/react/js/elvia-spotlight';
3
+ export type { SpotlightProps } from './dist/react/js/elvia-spotlight.types';
4
4
  export type * from './dist/react/js/elvia-spotlight';
5
+ export type * from './dist/react/js/elvia-spotlight.types';