@ebay/ui-core-react 3.7.0 → 3.8.0

package/ebay-pagination/const.d.ts

@@ -1,3 +1,6 @@
 export declare const MIN_PAGES = 1;
 export declare const MAX_PAGES = 9;
+export declare const MIN_VISIBLE_ITEMS = 4;
+export declare const LEADING_SPACE_WITH_DOT = 2;
+export declare const TRAILING_SPACE_WITH_DOT: number;
 //# sourceMappingURL=const.d.ts.map

package/ebay-pagination/const.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/const.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,IAAI,CAAA;AAC1B,eAAO,MAAM,SAAS,IAAI,CAAA"}
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/const.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,IAAI,CAAA;AAC1B,eAAO,MAAM,SAAS,IAAI,CAAA;AAC1B,eAAO,MAAM,iBAAiB,IAAI,CAAA;AAClC,eAAO,MAAM,sBAAsB,IAAI,CAAA;AACvC,eAAO,MAAM,uBAAuB,QAAqC,CAAA"}

package/ebay-pagination/const.js

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MAX_PAGES = exports.MIN_PAGES = void 0;
+exports.TRAILING_SPACE_WITH_DOT = exports.LEADING_SPACE_WITH_DOT = exports.MIN_VISIBLE_ITEMS = exports.MAX_PAGES = exports.MIN_PAGES = void 0;
 exports.MIN_PAGES = 1;
 exports.MAX_PAGES = 9;
+exports.MIN_VISIBLE_ITEMS = 4;
+exports.LEADING_SPACE_WITH_DOT = 2;
+exports.TRAILING_SPACE_WITH_DOT = exports.MAX_PAGES - exports.LEADING_SPACE_WITH_DOT;

package/ebay-pagination/helpers.d.ts

@@ -1,5 +1,5 @@
 import { ItemState, PaginationVariant } from './types';
-export declare function pageNumbersAround(totalPages: number, selectedPage: number, maxVisiblePages?: number, withDots?: boolean): ItemState[];
+export declare function pageNumbersAround(totalPages: number, selectedPage: number, maxVisiblePages?: number, variant?: PaginationVariant): ItemState[];
 export declare function calcPageState(selectedPage: number, visiblePages: number, totalPages: number, variant?: PaginationVariant): ItemState[];
 /**
  * Calculates the maximum width for an element within its container.

package/ebay-pagination/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/helpers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEtD,wBAAgB,iBAAiB,CAC7B,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,EACpB,eAAe,GAAE,MAAmB,EACpC,QAAQ,UAAQ,GACjB,SAAS,EAAE,CA6Bb;AAED,wBAAgB,aAAa,CACzB,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,OAAO,GAAE,iBAAgC,GAC1C,SAAS,EAAE,CAQb;AAaD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,CAAC,EAAE,WAAW,GAAG,MAAM,CASpD"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/helpers.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEtD,wBAAgB,iBAAiB,CAC7B,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,EACpB,eAAe,GAAE,MAAmB,EACpC,OAAO,GAAE,iBAAwB,GAClC,SAAS,EAAE,CA4Db;AAED,wBAAgB,aAAa,CACzB,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,OAAO,GAAE,iBAAgC,GAC1C,SAAS,EAAE,CASb;AAaD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,CAAC,EAAE,WAAW,GAAG,MAAM,CASpD"}

package/ebay-pagination/helpers.js

@@ -2,15 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMaxWidth = exports.calcPageState = exports.pageNumbersAround = void 0;
 var const_1 = require("./const");
-function pageNumbersAround(totalPages, selectedPage, maxVisiblePages, withDots) {
+function pageNumbersAround(totalPages, selectedPage, maxVisiblePages, variant) {
     if (maxVisiblePages === void 0) { maxVisiblePages = totalPages; }
-    if (withDots === void 0) { withDots = false; }
+    if (variant === void 0) { variant = null; }
+    var withDots = variant === 'show-last' || (variant === 'overflow' && totalPages > const_1.MAX_PAGES);
+    var hasLeadingDots = variant === 'overflow' && totalPages > const_1.MAX_PAGES;
     var visibleItems = Math.min(maxVisiblePages, totalPages);
     var startIndexWithoutDots = Math.max(0, selectedPage - Math.ceil((visibleItems - 1) / 2));
-    var startIndexWithDots = visibleItems < 4 ? selectedPage :
+    var startIndexWithDots = visibleItems < const_1.MIN_VISIBLE_ITEMS ? selectedPage :
         Math.max(0, selectedPage - Math.floor((visibleItems - 1) / 2));
     var endIndex = (withDots ? startIndexWithDots : startIndexWithoutDots) + visibleItems;
     var closeToEnd = endIndex >= totalPages;
+    var closeToFront = selectedPage <= const_1.MIN_VISIBLE_ITEMS;
     var visibleRangeWithDots = function (start, end) {
         var items = visibleRange(totalPages, start, end);
         if (visibleItems > 2) {
@@ -23,12 +26,36 @@ function pageNumbersAround(totalPages, selectedPage, maxVisiblePages, withDots)
         }
         return items;
     };
-    if (closeToEnd) {
+    // middle show item[1] (...) and item[item.length - 1] (...)
+    var visibleRangeWithOverflowDots = function (start, end) {
+        // Following Dot
+        if (closeToFront) {
+            return visibleRangeWithDots(0, end);
+            // Leading Dot
+        }
+        else if (closeToEnd) {
+            var items_1 = visibleRange(totalPages, totalPages - const_1.TRAILING_SPACE_WITH_DOT, totalPages);
+            items_1[0] = 'visible';
+            items_1[1] = 'dots';
+            return items_1;
+        }
+        // Middle case with Leading & Following Dots
+        var items = visibleRange(totalPages, selectedPage - const_1.LEADING_SPACE_WITH_DOT, selectedPage + const_1.LEADING_SPACE_WITH_DOT + 1);
+        items[0] = 'visible';
+        items[1] = closeToFront ? 'visible' : 'dots';
+        items[totalPages - 2] = 'dots';
+        items[totalPages - 1] = 'visible';
+        return items;
+    };
+    if (closeToEnd && totalPages <= const_1.MAX_PAGES) {
         return visibleRange(totalPages, totalPages - visibleItems);
     }
-    return withDots ?
-        visibleRangeWithDots(startIndexWithDots, endIndex) :
-        visibleRange(totalPages, startIndexWithoutDots, endIndex);
+    if (withDots) {
+        return hasLeadingDots ?
+            visibleRangeWithOverflowDots(startIndexWithDots, endIndex) :
+            visibleRangeWithDots(startIndexWithDots, endIndex);
+    }
+    return visibleRange(totalPages, startIndexWithoutDots, endIndex);
 }
 exports.pageNumbersAround = pageNumbersAround;
 function calcPageState(selectedPage, visiblePages, totalPages, variant) {
@@ -36,8 +63,9 @@ function calcPageState(selectedPage, visiblePages, totalPages, variant) {
     if (selectedPage === -1) {
         return [];
     }
-    var adjustedNumPages = clamp(Math.min(totalPages, visiblePages), const_1.MIN_PAGES, const_1.MAX_PAGES);
-    return pageNumbersAround(totalPages, selectedPage - 1, adjustedNumPages, variant === 'show-last');
+    var adjustedNumPages = variant === 'overflow' ? const_1.MAX_PAGES :
+        clamp(Math.min(totalPages, visiblePages), const_1.MIN_PAGES, const_1.MAX_PAGES);
+    return pageNumbersAround(totalPages, selectedPage - 1, adjustedNumPages, variant);
 }
 exports.calcPageState = calcPageState;
 function clamp(n, min, max) {

package/ebay-pagination/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/pagination.tsx"],"names":[],"mappings":"AAAA,OAAc,EACA,cAAc,EAAE,EAAE,EAE/B,MAAM,OAAO,CAAA;AAMd,OAAO,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEtD,aAAK,kBAAkB,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAC9D,aAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,eAAe,CAoGvC,CAAA;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/pagination.tsx"],"names":[],"mappings":"AAAA,OAAc,EACA,cAAc,EAAE,EAAE,EAE/B,MAAM,OAAO,CAAA;AAUd,OAAO,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEtD,aAAK,kBAAkB,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAC9D,aAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,eAAe,CA+JvC,CAAA;AAED,eAAe,cAAc,CAAA"}

package/ebay-pagination/pagination.js

@@ -52,6 +52,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var ebay_fake_menu_button_1 = require("../ebay-fake-menu-button");
 var classnames_1 = __importDefault(require("classnames"));
 var debounce_1 = require("../common/debounce");
 var helpers_1 = require("./helpers");
@@ -78,10 +79,13 @@ var EbayPagination = function (_a) {
             0;
     };
     var _l = react_1.useState([]), page = _l[0], setPage = _l[1];
-    var updatePages = function () {
-        var selectedPageIndex = childPageRefs.current.findIndex(function (pageRef) { var _a; return ((_a = pageRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-current')) === 'page'; });
+    var _m = react_1.useState(0), selectedIndex = _m[0], setSelectedIndex = _m[1];
+    // selectedPageIndexFromDotMenu: override pageIndex on pagination with dot menu value
+    var updatePages = function (selectedPageIndexFromDotMenu) {
+        var selectedPageIndex = selectedPageIndexFromDotMenu || childPageRefs.current.findIndex(function (pageRef) { var _a; return ((_a = pageRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-current')) === 'page'; });
         var visiblePageItems = getNumOfVisiblePageItems();
         var pageState = helpers_1.calcPageState(selectedPageIndex, visiblePageItems, totalPages, variant);
+        setSelectedIndex(selectedPageIndex);
         setPage(__spreadArrays(['hidden'], pageState));
     };
     react_1.useEffect(function () {
@@ -94,17 +98,54 @@ var EbayPagination = function (_a) {
     }, [children]);
     var createChildItems = function (itemType) {
         var pageIndex = 0;
+        var firstDotItems = [];
+        var secondDotItems = [];
+        var allDotItems = [];
+        var firstDot = page.indexOf('dots');
+        var lastDot = page.lastIndexOf('dots');
         return react_1.Children.map(children, function (item, index) {
             var _a = item.props, _b = _a.type, type = _b === void 0 ? 'page' : _b, current = _a.current, disabled = _a.disabled, href = _a.href, text = _a.children;
+            var isDot = page[index] === 'dots';
+            var key = id + "-item-" + index;
+            var hide = page[index] === 'hidden';
             var newProps = {
                 type: type, current: current, disabled: disabled, href: href,
-                children: page[index] === 'dots' ? '…' : text,
+                children: isDot ? '…' : text,
                 pageIndex: type === 'page' ? pageIndex++ : undefined,
-                key: id + "-item-" + index,
-                hide: page[index] === 'hidden',
+                key: key,
+                hide: hide,
                 onPrevious: onPrevious, onNext: onNext, onSelect: onSelect, a11yPreviousText: a11yPreviousText, a11yNextText: a11yNextText,
                 ref: childPageRefs.current[index]
             };
+            // include hidden numbers & number of (...)itself
+            if ((hide || isDot) && type === 'page') {
+                var itemComponent = (react_1.default.createElement(ebay_fake_menu_button_1.EbayFakeMenuButtonItem, { key: key, href: href, onClick: function (event) {
+                        if (!href) {
+                            event.preventDefault();
+                        }
+                        var currentTarget = event.currentTarget;
+                        onSelect(event, currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.innerText, pageIndex);
+                        updatePages(Number(currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.innerText));
+                    } }, text));
+                if (firstDot === lastDot) {
+                    allDotItems.push(itemComponent);
+                }
+                if (selectedIndex - 2 > firstDot && index < selectedIndex) {
+                    firstDotItems.push(itemComponent);
+                }
+                if (selectedIndex + 2 < lastDot && index > selectedIndex) {
+                    secondDotItems.push(itemComponent);
+                }
+            }
+            if (itemType === 'page' && isDot && variant === 'overflow') {
+                var childComponent = allDotItems;
+                if (firstDot !== lastDot) {
+                    childComponent = index === 2 ? firstDotItems : secondDotItems;
+                }
+                return (react_1.default.createElement("li", { key: key },
+                    react_1.default.createElement("span", { className: "pagination__item", role: "separator" },
+                        react_1.default.createElement(ebay_fake_menu_button_1.EbayFakeMenuButton, { a11yText: "Menu", borderless: true, variant: "overflow", noToggleIcon: true }, childComponent))));
+            }
             return itemType === type ? react_1.cloneElement(item, newProps) : null;
         });
     };

package/ebay-pagination/types.d.ts

@@ -1,3 +1,3 @@
 export declare type ItemState = 'visible' | 'hidden' | 'dots';
-export declare type PaginationVariant = 'show-last' | 'show-range';
+export declare type PaginationVariant = 'show-last' | 'show-range' | 'overflow';
 //# sourceMappingURL=types.d.ts.map

package/ebay-pagination/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAA;AACrD,oBAAY,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAA;AACrD,oBAAY,iBAAiB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "Skin components build off React",
   "main": "index.js",
   "types": "index.d.ts",
@@ -41,7 +41,7 @@
   "author": "tmanyanov@ebay.com",
   "license": "ISC",
   "peerDependencies": {
-    "@ebay/skin": "^15.0.0",
+    "@ebay/skin": "^15.2.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },