@folklore/ads 0.0.106 → 0.0.108

package/dist/cjs.js

@@ -905,6 +905,7 @@ function useAdsTracking() {
 
 function useAd(path, size) {
   let {
+    id,
     sizeMapping = null,
     viewport = null,
     targeting = null,
@@ -969,6 +970,7 @@ function useAd(path, size) {
       return itViewport.join('x') === viewportSize.join('x');
     }) || [] : [];
     const newSlot = path !== null && !disabled ? adsManager.createSlot(path, viewportFixedSize || size, {
+      id,
       visible: isVisible,
       sizeMapping: viewportFixedSize === null ? sizeMapping : null,
       targeting,
@@ -987,7 +989,7 @@ function useAd(path, size) {
     //         adsManager.destroySlot(newSlot);
     //     }
     // };
-  }, [adsManager, path, disabled, size, sizeMapping, viewport, categoryExclusions]);
+  }, [adsManager, path, disabled, size, sizeMapping, viewport, categoryExclusions, id]);
   React.useEffect(() => {
     if (slot !== null) {
       slot.setTargeting(targeting);
@@ -1165,6 +1167,7 @@ const propTypes = {
   shouldKeepSize: PropTypes.bool,
   withoutStyle: PropTypes.bool,
   withoutMinimumSize: PropTypes.bool,
+  withReactId: PropTypes.bool,
   className: PropTypes.string,
   emptyClassName: PropTypes.string,
   adClassName: PropTypes.string,
@@ -1190,6 +1193,7 @@ function Ad(_ref) {
     shouldKeepSize = false,
     withoutStyle = false,
     withoutMinimumSize = false,
+    withReactId = false,
     className = null,
     emptyClassName = null,
     adClassName = null,
@@ -1280,6 +1284,8 @@ function Ad(_ref) {
   //     }
   // }, [disabled]);
 
+  const reactId = React.useId();
+
   // Create ad
   const {
     id,
@@ -1291,6 +1297,7 @@ function Ad(_ref) {
     refObserver,
     slot: slotObject = null
   } = useAd(path, size, {
+    id: withReactId ? `ad-${reactId}` : null,
     viewport,
     sizeMapping,
     targeting,
@@ -1327,7 +1334,7 @@ function Ad(_ref) {
     adStyle = minimumSize;
   }
   let containerStyle = null;
-  if (disabled) {
+  if (disabled && !keepSize) {
     containerStyle = {
       display: 'none',
       visibility: 'hidden'

package/dist/es.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
 import isObject from 'lodash/isObject';
-import React, { useContext, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import React, { useContext, useState, useRef, useMemo, useEffect, useCallback, useId } from 'react';
 import isArray from 'lodash/isArray';
 import sortBy from 'lodash/sortBy';
 import uniqBy from 'lodash/uniqBy';
@@ -903,6 +903,7 @@ function useAdsTracking() {
 
 function useAd(path, size) {
   let {
+    id,
     sizeMapping = null,
     viewport = null,
     targeting = null,
@@ -967,6 +968,7 @@ function useAd(path, size) {
       return itViewport.join('x') === viewportSize.join('x');
     }) || [] : [];
     const newSlot = path !== null && !disabled ? adsManager.createSlot(path, viewportFixedSize || size, {
+      id,
       visible: isVisible,
       sizeMapping: viewportFixedSize === null ? sizeMapping : null,
       targeting,
@@ -985,7 +987,7 @@ function useAd(path, size) {
     //         adsManager.destroySlot(newSlot);
     //     }
     // };
-  }, [adsManager, path, disabled, size, sizeMapping, viewport, categoryExclusions]);
+  }, [adsManager, path, disabled, size, sizeMapping, viewport, categoryExclusions, id]);
   useEffect(() => {
     if (slot !== null) {
       slot.setTargeting(targeting);
@@ -1163,6 +1165,7 @@ const propTypes = {
   shouldKeepSize: PropTypes.bool,
   withoutStyle: PropTypes.bool,
   withoutMinimumSize: PropTypes.bool,
+  withReactId: PropTypes.bool,
   className: PropTypes.string,
   emptyClassName: PropTypes.string,
   adClassName: PropTypes.string,
@@ -1188,6 +1191,7 @@ function Ad(_ref) {
     shouldKeepSize = false,
     withoutStyle = false,
     withoutMinimumSize = false,
+    withReactId = false,
     className = null,
     emptyClassName = null,
     adClassName = null,
@@ -1278,6 +1282,8 @@ function Ad(_ref) {
   //     }
   // }, [disabled]);
 
+  const reactId = useId();
+
   // Create ad
   const {
     id,
@@ -1289,6 +1295,7 @@ function Ad(_ref) {
     refObserver,
     slot: slotObject = null
   } = useAd(path, size, {
+    id: withReactId ? `ad-${reactId}` : null,
     viewport,
     sizeMapping,
     targeting,
@@ -1325,7 +1332,7 @@ function Ad(_ref) {
     adStyle = minimumSize;
   }
   let containerStyle = null;
-  if (disabled) {
+  if (disabled && !keepSize) {
     containerStyle = {
       display: 'none',
       visibility: 'hidden'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/ads",
-    "version": "0.0.106",
+    "version": "0.0.108",
     "description": "Ads library",
     "keywords": [
         "javascript",
@@ -50,7 +50,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5dcc85d03e017aecc2d19a4fa174382ece4a3225",
+    "gitHead": "c3ad873dea501878a1cde879dbf16ab83d270493",
     "dependencies": {
         "@folklore/hooks": "^0.0.72",
         "@folklore/tracking": "^0.0.29",