@semcore/popper - npm Package Compare versions

Comparing version 5.37.0 to 5.37.1-prerelease.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [5.37.1] - 2024-07-04
+
+### Fixed
+
+- Fixed edge case when popper trigger contains multiple focusable elements and navigation between them was causing popper to close until browser focus wasn't moved out of trigger.
+
 ## [5.37.0] - 2024-06-26
@@ -124,3 +130,3 @@
 
-- Low level `explicitTriggerSet` api for more granular control over which element will be used as popper trigger.
+- Low level `explicitTriggerSet` API for more granular control over which element will be used as popper trigger.
 
@@ -241,3 +247,3 @@ ## [5.27.1] - 2024-04-15
 
-- `focusLoop` api that controls how browser focus behaves when goes out of popper.
+- `focusLoop` API that controls how browser focus behaves when goes out of popper.
 
@@ -330,3 +336,3 @@ ### Changed
 
-- Internal api to enable new focus lock scope.
+- Internal API to enable new focus lock scope.
 
@@ -569,3 +575,3 @@ ## [5.11.0] - 2023-12-04
 - Fixed corner case of focus return with `interaction=focus`.
-- Added `disableEnforceFocus` api prop.
+- Added `disableEnforceFocus` API prop.
 
@@ -781,3 +787,3 @@ ## [4.18.0] - 2023-06-06
 
-- Removed aria attributes that were breaking components a11y.
+- Removed aria attributes that were breaking components A11Y.
 
@@ -977,3 +983,3 @@ ## [4.11.29] - 2022-08-30
 
-- Add functionality for stop propagation of events from the `<Popper.Popper/>`, more details [here](https://github.com/facebook/react/issues/11387).
+- Add functionality for stop propagation of events from the `<Popper.Popper/>`, more details [in the React repository issue](https://github.com/facebook/react/issues/11387).
 
@@ -1060,3 +1066,3 @@ ## [4.4.2] - 2020-09-08
 
-- Появилась возможность добавления различных стилистических тем через css переменные
+- Появилась возможность добавления различных стилистических тем через CSS переменные
 - Появилась возможность оптицонально подключать адаптивноссть
@@ -1063,0 +1069,0 @@ - Появилась возможность изолировать стили даже в пределах одной страницы

lib/cjs/Popper.js

@@ -44,8 +44,8 @@ "use strict";
 /*__reshadow-styles__:"./style/popper.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SPopper_op3iy_gg_{outline:0;z-index:var(--intergalactic-z-index-popper, 700);color:var(--intergalactic-text-primary, #191b23)}.___SPopper_op3iy_gg_.__keyboardFocused_op3iy_gg_:focus:after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;border-radius:var(--intergalactic-popper-rounded, 6px)}.___SPopper_op3iy_gg_.__keyboardFocused_op3iy_gg_.__hideFocus_op3iy_gg_:focus:after{box-shadow:none}.___SFocusHint_op3iy_gg_{display:none}.___STrigger_op3iy_gg_:focus .___SFocusHint_op3iy_gg_,.___STrigger_op3iy_gg_:focus-within .___SFocusHint_op3iy_gg_{display:inline}" /*__inner_css_end__*/, "op3iy_gg_") /*__reshadow_css_end__*/, {
-  "__SPopper": "___SPopper_op3iy_gg_",
-  "_keyboardFocused": "__keyboardFocused_op3iy_gg_",
-  "_hideFocus": "__hideFocus_op3iy_gg_",
-  "__SFocusHint": "___SFocusHint_op3iy_gg_",
-  "__STrigger": "___STrigger_op3iy_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SPopper_xqn1z_gg_{outline:0;z-index:var(--intergalactic-z-index-popper, 700);color:var(--intergalactic-text-primary, #191b23)}.___SPopper_xqn1z_gg_.__keyboardFocused_xqn1z_gg_:focus:after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;border-radius:var(--intergalactic-popper-rounded, 6px)}.___SPopper_xqn1z_gg_.__keyboardFocused_xqn1z_gg_.__hideFocus_xqn1z_gg_:focus:after{box-shadow:none}.___SFocusHint_xqn1z_gg_{display:none}.___STrigger_xqn1z_gg_:focus .___SFocusHint_xqn1z_gg_,.___STrigger_xqn1z_gg_:focus-within .___SFocusHint_xqn1z_gg_{display:inline}" /*__inner_css_end__*/, "xqn1z_gg_") /*__reshadow_css_end__*/, {
+  "__SPopper": "___SPopper_xqn1z_gg_",
+  "_keyboardFocused": "__keyboardFocused_xqn1z_gg_",
+  "_hideFocus": "__hideFocus_xqn1z_gg_",
+  "__SFocusHint": "___SFocusHint_xqn1z_gg_",
+  "__STrigger": "___STrigger_xqn1z_gg_"
 });
@@ -211,4 +211,11 @@ function isObject(obj) {
       return function (e) {
+        var trigger = _this.triggerRef.current;
+        if (component === 'trigger' && action === 'onBlur') {
+          var focused = e.relatedTarget;
+          var blurred = e.target;
+          if (focused && blurred && (0, _hasParent.hasParent)(focused, trigger) && (0, _hasParent.hasParent)(blurred, trigger)) {
+            return;
+          }
+        }
         if (component === 'trigger' && action === 'onClick') {
-          var trigger = _this.triggerRef.current;
           var triggerClick = (0, _hasParent.hasParent)(e.target, trigger);
@@ -215,0 +222,0 @@ var associatedLabels = (0, _toConsumableArray2["default"])((trigger === null || trigger === void 0 ? void 0 : trigger.labels) || []);

lib/es6/Popper.js

@@ -38,8 +38,8 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 /*__reshadow-styles__:"./style/popper.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPopper_op3iy_gg_{outline:0;z-index:var(--intergalactic-z-index-popper, 700);color:var(--intergalactic-text-primary, #191b23)}.___SPopper_op3iy_gg_.__keyboardFocused_op3iy_gg_:focus:after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;border-radius:var(--intergalactic-popper-rounded, 6px)}.___SPopper_op3iy_gg_.__keyboardFocused_op3iy_gg_.__hideFocus_op3iy_gg_:focus:after{box-shadow:none}.___SFocusHint_op3iy_gg_{display:none}.___STrigger_op3iy_gg_:focus .___SFocusHint_op3iy_gg_,.___STrigger_op3iy_gg_:focus-within .___SFocusHint_op3iy_gg_{display:inline}" /*__inner_css_end__*/, "op3iy_gg_") /*__reshadow_css_end__*/, {
-  "__SPopper": "___SPopper_op3iy_gg_",
-  "_keyboardFocused": "__keyboardFocused_op3iy_gg_",
-  "_hideFocus": "__hideFocus_op3iy_gg_",
-  "__SFocusHint": "___SFocusHint_op3iy_gg_",
-  "__STrigger": "___STrigger_op3iy_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPopper_xqn1z_gg_{outline:0;z-index:var(--intergalactic-z-index-popper, 700);color:var(--intergalactic-text-primary, #191b23)}.___SPopper_xqn1z_gg_.__keyboardFocused_xqn1z_gg_:focus:after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;border-radius:var(--intergalactic-popper-rounded, 6px)}.___SPopper_xqn1z_gg_.__keyboardFocused_xqn1z_gg_.__hideFocus_xqn1z_gg_:focus:after{box-shadow:none}.___SFocusHint_xqn1z_gg_{display:none}.___STrigger_xqn1z_gg_:focus .___SFocusHint_xqn1z_gg_,.___STrigger_xqn1z_gg_:focus-within .___SFocusHint_xqn1z_gg_{display:inline}" /*__inner_css_end__*/, "xqn1z_gg_") /*__reshadow_css_end__*/, {
+  "__SPopper": "___SPopper_xqn1z_gg_",
+  "_keyboardFocused": "__keyboardFocused_xqn1z_gg_",
+  "_hideFocus": "__hideFocus_xqn1z_gg_",
+  "__SFocusHint": "___SFocusHint_xqn1z_gg_",
+  "__STrigger": "___STrigger_xqn1z_gg_"
 });
@@ -204,4 +204,11 @@ function isObject(obj) {
       return function (e) {
+        var trigger = _this.triggerRef.current;
+        if (component === 'trigger' && action === 'onBlur') {
+          var focused = e.relatedTarget;
+          var blurred = e.target;
+          if (focused && blurred && hasParent(focused, trigger) && hasParent(blurred, trigger)) {
+            return;
+          }
+        }
         if (component === 'trigger' && action === 'onClick') {
-          var trigger = _this.triggerRef.current;
           var triggerClick = hasParent(e.target, trigger);
@@ -208,0 +215,0 @@ var associatedLabels = _toConsumableArray((trigger === null || trigger === void 0 ? void 0 : trigger.labels) || []);

package.json

 {
   "name": "@semcore/popper",
   "description": "Semrush Popper Component",
-  "version": "5.37.0",
+  "version": "5.37.1-prerelease.0",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

270029

increased by0.73%

Lines of code

1894

increased by0.74%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes