@atlaskit/top-layer 4.4.4 → 4.4.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/top-layer
 
+## 4.4.5
+
+### Patch Changes
+
+- [`4aa51e925cecb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4aa51e925cecb) -
+  Handle environments that do not support matching the `:popover-open` selector during close
+  settlement.
+
 ## 4.4.4
 
 ### Patch Changes

package/dist/cjs/internal/use-animated-visibility.js

@@ -50,7 +50,13 @@ function isNativeElementOpen(_ref3) {
   if (element instanceof HTMLDialogElement) {
     return element.open;
   }
-  return element.matches(':popover-open');
+
+  // Some DOM implementations throw for unsupported pseudo-classes.
+  try {
+    return element.matches(':popover-open');
+  } catch (_unused) {
+    return false;
+  }
 }
 
 /**
@@ -257,11 +263,12 @@ function useAnimatedVisibility(_ref5) {
     cancelExitSettlementRef.current();
     // Snapshot currentTarget because the DOM clears it after event dispatch.
     var element = event.currentTarget;
-    if (element instanceof HTMLElement) {
-      if (event.newState === 'open') {
-        element.removeAttribute('inert');
-        element.removeAttribute('aria-hidden');
-      } else {
+    if (event.newState === 'open' && element instanceof HTMLElement) {
+      element.removeAttribute('inert');
+      element.removeAttribute('aria-hidden');
+    }
+    if (event.newState === 'closed') {
+      if (element instanceof HTMLElement) {
         // We use a microtask to let native focus restoration happen before making the element inert.
         // The browser restores focus after beforetoggle returns, during its close steps.
         queueMicrotask(function () {
@@ -272,13 +279,13 @@ function useAnimatedVisibility(_ref5) {
           })) {
             return;
           }
+
+          // Exit animations keep closed content rendered, so make it non-interactive and hide it from assistive technology.
           element.setAttribute('inert', '');
           // Tooling does not consistently treat inert content as hidden, even though the browser does.
           element.setAttribute('aria-hidden', 'true');
         });
       }
-    }
-    if (event.newState === 'closed') {
       dispatch({
         type: 'exit-started'
       });

package/dist/es2019/internal/use-animated-visibility.js

@@ -40,7 +40,13 @@ function isNativeElementOpen({
   if (element instanceof HTMLDialogElement) {
     return element.open;
   }
-  return element.matches(':popover-open');
+
+  // Some DOM implementations throw for unsupported pseudo-classes.
+  try {
+    return element.matches(':popover-open');
+  } catch {
+    return false;
+  }
 }
 
 /**
@@ -253,11 +259,12 @@ export function useAnimatedVisibility({
     cancelExitSettlementRef.current();
     // Snapshot currentTarget because the DOM clears it after event dispatch.
     const element = event.currentTarget;
-    if (element instanceof HTMLElement) {
-      if (event.newState === 'open') {
-        element.removeAttribute('inert');
-        element.removeAttribute('aria-hidden');
-      } else {
+    if (event.newState === 'open' && element instanceof HTMLElement) {
+      element.removeAttribute('inert');
+      element.removeAttribute('aria-hidden');
+    }
+    if (event.newState === 'closed') {
+      if (element instanceof HTMLElement) {
         // We use a microtask to let native focus restoration happen before making the element inert.
         // The browser restores focus after beforetoggle returns, during its close steps.
         queueMicrotask(() => {
@@ -268,13 +275,13 @@ export function useAnimatedVisibility({
           })) {
             return;
           }
+
+          // Exit animations keep closed content rendered, so make it non-interactive and hide it from assistive technology.
           element.setAttribute('inert', '');
           // Tooling does not consistently treat inert content as hidden, even though the browser does.
           element.setAttribute('aria-hidden', 'true');
         });
       }
-    }
-    if (event.newState === 'closed') {
       dispatch({
         type: 'exit-started'
       });

package/dist/esm/internal/use-animated-visibility.js

@@ -43,7 +43,13 @@ function isNativeElementOpen(_ref3) {
   if (element instanceof HTMLDialogElement) {
     return element.open;
   }
-  return element.matches(':popover-open');
+
+  // Some DOM implementations throw for unsupported pseudo-classes.
+  try {
+    return element.matches(':popover-open');
+  } catch (_unused) {
+    return false;
+  }
 }
 
 /**
@@ -250,11 +256,12 @@ export function useAnimatedVisibility(_ref5) {
     cancelExitSettlementRef.current();
     // Snapshot currentTarget because the DOM clears it after event dispatch.
     var element = event.currentTarget;
-    if (element instanceof HTMLElement) {
-      if (event.newState === 'open') {
-        element.removeAttribute('inert');
-        element.removeAttribute('aria-hidden');
-      } else {
+    if (event.newState === 'open' && element instanceof HTMLElement) {
+      element.removeAttribute('inert');
+      element.removeAttribute('aria-hidden');
+    }
+    if (event.newState === 'closed') {
+      if (element instanceof HTMLElement) {
         // We use a microtask to let native focus restoration happen before making the element inert.
         // The browser restores focus after beforetoggle returns, during its close steps.
         queueMicrotask(function () {
@@ -265,13 +272,13 @@ export function useAnimatedVisibility(_ref5) {
           })) {
             return;
           }
+
+          // Exit animations keep closed content rendered, so make it non-interactive and hide it from assistive technology.
           element.setAttribute('inert', '');
           // Tooling does not consistently treat inert content as hidden, even though the browser does.
           element.setAttribute('aria-hidden', 'true');
         });
       }
-    }
-    if (event.newState === 'closed') {
       dispatch({
         type: 'exit-started'
       });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "4.4.4",
+	"version": "4.4.5",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",