@semcore/popper - npm Package Compare versions

Comparing version 4.7.1 to 4.7.2

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [4.7.2] - 2020-12-16
+
+### Fixed
+
+- Сomponent has become friendlier to SSR. Replace random generate number to get uid from function `useUID`.
+
 ## [4.7.1] - 2020-11-25
@@ -7,0 +13,0 @@

lib/cjs/arrowOffset.js

@@ -15,10 +15,10 @@ "use strict";
 var MAP_OFFSET = {
-  'top': 'width',
-  'bottom': 'width',
-  'left': 'height',
-  'right': 'height'
+  top: 'width',
+  bottom: 'width',
+  left: 'height',
+  right: 'height'
 };
 var MAP_COORDINATE = {
-  'width': 'x',
-  'height': 'y'
+  width: 'x',
+  height: 'y'
 };
@@ -25,0 +25,0 @@

lib/cjs/Popper.js

@@ -68,6 +68,6 @@ "use strict";
 
-var _getRandomInt = _interopRequireDefault(require("@semcore/utils/lib/getRandomInt"));
-
 var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
 
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -86,8 +86,8 @@
 /*__inner_css_start__*/
-".___SPopper_thnr7_gg_{outline:none;z-index:110}"
+".___SPopper_288sv_gg_{outline:none;z-index:110}"
 /*__inner_css_end__*/
-, "uaqseh_gg_")
+, "12hnbop_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SPopper": "___SPopper_thnr7_gg_"
+  "__SPopper": "___SPopper_288sv_gg_"
 }),
@@ -142,3 +142,2 @@ style = (0, _extends2["default"])({}, _ref);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "popper", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "controlsID", (0, _getRandomInt["default"])(1, 100000));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createTriggerRef", function (ref) {
@@ -386,3 +385,4 @@ if (ref && _this.triggerRef.current !== ref) {
           visible = _this$asProps4.visible,
-          interaction = _this$asProps4.interaction; // @ts-ignore
+          interaction = _this$asProps4.interaction,
+          uid = _this$asProps4.uid; // @ts-ignore
 
@@ -398,3 +398,3 @@ var _this$handlersFromInt = this.handlersFromInteraction(interaction, 'trigger', visible),
         'aria-pressed': visible,
-        'aria-describedby': this.controlsID
+        'aria-describedby': uid
       }, interactionProps), {}, {
@@ -412,3 +412,4 @@ onKeyDown: this.bindHandlerKeyDown(onKeyDown)
           popperZIndex = _this$asProps5.popperZIndex,
-          other = (0, _objectWithoutProperties2["default"])(_this$asProps5, ["visible", "disablePortal", "interaction", "popperZIndex"]); // @ts-ignore
+          uid = _this$asProps5.uid,
+          other = (0, _objectWithoutProperties2["default"])(_this$asProps5, ["visible", "disablePortal", "interaction", "popperZIndex", "uid"]); // @ts-ignore
 
@@ -428,3 +429,3 @@ var _this$handlersFromInt2 = this.handlersFromInteraction(interaction, 'popper', visible),
         triggerRef: this.triggerRef,
-        id: this.controlsID,
+        id: uid,
         visible: visible,
@@ -485,2 +486,3 @@ interaction: interaction,
 });
+(0, _defineProperty2["default"])(Popper, "enhance", [(0, _uniqueID["default"])()]);
 
@@ -516,6 +518,8 @@ function Trigger(props) {
     setNodesLock(node ? !(0, _focusLock.getFocusabledIn)(node).length : false);
-  });
+  }); // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+
   (0, _useEventListener["default"])(window, 'mousedown', function () {
     return setEventLock(true);
-  }, true);
+  }, true); // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+
   (0, _useEventListener["default"])(window, 'keydown', function () {
@@ -522,0 +526,0 @@ return setEventLock(false);

lib/es6/arrowOffset.js

 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import capitalizeFirstLetter from '@semcore/utils/lib/capitalizeFirstLetter';
 var MAP_OFFSET = {
-  'top': 'width',
-  'bottom': 'width',
-  'left': 'height',
-  'right': 'height'
+  top: 'width',
+  bottom: 'width',
+  left: 'height',
+  right: 'height'
 };
 var MAP_COORDINATE = {
-  'width': 'x',
-  'height': 'y'
+  width: 'x',
+  height: 'y'
 };
@@ -13,0 +13,0 @@

lib/es6/Popper.js

@@ -39,4 +39,4 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import canUseDOM from '@semcore/utils/lib/canUseDOM';
-import getRandomInt from '@semcore/utils/lib/getRandomInt';
 import logger from '@semcore/utils/lib/logger';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 
@@ -48,8 +48,8 @@ /*__reshadow-styles__:"./style/popper.shadow.css"*/
 /*__inner_css_start__*/
-".___SPopper_thnr7_gg_{outline:none;z-index:110}"
+".___SPopper_288sv_gg_{outline:none;z-index:110}"
 /*__inner_css_end__*/
-, "uaqseh_gg_")
+, "12hnbop_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SPopper": "___SPopper_thnr7_gg_"
+  "__SPopper": "___SPopper_288sv_gg_"
 }),
@@ -112,4 +112,2 @@ style = _extends({}, _ref);
 
-    _defineProperty(_assertThisInitialized(_this), "controlsID", getRandomInt(1, 100000));
-
     _defineProperty(_assertThisInitialized(_this), "createTriggerRef", function (ref) {
@@ -366,3 +364,4 @@ if (ref && _this.triggerRef.current !== ref) {
           visible = _this$asProps4.visible,
-          interaction = _this$asProps4.interaction; // @ts-ignore
+          interaction = _this$asProps4.interaction,
+          uid = _this$asProps4.uid; // @ts-ignore
 
@@ -378,3 +377,3 @@ var _this$handlersFromInt = this.handlersFromInteraction(interaction, 'trigger', visible),
         'aria-pressed': visible,
-        'aria-describedby': this.controlsID
+        'aria-describedby': uid
       }, interactionProps), {}, {
@@ -392,3 +391,4 @@ onKeyDown: this.bindHandlerKeyDown(onKeyDown)
           popperZIndex = _this$asProps5.popperZIndex,
-          other = _objectWithoutProperties(_this$asProps5, ["visible", "disablePortal", "interaction", "popperZIndex"]); // @ts-ignore
+          uid = _this$asProps5.uid,
+          other = _objectWithoutProperties(_this$asProps5, ["visible", "disablePortal", "interaction", "popperZIndex", "uid"]); // @ts-ignore
 
@@ -408,3 +408,3 @@
         triggerRef: this.triggerRef,
-        id: this.controlsID,
+        id: uid,
         visible: visible,
@@ -469,2 +469,4 @@ interaction: interaction,
 
+_defineProperty(Popper, "enhance", [uniqueIDEnhancement()]);
+
 function Trigger(props) {
@@ -499,6 +501,8 @@ var STrigger = props.Root;
     setNodesLock(node ? !getFocusabledIn(node).length : false);
-  });
+  }); // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+
   useEventListener(window, 'mousedown', function () {
     return setEventLock(true);
-  }, true);
+  }, true); // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+
   useEventListener(window, 'keydown', function () {
@@ -505,0 +509,0 @@ return setEventLock(false);

lib/types/Popper.d.ts

@@ -14,2 +14,3 @@ import { DOMAttributes, HTMLAttributes } from 'react';
 import { INeighborLocationProps } from '@semcore/neighbor-location';
+import { IUniqueIDProps } from '@semcore/utils/lib/uniqueID';
 export declare type eventInteraction = {
@@ -22,3 +23,3 @@ trigger: [Array<keyof DOMAttributes<unknown>>, Array<keyof DOMAttributes<unknown>>];
 export declare type Placement = Options['placement'];
-export interface IPopperProps extends IOutsideClickProps, IPortalProps {
+export interface IPopperProps extends IOutsideClickProps, IPortalProps, IUniqueIDProps {
     /**
@@ -25,0 +26,0 @@ * Popper может иметь разные варианты позиционирования

package.json

 {
   "name": "@semcore/popper",
   "description": "SEMRush Popper Component",
-  "version": "4.7.1",
+  "version": "4.7.2",
   "main": "lib/cjs/index.js",
@@ -20,3 +20,3 @@ "module": "lib/es6/index.js",
     "@semcore/portal": "^2",
-    "@semcore/utils": "^3.15",
+    "@semcore/utils": "^3.24",
     "focus-lock": "^0.6",
@@ -23,0 +23,0 @@ "react-focus-lock": "^2.3",

src/arrowOffset.ts

@@ -5,11 +5,11 @@ import { ModifierArguments, Options, Modifier } from '@popperjs/core/lib';
 const MAP_OFFSET = {
-  'top': 'width',
-  'bottom': 'width',
-  'left': 'height',
-  'right': 'height',
+  top: 'width',
+  bottom: 'width',
+  left: 'height',
+  right: 'height',
 };
 
 const MAP_COORDINATE = {
-  'width': 'x',
-  'height': 'y',
+  width: 'x',
+  height: 'y',
 };
@@ -22,3 +22,4 @@
     !state.modifiersData['popperOffsets']
-  ) return;
+  )
+    return;
 
@@ -25,0 +26,0 @@ const [position, align] = state.placement.split('-');

src/createPopper.ts

@@ -13,3 +13,3 @@ // @ts-ignore
   hide,
-  arrow
+  arrow,
 } from '@popperjs/core';
@@ -16,0 +16,0 @@ import arrowOffset from './arrowOffset';

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

180128

increased by0.76%

Lines of code

1969

increased by0.41%

Dependency changes

• Updated@semcore/utils@^3.24