solid-dismiss - npm Package Compare versions

Comparing version 1.0.27 to 1.1.0

dist/esm/index.js

@@ -1424,4 +1424,6 @@ import { isServer, insert, template, delegateEvents, addEventListener, effect, setAttribute, classList, createComponent, mergeProps } from 'solid-js/web';
 const Dismiss = props => {
+  const modal = props.modal || false; // @ts-check
+
   const {
-    id = "",
+    id,
     menuButton,
@@ -1438,8 +1440,8 @@ menuPopup,
     closeWhenEscapeKeyIsPressed = true,
-    overlay = false,
-    overlayElement = false,
-    trapFocus = false,
-    removeScrollbar = false,
+    overlay = modal,
+    overlayElement = modal,
+    trapFocus = modal,
+    removeScrollbar = modal,
     enableLastFocusSentinel = false,
-    mount,
+    mount = modal ? "body" : undefined,
     // stopComponentEventPropagation = false,
@@ -1461,2 +1463,3 @@ show = false,
     focusElementOnOpen,
+    // @ts-ignore
     id,
@@ -1500,2 +1503,26 @@ uniqueId: createUniqueId(),
         el.style.zIndex = "1000";
+
+        if (modal) {
+          el.style.pointerEvents = "none";
+          el.style.position = "relative";
+
+          const setDialogElStyle = el => {
+            el.style.pointerEvents = "all";
+          };
+
+          requestAnimationFrame(() => {
+            const dialog = el.querySelector('[role="dialog"]');
+
+            if (!dialog) {
+              const children = el.children;
+              if (!children) return;
+              const child = children[1];
+              const dialog = child.firstElementChild;
+              setDialogElStyle(dialog);
+              return;
+            }
+
+            setDialogElStyle(dialog);
+          });
+        }
       }
@@ -1536,2 +1563,6 @@
   function getElement(el, appendToElement) {
+    if (overlayElement) {
+      el = el.nextElementSibling;
+    }
+
     if (appendToElement) {
@@ -1874,2 +1905,3 @@ if (appendToElement === "menuPopup") {
       addDismissStack({
+        // @ts-ignore
         id,
@@ -2013,3 +2045,3 @@ uniqueId: state.uniqueId,
 
-  if (props.mount) return marker;
+  if (mount) return marker;
   if (show) return render(props.children);
@@ -2016,0 +2048,0 @@ let strictEqual = false;

dist/source/index.jsx

@@ -20,3 +20,5 @@ import "./browserInfo";
 const Dismiss = (props) => {
-    const { id = "", menuButton, menuPopup, focusElementOnClose, focusElementOnOpen, cursorKeys = false, closeWhenMenuButtonIsTabbed = false, closeWhenMenuButtonIsClicked = true, closeWhenScrolling = false, closeWhenDocumentBlurs = false, closeWhenOverlayClicked = true, closeWhenEscapeKeyIsPressed = true, overlay = false, overlayElement = false, trapFocus = false, removeScrollbar = false, enableLastFocusSentinel = false, mount, 
+    const modal = props.modal || false;
+    // @ts-check
+    const { id, menuButton, menuPopup, focusElementOnClose, focusElementOnOpen, cursorKeys = false, closeWhenMenuButtonIsTabbed = false, closeWhenMenuButtonIsClicked = true, closeWhenScrolling = false, closeWhenDocumentBlurs = false, closeWhenOverlayClicked = true, closeWhenEscapeKeyIsPressed = true, overlay = modal, overlayElement = modal, trapFocus = modal, removeScrollbar = modal, enableLastFocusSentinel = false, mount = modal ? "body" : undefined, 
     // stopComponentEventPropagation = false,
@@ -36,2 +38,3 @@ show = false, onOpen, } = props;
         focusElementOnOpen,
+        // @ts-ignore
         id,
@@ -77,2 +80,22 @@ uniqueId: createUniqueId(),
                 el.style.zIndex = "1000";
+                if (modal) {
+                    el.style.pointerEvents = "none";
+                    el.style.position = "relative";
+                    const setDialogElStyle = (el) => {
+                        el.style.pointerEvents = "all";
+                    };
+                    requestAnimationFrame(() => {
+                        const dialog = el.querySelector('[role="dialog"]');
+                        if (!dialog) {
+                            const children = el.children;
+                            if (!children)
+                                return;
+                            const child = children[1];
+                            const dialog = child.firstElementChild;
+                            setDialogElStyle(dialog);
+                            return;
+                        }
+                        setDialogElStyle(dialog);
+                    });
+                }
             }
@@ -108,2 +131,5 @@ if (props.ref) {
     function getElement(el, appendToElement) {
+        if (overlayElement) {
+            el = el.nextElementSibling;
+        }
         if (appendToElement) {
@@ -406,2 +432,3 @@ if (appendToElement === "menuPopup") {
             addDismissStack({
+                // @ts-ignore
                 id,
@@ -473,3 +500,3 @@ uniqueId: state.uniqueId,
     }
-    if (props.mount)
+    if (mount)
         return marker;
@@ -476,0 +503,0 @@ if (show)

dist/types/index.d.ts

@@ -154,3 +154,11 @@ import "./browserInfo";
     /**
+     * Shorthand for `Dismiss.overlay` to `true`, `Dismiss.overlayElement` to `true`, `Dismiss.trapFocus` to `true`, `Dismiss.removeScrollbar` to `true`, and `Dismiss.mount` to `"body"`. Does not override the values of already setted properties.
      *
+     * Also adds `pointer-events: none;` css declaration to menuPopup element and then `pointer-events: all;` to either element that has role="dialog" attribute or first child of menuPopup element.
+     *
+     * @defaultValue `false`
+     */
+    modal?: boolean;
+    /**
+     *
      * activates sentinel element as last tabbable item in menuPopup, that way when Tabbing "forwards" out of menuPopup, the next logical tabblable element after menuButton will be focused.
@@ -157,0 +165,0 @@ *

package.json

 {
   "name": "solid-dismiss",
-  "version": "1.0.27",
+  "version": "1.1.0",
   "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

@@ -0,1 +1,4 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Solid%20Dismiss&background=tiles&project=%20" alt="Solid Primitives">
+</p>
 <h1 align="center">Solid Dismiss
@@ -223,3 +226,11 @@ <img src="assets/logo.svg" width="40px" height="35px" style="position: relative; top: 5px; pointer-events: none;">
 /**
+ * Shorthand for `Dismiss.overlay` to `true`, `Dismiss.overlayElement` to `true`, `Dismiss.trapFocus` to `true`, `Dismiss.removeScrollbar` to `true`, and `Dismiss.mount` to `"body"`. Does not override the values of already setted properties.
  *
+ * Also adds `pointer-events: none;` css declaration to menuPopup element and then `pointer-events: all;` to either element that has role="dialog" attribute or first child of menuPopup element.
+ *
+ * @defaultValue `false`
+ */
+modal?: boolean;
+/**
+ *
  * activates sentinel element as last tabbable item in menuPopup, that way when Tabbing "forwards" out of menuPopup, the next logical tabblable element after menuButton will be focused.
@@ -226,0 +237,0 @@ *

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

294013

increased by1.86%

Lines of code

3953

increased by1.54%

Number of lines in readme file

344

increased by3.3%

No dependency changes