@semcore/popper - npm Package Compare versions

Comparing version 5.39.4 to 5.39.5-prerelease.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [5.39.5] - 2024-09-02
+
+### Changed
+
+- Internal `ignoreFocus` logic on focusable trigger.
+
 ## [5.39.4] - 2024-08-20
@@ -7,0 +13,0 @@

lib/cjs/Popper.js

@@ -46,8 +46,8 @@ "use strict";
 /*__reshadow-styles__:"./style/popper.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SPopper_h02g3_gg_{outline:0;color:var(--intergalactic-text-primary, #191b23)}.___SPopper_h02g3_gg_.__keyboardFocused_h02g3_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_h02g3_gg_.__keyboardFocused_h02g3_gg_.__hideFocus_h02g3_gg_:focus:after{box-shadow:none}.___SFocusHint_h02g3_gg_{display:none}.___STrigger_h02g3_gg_:focus .___SFocusHint_h02g3_gg_,.___STrigger_h02g3_gg_:focus-within .___SFocusHint_h02g3_gg_{display:inline}" /*__inner_css_end__*/, "h02g3_gg_") /*__reshadow_css_end__*/, {
-  "__SPopper": "___SPopper_h02g3_gg_",
-  "_keyboardFocused": "__keyboardFocused_h02g3_gg_",
-  "_hideFocus": "__hideFocus_h02g3_gg_",
-  "__SFocusHint": "___SFocusHint_h02g3_gg_",
-  "__STrigger": "___STrigger_h02g3_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SPopper_1prbz_gg_{outline:0;color:var(--intergalactic-text-primary, #191b23)}.___SPopper_1prbz_gg_.__keyboardFocused_1prbz_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_1prbz_gg_.__keyboardFocused_1prbz_gg_.__hideFocus_1prbz_gg_:focus:after{box-shadow:none}.___SFocusHint_1prbz_gg_{display:none}.___STrigger_1prbz_gg_:focus .___SFocusHint_1prbz_gg_,.___STrigger_1prbz_gg_:focus-within .___SFocusHint_1prbz_gg_{display:inline}" /*__inner_css_end__*/, "1prbz_gg_") /*__reshadow_css_end__*/, {
+  "__SPopper": "___SPopper_1prbz_gg_",
+  "_keyboardFocused": "__keyboardFocused_1prbz_gg_",
+  "_hideFocus": "__hideFocus_1prbz_gg_",
+  "__SFocusHint": "___SFocusHint_1prbz_gg_",
+  "__STrigger": "___STrigger_1prbz_gg_"
 });
@@ -90,11 +90,8 @@ function isObject(obj) {
 var MODIFIERS_OPTIONS = ['offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners'];
-var Popper = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(Popper, _Component);
-  var _super = (0, _createSuper2["default"])(Popper);
-  // timer: ReturnType<typeof setTimeout>;
-  // observer: ResizeObserver;
-
-  function Popper(props) {
+var PopperRoot = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(PopperRoot, _Component);
+  var _super = (0, _createSuper2["default"])(PopperRoot);
+  function PopperRoot(props) {
     var _this;
-    (0, _classCallCheck2["default"])(this, Popper);
+    (0, _classCallCheck2["default"])(this, PopperRoot);
     _this = _super.call(this, props);
@@ -124,5 +121,3 @@ (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "eventsInteractionMap", {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "lastPopperReference", null);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      ignoreTriggerFocusUntil: 0
-    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "ignoreTriggerFocus", false);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "mouseEnterCursorPositionRef", {
@@ -245,5 +240,4 @@ current: null
         }
-        var now = Date.now();
         var focusAction = ['onFocus', 'onKeyboardFocus', 'onFocusCapture'].includes(action);
-        if (now < _this.state.ignoreTriggerFocusUntil && visible && component === 'trigger' && focusAction) {
+        if (_this.ignoreTriggerFocus && visible && component === 'trigger' && focusAction) {
           return;
@@ -279,9 +273,9 @@ }
             }
+            if (!visible && component === 'popper') {
+              _this.ignoreTriggerFocus = false;
+            }
           }, 0);
         });
-        var ignoringDuration = 2000;
-        if (!visible && ['onClick', 'onBlur', 'onKeyDown'].includes(action)) {
-          _this.setState({
-            ignoreTriggerFocusUntil: now + ignoringDuration
-          });
+        if (component === 'popper' && !visible && ['onClick', 'onBlur', 'onKeyDown'].includes(action)) {
+          _this.ignoreTriggerFocus = true;
         }
@@ -299,31 +293,7 @@ };
       clearTimeout(_this.timer);
-      if (_this.asProps.visible) {
-        _this.timer = setTimeout(function () {
-          handlers.visible(visible, e);
-        }, latency);
-        cb();
-      } else {
-        _this.timer = setTimeout(function () {
-          handlers.visible(visible, e);
-          cb();
-        }, latency);
-      }
+      _this.timer = setTimeout(function () {
+        handlers.visible(visible, e);
+      }, latency);
+      cb();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTriggerBlur", function () {
-      var timeout = _this.asProps.timeout;
-      var timeoutConfig = typeof timeout === 'number' ? [timeout, timeout] : timeout;
-      var delay = timeoutConfig[1];
-      clearTimeout(_this.triggerBlurTimeout);
-      /** Need to call timeout with delay as for hiding */
-      _this.triggerBlurTimeout = setTimeout(function () {
-        /** Need to check visible prop in next frame because this.asProps updates only after rerender */
-        requestAnimationFrame(function () {
-          if (!_this.asProps.visible) {
-            _this.setState({
-              ignoreTriggerFocusUntil: 0
-            });
-          }
-        });
-      }, delay);
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlePopperFocusOut", function (event) {
@@ -347,3 +317,3 @@ if (_this.asProps.focusLoop) return;
   }
-  (0, _createClass2["default"])(Popper, [{
+  (0, _createClass2["default"])(PopperRoot, [{
     key: "uncontrolledProps",
@@ -441,5 +411,3 @@ value: function uncontrolledProps() {
         disableEnforceFocus: disableEnforceFocus,
-        popperRef: this.popperRef,
-        /** order of handlers is important here! */
-        onBlur: (0, _assignProps3.callAllEventHandlers)(interactionProps.onBlur, this.handleTriggerBlur)
+        popperRef: this.popperRef
       });
@@ -509,7 +477,7 @@ }
   }]);
-  return Popper;
+  return PopperRoot;
 }(_core.Component);
-(0, _defineProperty2["default"])(Popper, "displayName", 'Popper');
-(0, _defineProperty2["default"])(Popper, "style", style);
-(0, _defineProperty2["default"])(Popper, "defaultProps", {
+(0, _defineProperty2["default"])(PopperRoot, "displayName", 'Popper');
+(0, _defineProperty2["default"])(PopperRoot, "style", style);
+(0, _defineProperty2["default"])(PopperRoot, "defaultProps", {
   defaultVisible: false,
@@ -528,3 +496,3 @@ placement: 'auto',
 });
-(0, _defineProperty2["default"])(Popper, "enhance", [(0, _uniqueID["default"])(), (0, _useCssVariable.cssVariableEnhance)({
+(0, _defineProperty2["default"])(PopperRoot, "enhance", [(0, _uniqueID["default"])(), (0, _useCssVariable.cssVariableEnhance)({
   variable: '--intergalactic-duration-popper',
@@ -544,3 +512,4 @@ fallback: '200',
     active = props.active,
-    popperRef = props.popperRef;
+    popperRef = props.popperRef,
+    forwardRef = props.forwardRef;
   var triggerRef = _react["default"].useRef();
@@ -555,6 +524,13 @@ _react["default"].useEffect(function () {
   var focusSourceRef = (0, _keyboardFocusEnhance.useFocusSource)();
-  var handleFocus = _react["default"].useCallback(function () {
-    if (focusSourceRef.current !== 'keyboard') return;
-    onKeyboardFocus === null || onKeyboardFocus === void 0 ? void 0 : onKeyboardFocus();
-  }, [onKeyboardFocus]);
+  var handleFocus = _react["default"].useCallback(function (e) {
+    if (focusSourceRef.current === 'keyboard' && (0, _hasParent.hasParent)(e.target, triggerRef.current)) {
+      onKeyboardFocus === null || onKeyboardFocus === void 0 ? void 0 : onKeyboardFocus();
+    }
+  }, [onKeyboardFocus, focusSourceRef.current, triggerRef.current]);
+  _react["default"].useEffect(function () {
+    document.addEventListener('focusin', handleFocus);
+    return function () {
+      document.removeEventListener('focusin', handleFocus);
+    };
+  }, []);
   var activeRef = _react["default"].useRef(active);
@@ -577,4 +553,3 @@ activeRef.current = active;
     "aria-haspopup": true,
-    "ref": triggerRef,
-    "onFocus": handleFocus,
+    "ref": (0, _ref5.forkRef)(triggerRef, forwardRef),
     "onBlur": props.onBlur
@@ -701,7 +676,8 @@ }, _ref), /*#__PURE__*/_react["default"].createElement(Children, null)), focusHint && false && /*#__PURE__*/_react["default"].createElement(SFocusHint, {
 PopperPopper.enhance = [(0, _keyboardFocusEnhance["default"])(false)];
-var _default = (0, _core["default"])(Popper, {
+var Popper = (0, _core["default"])(PopperRoot, {
   Trigger: Trigger,
   Popper: PopperPopper
 });
+var _default = Popper;
 exports["default"] = _default;
 //# sourceMappingURL=Popper.js.map

lib/es6/Popper.js

@@ -39,10 +39,11 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 /*__reshadow-styles__:"./style/popper.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPopper_h02g3_gg_{outline:0;color:var(--intergalactic-text-primary, #191b23)}.___SPopper_h02g3_gg_.__keyboardFocused_h02g3_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_h02g3_gg_.__keyboardFocused_h02g3_gg_.__hideFocus_h02g3_gg_:focus:after{box-shadow:none}.___SFocusHint_h02g3_gg_{display:none}.___STrigger_h02g3_gg_:focus .___SFocusHint_h02g3_gg_,.___STrigger_h02g3_gg_:focus-within .___SFocusHint_h02g3_gg_{display:inline}" /*__inner_css_end__*/, "h02g3_gg_") /*__reshadow_css_end__*/, {
-  "__SPopper": "___SPopper_h02g3_gg_",
-  "_keyboardFocused": "__keyboardFocused_h02g3_gg_",
-  "_hideFocus": "__hideFocus_h02g3_gg_",
-  "__SFocusHint": "___SFocusHint_h02g3_gg_",
-  "__STrigger": "___STrigger_h02g3_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPopper_1prbz_gg_{outline:0;color:var(--intergalactic-text-primary, #191b23)}.___SPopper_1prbz_gg_.__keyboardFocused_1prbz_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_1prbz_gg_.__keyboardFocused_1prbz_gg_.__hideFocus_1prbz_gg_:focus:after{box-shadow:none}.___SFocusHint_1prbz_gg_{display:none}.___STrigger_1prbz_gg_:focus .___SFocusHint_1prbz_gg_,.___STrigger_1prbz_gg_:focus-within .___SFocusHint_1prbz_gg_{display:inline}" /*__inner_css_end__*/, "1prbz_gg_") /*__reshadow_css_end__*/, {
+  "__SPopper": "___SPopper_1prbz_gg_",
+  "_keyboardFocused": "__keyboardFocused_1prbz_gg_",
+  "_hideFocus": "__hideFocus_1prbz_gg_",
+  "__SFocusHint": "___SFocusHint_1prbz_gg_",
+  "__STrigger": "___STrigger_1prbz_gg_"
 });
 import { useZIndexStacking, ZIndexStackingContextProvider } from '@semcore/utils/lib/zIndexStacking';
+import { forkRef } from '@semcore/utils/lib/ref';
 function isObject(obj) {
@@ -83,11 +84,8 @@ return _typeof(obj) === 'object' && !Array.isArray(obj);
 var MODIFIERS_OPTIONS = ['offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners'];
-var Popper = /*#__PURE__*/function (_Component) {
-  _inherits(Popper, _Component);
-  var _super = _createSuper(Popper);
-  // timer: ReturnType<typeof setTimeout>;
-  // observer: ResizeObserver;
-
-  function Popper(props) {
+var PopperRoot = /*#__PURE__*/function (_Component) {
+  _inherits(PopperRoot, _Component);
+  var _super = _createSuper(PopperRoot);
+  function PopperRoot(props) {
     var _this;
-    _classCallCheck(this, Popper);
+    _classCallCheck(this, PopperRoot);
     _this = _super.call(this, props);
@@ -117,5 +115,3 @@ _defineProperty(_assertThisInitialized(_this), "eventsInteractionMap", {
     _defineProperty(_assertThisInitialized(_this), "lastPopperReference", null);
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      ignoreTriggerFocusUntil: 0
-    });
+    _defineProperty(_assertThisInitialized(_this), "ignoreTriggerFocus", false);
     _defineProperty(_assertThisInitialized(_this), "mouseEnterCursorPositionRef", {
@@ -238,5 +234,4 @@ current: null
         }
-        var now = Date.now();
         var focusAction = ['onFocus', 'onKeyboardFocus', 'onFocusCapture'].includes(action);
-        if (now < _this.state.ignoreTriggerFocusUntil && visible && component === 'trigger' && focusAction) {
+        if (_this.ignoreTriggerFocus && visible && component === 'trigger' && focusAction) {
           return;
@@ -272,9 +267,9 @@ }
             }
+            if (!visible && component === 'popper') {
+              _this.ignoreTriggerFocus = false;
+            }
           }, 0);
         });
-        var ignoringDuration = 2000;
-        if (!visible && ['onClick', 'onBlur', 'onKeyDown'].includes(action)) {
-          _this.setState({
-            ignoreTriggerFocusUntil: now + ignoringDuration
-          });
+        if (component === 'popper' && !visible && ['onClick', 'onBlur', 'onKeyDown'].includes(action)) {
+          _this.ignoreTriggerFocus = true;
         }
@@ -292,31 +287,7 @@ };
       clearTimeout(_this.timer);
-      if (_this.asProps.visible) {
-        _this.timer = setTimeout(function () {
-          handlers.visible(visible, e);
-        }, latency);
-        cb();
-      } else {
-        _this.timer = setTimeout(function () {
-          handlers.visible(visible, e);
-          cb();
-        }, latency);
-      }
+      _this.timer = setTimeout(function () {
+        handlers.visible(visible, e);
+      }, latency);
+      cb();
     });
-    _defineProperty(_assertThisInitialized(_this), "handleTriggerBlur", function () {
-      var timeout = _this.asProps.timeout;
-      var timeoutConfig = typeof timeout === 'number' ? [timeout, timeout] : timeout;
-      var delay = timeoutConfig[1];
-      clearTimeout(_this.triggerBlurTimeout);
-      /** Need to call timeout with delay as for hiding */
-      _this.triggerBlurTimeout = setTimeout(function () {
-        /** Need to check visible prop in next frame because this.asProps updates only after rerender */
-        requestAnimationFrame(function () {
-          if (!_this.asProps.visible) {
-            _this.setState({
-              ignoreTriggerFocusUntil: 0
-            });
-          }
-        });
-      }, delay);
-    });
     _defineProperty(_assertThisInitialized(_this), "handlePopperFocusOut", function (event) {
@@ -340,3 +311,3 @@ if (_this.asProps.focusLoop) return;
   }
-  _createClass(Popper, [{
+  _createClass(PopperRoot, [{
     key: "uncontrolledProps",
@@ -434,5 +405,3 @@ value: function uncontrolledProps() {
         disableEnforceFocus: disableEnforceFocus,
-        popperRef: this.popperRef,
-        /** order of handlers is important here! */
-        onBlur: callAllEventHandlers(interactionProps.onBlur, this.handleTriggerBlur)
+        popperRef: this.popperRef
       });
@@ -502,7 +471,7 @@ }
   }]);
-  return Popper;
+  return PopperRoot;
 }(Component);
-_defineProperty(Popper, "displayName", 'Popper');
-_defineProperty(Popper, "style", style);
-_defineProperty(Popper, "defaultProps", {
+_defineProperty(PopperRoot, "displayName", 'Popper');
+_defineProperty(PopperRoot, "style", style);
+_defineProperty(PopperRoot, "defaultProps", {
   defaultVisible: false,
@@ -521,3 +490,3 @@ placement: 'auto',
 });
-_defineProperty(Popper, "enhance", [uniqueIDEnhancement(), cssVariableEnhance({
+_defineProperty(PopperRoot, "enhance", [uniqueIDEnhancement(), cssVariableEnhance({
   variable: '--intergalactic-duration-popper',
@@ -537,3 +506,4 @@ fallback: '200',
     active = props.active,
-    popperRef = props.popperRef;
+    popperRef = props.popperRef,
+    forwardRef = props.forwardRef;
   var triggerRef = React.useRef();
@@ -548,6 +518,13 @@ React.useEffect(function () {
   var focusSourceRef = useFocusSource();
-  var handleFocus = React.useCallback(function () {
-    if (focusSourceRef.current !== 'keyboard') return;
-    onKeyboardFocus === null || onKeyboardFocus === void 0 ? void 0 : onKeyboardFocus();
-  }, [onKeyboardFocus]);
+  var handleFocus = React.useCallback(function (e) {
+    if (focusSourceRef.current === 'keyboard' && hasParent(e.target, triggerRef.current)) {
+      onKeyboardFocus === null || onKeyboardFocus === void 0 ? void 0 : onKeyboardFocus();
+    }
+  }, [onKeyboardFocus, focusSourceRef.current, triggerRef.current]);
+  React.useEffect(function () {
+    document.addEventListener('focusin', handleFocus);
+    return function () {
+      document.removeEventListener('focusin', handleFocus);
+    };
+  }, []);
   var activeRef = React.useRef(active);
@@ -570,4 +547,3 @@ activeRef.current = active;
     "aria-haspopup": true,
-    "ref": triggerRef,
-    "onFocus": handleFocus,
+    "ref": forkRef(triggerRef, forwardRef),
     "onBlur": props.onBlur
@@ -694,6 +670,7 @@ }, _ref), /*#__PURE__*/React.createElement(Children, null)), focusHint && false && /*#__PURE__*/React.createElement(SFocusHint, {
 PopperPopper.enhance = [keyboardFocusEnhance(false)];
-export default createComponent(Popper, {
+var Popper = createComponent(PopperRoot, {
   Trigger: Trigger,
   Popper: PopperPopper
 });
+export default Popper;
 //# sourceMappingURL=Popper.js.map

package.json

 {
   "name": "@semcore/popper",
   "description": "Semrush Popper Component",
-  "version": "5.39.4",
+  "version": "5.39.5-prerelease.0",
   "main": "lib/cjs/index.js",
@@ -13,11 +13,11 @@ "module": "lib/es6/index.js",
     "@popperjs/core": "2.11.5",
-    "@semcore/animation": "2.31.2",
-    "@semcore/flex-box": "5.31.2",
-    "@semcore/neighbor-location": "4.29.2",
-    "@semcore/outside-click": "3.29.2",
-    "@semcore/portal": "3.31.2",
-    "@semcore/utils": "4.32.2"
+    "@semcore/animation": "2.32.0-prerelease.0",
+    "@semcore/flex-box": "5.32.0-prerelease.0",
+    "@semcore/neighbor-location": "4.30.0-prerelease.0",
+    "@semcore/outside-click": "3.30.0-prerelease.0",
+    "@semcore/portal": "3.32.0-prerelease.0",
+    "@semcore/utils": "4.35.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
+    "@semcore/core": "^2.30.0-prerelease.0",
     "react": "16.8 - 18",
@@ -24,0 +24,0 @@ "react-dom": "16.8 - 18"

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

Worsened metrics

Total package byte prevSize

275950

decreased by-1.33%

Lines of code

1897

decreased by-2.32%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@semcore/animation@2.32.0-prerelease.0(transitive)

• + Added@semcore/flex-box@5.32.0-prerelease.0(transitive)

• + Added@semcore/neighbor-location@4.30.0-prerelease.0(transitive)

• + Added@semcore/outside-click@3.30.0-prerelease.0(transitive)

• + Added@semcore/portal@3.32.0-prerelease.0(transitive)

• + Added@semcore/utils@4.35.0-prerelease.0(transitive)

• - Removed@semcore/animation@2.31.2(transitive)

• - Removed@semcore/flex-box@5.31.2(transitive)

• - Removed@semcore/neighbor-location@4.29.2(transitive)

• - Removed@semcore/outside-click@3.29.2(transitive)

• - Removed@semcore/portal@3.31.2(transitive)

• - Removed@semcore/utils@4.32.2(transitive)

• Updated@semcore/animation@2.32.0-prerelease.0

• Updated@semcore/flex-box@5.32.0-prerelease.0

• Updated@semcore/neighbor-location@4.30.0-prerelease.0

• Updated@semcore/outside-click@3.30.0-prerelease.0

• Updated@semcore/portal@3.32.0-prerelease.0

• Updated@semcore/utils@4.35.0-prerelease.0