solid-dismiss - npm Package Compare versions

Comparing version 1.6.73 to 1.6.74

dist/source/components/Transition.js

@@ -34,4 +34,5 @@ import { untrack, createComputed, createSignal, children, batch, } from "solid-js";
         const propStr = camelize(type) + "Class";
+        const classAnimationStates = animatedElType === "content" ? props : props.overlay;
         // @ts-ignore
-        const classState = props[propStr];
+        const classState = classAnimationStates[propStr];
         return classState ? classState.split(" ") : [`${name}-${type}`];
@@ -38,0 +39,0 @@ }

package.json

 {
   "name": "solid-dismiss",
-  "version": "1.6.73",
+  "version": "1.6.74",
   "homepage": "https://aquaductape.github.io/solid-dismiss/",
@@ -5,0 +5,0 @@ "description": "Handles \"click outside\" behavior for popup menu. Closing is triggered by click/focus outside of popup element or pressing \"Escape\" key.",

README.md

@@ -103,2 +103,26 @@ <p>
 
+## Other
+
+For better visual user experience, when using custom overlay elements in overlayElement prop,
+
+```js
+<Dismiss
+  // ...
+  modal
+  overlayElement={{
+    element: <div style="position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.5)"/>
+  }}
+```
+
+extend the overlay's height (that has the value of viewport height either 100% or 100vh) by 65px or more. What happens is that on mobile devices, there's a lag of updating viewport dimensions when dynamic URL bar toggles, therefore showing a large gap at bottom of the page that the overlay doesn't cover. So the overlay's height should be `calc(100vh + 65px)` or `calc(100% + 65px)`, depending how you style the overlay, tailwind equivalent would be `h-[calc(100vh+65px)]`.
+
+```js
+<Dismiss
+ // ...
+ modal
+ overlayElement={{
+   element: <div style="position: fixed; inset: 0; height: calc(100vh + 65px); z-index: 1000; background: rgba(0, 0, 0, 0.5)"/>
+ }}
+```
+
 ## Docs
@@ -105,0 +129,0 @@

No alert changes

Improved metrics

Total package byte prevSize

352470

increased by0.39%

Lines of code

4726

increased by0.04%

Number of lines in readme file

416

increased by6.12%

No dependency changes