@dnb/eufemia 9.16.0 → 9.17.0

package/components/pagination/PaginationInfinity.js

@@ -7,7 +7,6 @@ import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
@@ -35,7 +34,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import { warn, isTrue, dispatchCustomElementEvent } from '../../shared/component-helper';
+import { warn, isTrue, dispatchCustomElementEvent, getPreviousSibling } from '../../shared/component-helper';
 import Context from '../../shared/Context';
 import Button from '../button/Button';
 import { preparePageElement, isTrElement, PaginationIndicator } from './PaginationHelpers';
@@ -58,15 +57,20 @@ var InfinityScroller = function (_React$PureComponent) {
           startupPage = _this$context$paginat.startupPage,
           startup_count = _this$context$paginat.startup_count;
       var startupCount = parseFloat(startup_count);
+      var newPageNo, skipObserver, callStartupEvent, preventWaitForDelay;
 
-      for (var i = 0, newPageNo; i < startupCount; ++i) {
+      for (var i = 0; i < startupCount; ++i) {
         newPageNo = startupPage + i;
+        skipObserver = newPageNo < startupCount;
+        callStartupEvent = i === 0;
+        preventWaitForDelay = i <= startupCount - 1;
 
         _this.getNewContent(newPageNo, {
           position: 'after',
-          skipObserver: newPageNo < startupCount
+          skipObserver: skipObserver
         }, {
-          isStartup: i === 0
+          callStartupEvent: callStartupEvent,
+          preventWaitForDelay: preventWaitForDelay
         });
       }
     });
@@ -75,8 +79,10 @@ var InfinityScroller = function (_React$PureComponent) {
       var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
       var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-          _ref$isStartup = _ref.isStartup,
-          isStartup = _ref$isStartup === void 0 ? false : _ref$isStartup;
+          _ref$callStartupEvent = _ref.callStartupEvent,
+          callStartupEvent = _ref$callStartupEvent === void 0 ? false : _ref$callStartupEvent,
+          _ref$preventWaitForDe = _ref.preventWaitForDelay,
+          preventWaitForDelay = _ref$preventWaitForDe === void 0 ? false : _ref$preventWaitForDe;
 
       var _this$context$paginat2 = _this.context.pagination,
           pageCount = _this$context$paginat2.pageCount,
@@ -97,8 +103,9 @@ var InfinityScroller = function (_React$PureComponent) {
       var items = _this.context.pagination.prefillItems(newPageNo, props);
 
       _this.context.pagination.setItems(items, function () {
-        return _this.callEventHandler(newPageNo, {
-          isStartup: isStartup
+        _this.callEventHandler(newPageNo, {
+          callStartupEvent: callStartupEvent,
+          preventWaitForDelay: preventWaitForDelay
         });
       });
     });
@@ -121,61 +128,80 @@ var InfinityScroller = function (_React$PureComponent) {
     }
   }, {
     key: "waitForReachedTime",
-    value: function waitForReachedTime(fn) {
+    value: function waitForReachedTime(fn, params) {
       this.callbackBuffer = this.callbackBuffer || [];
-
-      for (var _len = arguments.length, props = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        props[_key - 1] = arguments[_key];
-      }
-
       this.callbackBuffer.push({
         fn: fn,
-        props: props
+        params: params
+      });
+      this.callBuffer({
+        minTime: params.preventWaitForDelay ? -1 : this.context.pagination.minTime
       });
-      this.callBuffer();
     }
   }, {
     key: "callBuffer",
     value: function callBuffer() {
       var _this2 = this;
 
-      var minTime = this.context.pagination.minTime;
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref2$minTime = _ref2.minTime,
+          minTime = _ref2$minTime === void 0 ? this.context.pagination.minTime : _ref2$minTime;
+
+      if (this.callbackBuffer.length === 0) {
+        return;
+      }
+
       var diff = this._lastCall > 0 ? new Date().getTime() - this._lastCall : 0;
       var waitTime = diff < minTime ? minTime : 0;
-      clearTimeout(this._bufferTimeout);
-      this._bufferTimeout = setTimeout(function () {
+
+      var nextTick = function nextTick() {
         if (_this2.callbackBuffer.length > 0) {
           _this2._lastCall = new Date().getTime();
 
           var _this2$callbackBuffer = _this2.callbackBuffer.shift(),
               fn = _this2$callbackBuffer.fn,
-              props = _this2$callbackBuffer.props;
+              params = _this2$callbackBuffer.params;
 
-          fn.apply(void 0, _toConsumableArray(props));
+          fn(params);
 
-          _this2.callBuffer();
+          _this2.callBuffer({
+            minTime: params.preventWaitForDelay ? -1 : minTime
+          });
         }
-      }, waitTime);
+      };
+
+      if (minTime > 0) {
+        clearTimeout(this._bufferTimeout);
+        this._bufferTimeout = setTimeout(nextTick, waitTime);
+      } else {
+        nextTick();
+      }
     }
   }, {
     key: "callEventHandler",
     value: function callEventHandler(pageNumber) {
       var _this3 = this;
 
-      var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-          _ref2$isStartup = _ref2.isStartup,
-          isStartup = _ref2$isStartup === void 0 ? false : _ref2$isStartup,
-          _ref2$callOnEnd = _ref2.callOnEnd,
-          callOnEnd = _ref2$callOnEnd === void 0 ? false : _ref2$callOnEnd,
-          _ref2$onDispatch = _ref2.onDispatch,
-          onDispatch = _ref2$onDispatch === void 0 ? null : _ref2$onDispatch;
-
-      this.waitForReachedTime(function (_ref3) {
-        var pageNumber = _ref3.pageNumber,
-            isStartup = _ref3.isStartup;
+      var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref3$callStartupEven = _ref3.callStartupEvent,
+          callStartupEvent = _ref3$callStartupEven === void 0 ? false : _ref3$callStartupEven,
+          _ref3$preventWaitForD = _ref3.preventWaitForDelay,
+          preventWaitForDelay = _ref3$preventWaitForD === void 0 ? false : _ref3$preventWaitForD,
+          _ref3$callOnEnd = _ref3.callOnEnd,
+          callOnEnd = _ref3$callOnEnd === void 0 ? false : _ref3$callOnEnd,
+          _ref3$onDispatch = _ref3.onDispatch,
+          onDispatch = _ref3$onDispatch === void 0 ? null : _ref3$onDispatch;
+
+      this.waitForReachedTime(function (_ref4) {
+        var pageNumber = _ref4.pageNumber,
+            callStartupEvent = _ref4.callStartupEvent;
         var context = _this3.context.pagination;
 
         var createEvent = function createEvent(eventName) {
+          if (isNaN(pageNumber)) {
+            pageNumber = 1;
+          }
+
           var ret = dispatchCustomElementEvent(context, eventName, _objectSpread({
             page: pageNumber,
             pageNo: pageNumber,
@@ -194,7 +220,7 @@ var InfinityScroller = function (_React$PureComponent) {
         if (callOnEnd) {
           createEvent('on_end');
         } else {
-          if (isStartup) {
+          if (callStartupEvent) {
             createEvent('on_startup');
           } else {
             createEvent('on_change');
@@ -204,7 +230,8 @@ var InfinityScroller = function (_React$PureComponent) {
         }
       }, {
         pageNumber: pageNumber,
-        isStartup: isStartup
+        callStartupEvent: callStartupEvent,
+        preventWaitForDelay: preventWaitForDelay
       });
     }
   }, {
@@ -216,35 +243,55 @@ var InfinityScroller = function (_React$PureComponent) {
       var _this$context$paginat3 = this.context.pagination,
           lowerPage = _this$context$paginat3.lowerPage,
           upperPage = _this$context$paginat3.upperPage,
+          currentPage = _this$context$paginat3.currentPage,
           pageCount = _this$context$paginat3.pageCount,
           hasEndedInfinity = _this$context$paginat3.hasEndedInfinity,
           parallelLoadCount = _this$context$paginat3.parallelLoadCount,
+          debug = _this$context$paginat3.debug,
+          current_page = _this$context$paginat3.current_page,
           fallback_element = _this$context$paginat3.fallback_element,
           marker_element = _this$context$paginat3.marker_element,
           indicator_element = _this$context$paginat3.indicator_element;
 
+      if (debug) {
+        console.info('PaginationInfinity.render', {
+          current_page: current_page,
+          lowerPage: lowerPage,
+          upperPage: upperPage,
+          currentPage: currentPage,
+          pageCount: pageCount
+        });
+      }
+
       var Marker = function Marker() {
         return React.createElement(InteractionMarker, {
+          debug: debug,
           pageNumber: upperPage,
           markerElement: marker_element || fallback_element,
           onVisible: function onVisible(pageNumber) {
-            var _loop = function _loop(i, _newPageNo) {
-              _newPageNo = pageNumber + 1 + i;
+            if (debug) {
+              console.info('PaginationInfinity.onVisible', {
+                pageNumber: pageNumber
+              });
+            }
+
+            var newPageNo;
+
+            var _loop = function _loop(i) {
+              newPageNo = pageNumber + 1 + i;
 
               _this4.context.pagination.onPageUpdate(function () {
                 _this4.context.pagination.setState({
-                  upperPage: _newPageNo,
+                  upperPage: newPageNo,
                   skipObserver: i + 1 < parallelLoadCount
                 });
               });
 
-              _this4.callEventHandler(_newPageNo);
-
-              newPageNo = _newPageNo;
+              _this4.callEventHandler(newPageNo);
             };
 
-            for (var i = 0, newPageNo; i < parallelLoadCount; ++i) {
-              _loop(i, newPageNo);
+            for (var i = 0; i < parallelLoadCount; ++i) {
+              _loop(i);
             }
           }
         });
@@ -271,7 +318,7 @@ var InfinityScroller = function (_React$PureComponent) {
         });
       };
 
-      return React.createElement(React.Fragment, null, lowerPage > 1 && React.createElement(LoadButton, null), children, !hasEndedInfinity && (typeof pageCount === 'undefined' || upperPage < pageCount) && React.createElement(Marker, null), !hasEndedInfinity && !this.hideIndicator && (typeof pageCount === 'undefined' || upperPage < pageCount) && React.createElement(PaginationIndicator, {
+      return React.createElement(React.Fragment, null, parseFloat(current_page) > 0 && lowerPage > 1 && React.createElement(LoadButton, null), children, !hasEndedInfinity && parseFloat(current_page) > 0 && (typeof pageCount === 'undefined' || upperPage < pageCount) && React.createElement(Marker, null), !hasEndedInfinity && !this.hideIndicator && (typeof pageCount === 'undefined' || upperPage < pageCount) && React.createElement(PaginationIndicator, {
         indicator_element: indicator_element || fallback_element
       }));
     }
@@ -292,40 +339,43 @@ var InfinityScroller = function (_React$PureComponent) {
           marker_element = _this$context$paginat4.marker_element,
           indicator_element = _this$context$paginat4.indicator_element;
 
-      if (this.context.pagination.useMarkerOnly) {
-        return this.handleInfinityMarker();
-      }
-
       if (!(items && items.length > 0)) {
         clearTimeout(this._startupTimeout);
         this._startupTimeout = setTimeout(this.startup, 1);
         return null;
       }
 
+      if (this.context.pagination.useMarkerOnly) {
+        return this.handleInfinityMarker();
+      }
+
       var Element = preparePageElement(page_element || React.Fragment);
-      return items.map(function (_ref4, idx) {
-        var pageNumber = _ref4.pageNumber,
-            hasContent = _ref4.hasContent,
-            content = _ref4.content,
-            ref = _ref4.ref,
-            skipObserver = _ref4.skipObserver,
-            ScrollElement = _ref4.ScrollElement;
+      return items.map(function (_ref5, idx) {
+        var pageNumber = _ref5.pageNumber,
+            hasContent = _ref5.hasContent,
+            content = _ref5.content,
+            ref = _ref5.ref,
+            skipObserver = _ref5.skipObserver,
+            ScrollElement = _ref5.ScrollElement;
         var isLastItem = idx === items.length - 1;
         var Elem = hasContent && ScrollElement || Element;
         var marker = hasContent && !_this5.useLoadButton && !skipObserver && !hasEndedInfinity && (typeof pageCount === 'undefined' || pageNumber <= pageCount) && React.createElement(InteractionMarker, {
           pageNumber: pageNumber,
           markerElement: marker_element || fallback_element,
           onVisible: function onVisible(pageNumber) {
-            for (var i = 0, _newPageNo2; i < parallelLoadCount; ++i) {
-              _newPageNo2 = pageNumber + 1 + i;
+            var newPageNo;
+
+            for (var i = 0; i < parallelLoadCount; ++i) {
+              newPageNo = pageNumber + 1 + i;
 
-              _this5.getNewContent(_newPageNo2, {
+              _this5.getNewContent(newPageNo, {
                 position: 'after',
                 skipObserver: i + 1 < parallelLoadCount
               });
             }
           }
         });
+        var showIndicator = (parallelLoadCount > 1 && idx > 0 ? isLastItem : true) && !hasContent && !_this5.hideIndicator;
         return React.createElement(Elem, {
           key: pageNumber,
           ref: ref
@@ -339,7 +389,7 @@ var InfinityScroller = function (_React$PureComponent) {
               event: event
             });
           }
-        }), placeMakerBeforeContent && marker, content, !placeMakerBeforeContent && marker, (parallelLoadCount > 1 && idx > 0 ? isLastItem : true) && !hasContent && !_this5.hideIndicator && React.createElement(PaginationIndicator, {
+        }), placeMakerBeforeContent && marker, content, !placeMakerBeforeContent && marker, showIndicator && React.createElement(PaginationIndicator, {
           indicator_element: indicator_element || fallback_element
         }), hasContent && _this5.useLoadButton && isLastItem && (typeof pageCount === 'undefined' || pageNumber < pageCount) && React.createElement(InfinityLoadButton, {
           element: fallback_element,
@@ -439,15 +489,33 @@ var InteractionMarker = function (_React$PureComponent2) {
         this._isMounted = true;
         (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.observe(this._ref.current);
       }
+
+      if (this.props.debug) {
+        var height = this.getContentHeight();
+        console.info('PaginationInfinity.getContentHeight', height);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$intersectionObs2;
-
       this._isMounted = false;
-      clearTimeout(this._readyTimeout);
-      (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.disconnect();
+
+      if (this.intersectionObserver) {
+        clearTimeout(this._readyTimeout);
+        this.intersectionObserver.disconnect();
+      }
+    }
+  }, {
+    key: "getContentHeight",
+    value: function getContentHeight() {
+      var height = 0;
+
+      try {
+        var sibling = getPreviousSibling('dnb-table', this._ref.current);
+        height = parseFloat(window.getComputedStyle(sibling.querySelector('tbody')).height);
+      } catch (e) {}
+
+      return height;
     }
   }, {
     key: "render",
@@ -473,10 +541,12 @@ var InteractionMarker = function (_React$PureComponent2) {
 }(React.PureComponent);
 
 _defineProperty(InteractionMarker, "defaultProps", {
+  debug: null,
   markerElement: null
 });
 
 process.env.NODE_ENV !== "production" ? InteractionMarker.propTypes = {
+  debug: PropTypes.bool,
   pageNumber: PropTypes.number.isRequired,
   onVisible: PropTypes.func.isRequired,
   markerElement: PropTypes.oneOfType([PropTypes.object, PropTypes.node, PropTypes.func, PropTypes.string])
@@ -491,8 +561,8 @@ export var InfinityLoadButton = function (_React$PureComponent3) {
 
     _classCallCheck(this, InfinityLoadButton);
 
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
     _this7 = _super3.call.apply(_super3, [this].concat(args));

package/components/pagination/PaginationProvider.js

@@ -20,6 +20,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import "core-js/modules/es.parse-float.js";
 import "core-js/modules/es.array.find.js";
 import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.find-index.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 
@@ -54,7 +55,7 @@ var PaginationProvider = function (_React$PureComponent) {
         newContent = [newContent, content];
       }
 
-      var pageNumber = parseFloat(newContent[0]);
+      var pageNumber = parseFloat(newContent[0]) || 1;
       newContent = newContent[1];
 
       if (typeof newContent === 'function') {
@@ -73,8 +74,7 @@ var PaginationProvider = function (_React$PureComponent) {
 
         if (!itemToPrepare) {
           items = _this.prefillItems(pageNumber, {
-            position: position,
-            skipObserver: true
+            position: position
           });
           itemToPrepare = items.find(function (_ref2) {
             var p = _ref2.pageNumber;
@@ -90,8 +90,7 @@ var PaginationProvider = function (_React$PureComponent) {
 
         _this.setState({
           items: _toConsumableArray(items || _this.state.items),
-          currentPage: pageNumber,
-          _listenForPropChanges: false
+          currentPage: pageNumber
         }, _this.callOnPageUpdate);
       }
     });
@@ -100,8 +99,7 @@ var PaginationProvider = function (_React$PureComponent) {
       clearTimeout(_this.resetContentTimeout);
       _this.resetContentTimeout = setTimeout(function () {
         _this.setState({
-          items: [],
-          _listenForPropChanges: false
+          items: []
         });
       }, 10);
     });
@@ -109,39 +107,29 @@ var PaginationProvider = function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "resetInfinity", function () {
       var pageNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.startupPage;
       var lowerPage = pageNumber;
-      var upperPage = pageNumber;
+      var upperPage = pageNumber + parseFloat(_this.props.startup_count) - 1;
       var currentPage = pageNumber;
-      _this._hasEndedInfinity = true;
 
       _this.setState({
+        items: [],
         hasEndedInfinity: true,
         lowerPage: lowerPage,
         upperPage: upperPage,
-        currentPage: currentPage,
-        _listenForPropChanges: false
+        currentPage: currentPage
       });
 
-      clearTimeout(_this.resetInfinityTimeout);
-      _this.resetInfinityTimeout = setTimeout(function () {
-        _this.startInfinity();
-      }, _this.state.minTime);
+      _this.startInfinity();
     });
 
     _defineProperty(_assertThisInitialized(_this), "startInfinity", function () {
-      _this._hasEndedInfinity = false;
-
       _this.setState({
-        hasEndedInfinity: false,
-        _listenForPropChanges: false
+        hasEndedInfinity: false
       });
     });
 
     _defineProperty(_assertThisInitialized(_this), "endInfinity", function () {
-      _this._hasEndedInfinity = true;
-
       _this.setState({
-        hasEndedInfinity: true,
-        _listenForPropChanges: false
+        hasEndedInfinity: true
       }, function () {
         var pageNumber = _this.state.currentPage + 1;
         dispatchCustomElementEvent(_assertThisInitialized(_this), 'on_end', _objectSpread({
@@ -154,8 +142,7 @@ var PaginationProvider = function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "setItems", function (items, cb) {
       _this.setState({
-        items: items,
-        _listenForPropChanges: false
+        items: items
       }, cb);
     });
 
@@ -164,6 +151,19 @@ var PaginationProvider = function (_React$PureComponent) {
       var items = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.state.items;
       var position = props.position || (pageNumber < _this.state.currentPage ? 'before' : 'after');
 
+      if (isNaN(pageNumber)) {
+        pageNumber = 1;
+      }
+
+      var exists = items.findIndex(function (_ref3) {
+        var p = _ref3.pageNumber;
+        return p === pageNumber;
+      }) > -1;
+
+      if (exists) {
+        return items;
+      }
+
       var obj = _objectSpread({
         pageNumber: pageNumber,
         position: position,
@@ -180,9 +180,7 @@ var PaginationProvider = function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "setStateHandler", function (state, cb) {
-      _this.setState(_objectSpread(_objectSpread({}, state), {}, {
-        _listenForPropChanges: false
-      }), cb);
+      _this.setState(_objectSpread({}, state), cb);
     });
 
     _defineProperty(_assertThisInitialized(_this), "callOnPageUpdate", function () {
@@ -221,13 +219,12 @@ var PaginationProvider = function (_React$PureComponent) {
 
     _this.state = {
       items: [],
-      isLoading: false,
-      _listenForPropChanges: true
+      isLoading: false
     };
 
     if (_props.rerender) {
-      _this.rerender = function (_ref3) {
-        var store = _ref3.current;
+      _this.rerender = function (_ref4) {
+        var store = _ref4.current;
 
         if (store && store.pageNumber > 0) {
           clearTimeout(_this.rerenderTimeout);
@@ -287,9 +284,9 @@ var PaginationProvider = function (_React$PureComponent) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref4) {
-      var current = _ref4.current_page,
-          content = _ref4.internalContent;
+    value: function componentDidUpdate(_ref5) {
+      var current = _ref5.current_page,
+          content = _ref5.internalContent;
       var _this$props2 = this.props,
           internalContent = _this$props2.internalContent,
           current_page = _this$props2.current_page;
@@ -326,8 +323,7 @@ var PaginationProvider = function (_React$PureComponent) {
             setItems: this.setItems,
             prefillItems: this.prefillItems,
             setState: this.setStateHandler,
-            onPageUpdate: this.onPageUpdate,
-            _hasEndedInfinity: this._hasEndedInfinity
+            onPageUpdate: this.onPageUpdate
           }, this.props), this.state)
         })
       }, children);
@@ -335,48 +331,48 @@ var PaginationProvider = function (_React$PureComponent) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
-      if (state._listenForPropChanges) {
-        if (props.page_count !== null) {
-          state.pageCount = parseFloat(props.page_count) || 1;
-        }
+      if (props.page_count !== null) {
+        state.pageCount = parseFloat(props.page_count) || 1;
+      }
 
-        if (props.current_page !== null && typeof state.currentPage === 'undefined') {
-          state.currentPage = parseFloat(props.current_page) || 1;
-        }
+      if (props.current_page !== null && typeof state.currentPage === 'undefined') {
+        state.currentPage = parseFloat(props.current_page) || 1;
+      }
 
-        if (typeof state.startupPage === 'undefined') {
-          state.startupPage = parseFloat(props.startup_page) || parseFloat(props.current_page) || 1;
-        }
+      if (typeof state.startupPage !== 'number') {
+        state.startupPage = parseFloat(props.startup_page) || parseFloat(props.current_page) || state.currentPage;
+      }
 
-        state.parallelLoadCount = parseFloat(props.parallel_load_count) || 1;
-        state.minTime = parseFloat(props.min_wait_time) || 0;
-        state.placeMakerBeforeContent = isTrue(props.place_maker_before_content);
+      state.parallelLoadCount = parseFloat(props.parallel_load_count) || 1;
+      state.minTime = parseFloat(props.min_wait_time) || 0;
+      state.placeMakerBeforeContent = isTrue(props.place_maker_before_content);
 
-        if (props.useMarkerOnly) {
-          if (!state.lowerPage) {
-            state.lowerPage = state.upperPage = state.startupPage;
-          }
-        }
+      if (props.useMarkerOnly && props.reset_pagination_handler !== null && isTrue(props.reset_pagination_handler)) {
+        state.lowerPage = undefined;
+        state.upperPage = undefined;
+      }
 
-        if (props.reset_pagination_handler !== null && isTrue(props.reset_pagination_handler)) {
-          if (props.useMarkerOnly) {
-            state.lowerPage = state.upperPage = state.startupPage;
-          }
+      if (props.useMarkerOnly) {
+        if (typeof state.lowerPage === 'undefined' && parseFloat(props.current_page) > 0) {
+          state.lowerPage = state.startupPage;
         }
 
-        if (props.reset_content_handler !== null && isTrue(props.reset_content_handler)) {
-          state.items = [];
-          state.pageCount = parseFloat(props.page_count) || 1;
+        if (typeof state.upperPage === 'undefined') {
+          state.upperPage = state.startupPage + parseFloat(props.startup_count) - 1;
         }
+      }
 
-        if (typeof props.items === 'string' && props.items[0] === '[') {
-          state.items = JSON.parse(props.items);
-        } else if (Array.isArray(props.items)) {
-          state.items = props.items;
-        }
+      if (props.reset_content_handler !== null && isTrue(props.reset_content_handler)) {
+        state.items = [];
+        state.pageCount = parseFloat(props.page_count) || 1;
+      }
+
+      if (typeof props.items === 'string' && props.items[0] === '[') {
+        state.items = JSON.parse(props.items);
+      } else if (Array.isArray(props.items)) {
+        state.items = props.items;
       }
 
-      state._listenForPropChanges = true;
       return state;
     }
   }]);

package/components/pagination/style/dnb-pagination.css

@@ -281,7 +281,7 @@
   .dnb-form-status[hidden] {
     display: none; }
   .dnb-form-status--no-animation,
-  .dnb-form-status html[data-visual-test] {
+  html[data-visual-test] .dnb-form-status {
     -webkit-transition-duration: 1ms !important;
             transition-duration: 1ms !important; }
   @media screen and (-ms-high-contrast: none) {