Merge pull request #168 from Neovici/beta

Beta

CHANGELOG.md

@@ -1,3 +1,16 @@
+# [5.0.0-beta.1](https://github.com/neovici/cosmoz-image-viewer/compare/v4.0.0...v5.0.0-beta.1) (2022-06-16)
+
+
+### Features
+
+* upgrade to lit@^2 ([75643d2](https://github.com/neovici/cosmoz-image-viewer/commit/75643d2515a01a497bd05b48da5378be2314dc02))
+* upgrade to lit2 ([8819bc5](https://github.com/neovici/cosmoz-image-viewer/commit/8819bc5e55db258c26323c36445f419acb8366c1))
+
+
+### BREAKING CHANGES
+
+* Upgrade to lit2
+
 # [4.0.0](https://github.com/neovici/cosmoz-image-viewer/compare/v3.4.0...v4.0.0) (2022-04-20)
 
 

lib/haunted-pan-zoom.js

@@ -5,12 +5,12 @@ import {
 import {
 	html, nothing
 } from 'lit-html';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { ref } from 'lit-html/directives/ref.js';
 import { usePublicAPI } from './hooks/use-public-api';
 import {
 	usePanZoom, ERROR
 } from './hooks/use-pan-zoom';
-import { ref } from './directives/ref';
 import { useDispatchEvent } from './hooks/use-dispatch-event';
 
 // eslint-disable-next-line max-lines-per-function
@@ -68,14 +68,15 @@ const HauntedPanZoom = ({
 		</style>
 		<div class="container ${ status }"
 			style="pointer-events: ${ disabled ? 'none' : 'all' }"
-			@wheel=${ onWheel }>
-			${ ref(containerRef) }
+			@wheel=${ onWheel }
+			${ ref((el)=>(containerRef.current = el)) }
+			>
 			${ !src || status === ERROR ? nothing : html`
-				<img src="${ src }" draggable="false"
+				<img src=${ src } draggable="false"
 					@mousedown=${ startMousePan }
 					@touchstart=${ onTouchStart }
 					@load=${ onImageLoad } @error=${ error }
-					style=${ styleMap(style) }/>
+					style=${ styleMap(style) } />
 			` }
 		</div>
 	`;