@ebay/ui-core-react 1.0.0

package/ebay-notice-base/components/ebay-notice-title/notice-title.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+declare const EbayNoticeTitle: FC;
+export default EbayNoticeTitle;
+//# sourceMappingURL=notice-title.d.ts.map

package/ebay-notice-base/components/ebay-notice-title/notice-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-title.d.ts","sourceRoot":"","sources":["../../../../src/ebay-notice-base/components/ebay-notice-title/notice-title.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAa,MAAM,OAAO,CAAA;AAM5C,QAAA,MAAM,eAAe,EAAE,EAItB,CAAA;AAED,eAAe,eAAe,CAAA"}

package/ebay-notice-base/components/ebay-notice-title/notice-title.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var EbayNoticeTitle = function (_a) {
+    var children = _a.children;
+    return (react_1.default.createElement("span", { className: "page-notice__title" }, children));
+};
+exports.default = EbayNoticeTitle;

package/ebay-notice-base/index.d.ts

@@ -0,0 +1,3 @@
+export { EbayNoticeTitle } from './components/ebay-notice-title';
+export { EbayNoticeContent } from './components/ebay-notice-content';
+//# sourceMappingURL=index.d.ts.map

package/ebay-notice-base/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-notice-base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA"}

package/ebay-notice-base/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ebay_notice_title_1 = require("./components/ebay-notice-title");
+Object.defineProperty(exports, "EbayNoticeTitle", { enumerable: true, get: function () { return ebay_notice_title_1.EbayNoticeTitle; } });
+var ebay_notice_content_1 = require("./components/ebay-notice-content");
+Object.defineProperty(exports, "EbayNoticeContent", { enumerable: true, get: function () { return ebay_notice_content_1.EbayNoticeContent; } });

package/ebay-notice-content/README.md

@@ -0,0 +1,6 @@
+# DEPRECATED
+Use those instead:
+- `import { EbayNoticeContent } from '@ebay/ui-core-react/ebay-notice-base`
+- `import { EbayNoticeContent } from '@ebay/ui-core-react/ebay-page-notice`
+- `import { EbayNoticeContent } from '@ebay/ui-core-react/ebay-section-notice`
+- `import { EbayNoticeContent } from '@ebay/ui-core-react/ebay-inline-notice`

package/ebay-notice-content/index.d.ts

@@ -0,0 +1,2 @@
+export { EbayNoticeContent } from '../ebay-notice-base';
+//# sourceMappingURL=index.d.ts.map

package/ebay-notice-content/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-notice-content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/ebay-notice-content/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ebay_notice_base_1 = require("../ebay-notice-base");
+Object.defineProperty(exports, "EbayNoticeContent", { enumerable: true, get: function () { return ebay_notice_base_1.EbayNoticeContent; } });

package/ebay-page-notice/README.md

@@ -0,0 +1,48 @@
+# ebay-page-notice
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-page-notice--confirmation-message)
+
+## Import JS
+
+```jsx harmony
+import {
+    EbayPageNotice,
+    EbayNoticeContent,
+    EbayPageNoticeTitle,
+    EbayPageNoticeFooter,
+} from '@ebay/ui-core-react/ebay-page-notice'
+```
+
+### Import following styles from SKIN
+
+```jsx harmony
+import "@ebay/skin/page-notice";
+```
+
+## Use
+
+```jsx harmony
+<EbayPageNotice status="attention">
+    <EbayNoticeContent>
+        <EbayPageNoticeTitle>Your order's in!</EbayPageNoticeTitle>
+        <p>
+            <strong>Error.</strong> Please take another look at the following:
+            <br />
+            <a href="#">Card number</a>, <a href="#">Expiration date</a> &amp; <a href="#">Security code</a>.
+        </p>
+    </EbayNoticeContent>
+    <EbaySectionNoticeFooter>
+        <EbayButton>Action</EbayButton>
+    </EbaySectionNoticeFooter>
+</EbayPageNotice>
+```
+
+## Attributes
+
+| Name         | Type                                                                          | Stateful | Description                                                                                                                                 | Default       |
+| ------------ | ----------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `status`     | String ( `"general"`,`"attention"`, `"confirmation"`, or `"information"`) | No       | Determines the style and type of notice to be displayed                                                                                     | `"general"` |
+| `aria-label` | String                                                                        | No       | The description of the notice itself for screen readers. Check out [this issue](https://github.com/eBay/skin/issues/1001) for more context. | -             |
+| `children`   | React Node                                                                    | No       | The content to be displayed within the notice                                                                                               | -             |

package/ebay-page-notice/index.d.ts

@@ -0,0 +1,5 @@
+export { default as EbayPageNotice } from './page-notice';
+export { default as EbayPageNoticeTitle } from './page-notice-title';
+export { default as EbayPageNoticeFooter } from './page-notice-footer';
+export { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content';
+//# sourceMappingURL=index.d.ts.map

package/ebay-page-notice/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA"}

package/ebay-page-notice/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var page_notice_1 = require("./page-notice");
+Object.defineProperty(exports, "EbayPageNotice", { enumerable: true, get: function () { return page_notice_1.default; } });
+var page_notice_title_1 = require("./page-notice-title");
+Object.defineProperty(exports, "EbayPageNoticeTitle", { enumerable: true, get: function () { return page_notice_title_1.default; } });
+var page_notice_footer_1 = require("./page-notice-footer");
+Object.defineProperty(exports, "EbayPageNoticeFooter", { enumerable: true, get: function () { return page_notice_footer_1.default; } });
+var ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
+Object.defineProperty(exports, "EbayNoticeContent", { enumerable: true, get: function () { return ebay_notice_content_1.EbayNoticeContent; } });

package/ebay-page-notice/page-notice-footer.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+declare type Props = {
+    className?: string;
+    children?: ReactNode;
+};
+declare const EbayPageNoticeFooter: FC<Props>;
+export default EbayPageNoticeFooter;
+//# sourceMappingURL=page-notice-footer.d.ts.map

package/ebay-page-notice/page-notice-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-notice-footer.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/page-notice-footer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAG5C,aAAK,KAAK,GAAG;IACT,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAA;AAED,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,KAAK,CAInC,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/ebay-page-notice/page-notice-footer.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var notice_footer_1 = __importDefault(require("../common/notice-utils/notice-footer"));
+var EbayPageNoticeFooter = function (_a) {
+    var className = _a.className, children = _a.children;
+    return (react_1.default.createElement(notice_footer_1.default, { className: className, type: "page" }, children));
+};
+exports.default = EbayPageNoticeFooter;

package/ebay-page-notice/page-notice-title.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+declare type Props = React.HTMLProps<HTMLHeadingElement> & {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    className?: string;
+};
+declare const EbayPageNoticeTitle: FC<Props>;
+export default EbayPageNoticeTitle;
+//# sourceMappingURL=page-notice-title.d.ts.map

package/ebay-page-notice/page-notice-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-notice-title.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/page-notice-title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjC,aAAK,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,mBAAmB,EAAE,EAAE,CAAC,KAAK,CAIlC,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/ebay-page-notice/page-notice-title.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var notice_title_1 = __importDefault(require("../common/notice-utils/notice-title"));
+var EbayPageNoticeTitle = function (_a) {
+    var className = _a.className, as = _a.as, children = _a.children, rest = __rest(_a, ["className", "as", "children"]);
+    return (react_1.default.createElement(notice_title_1.default, __assign({}, rest, { className: className, as: as, type: "page" }), children));
+};
+exports.default = EbayPageNoticeTitle;

package/ebay-page-notice/page-notice.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+declare type Props = React.HTMLProps<HTMLElement> & {
+    status?: 'general' | 'attention' | 'confirmation' | 'information';
+    'aria-label'?: string;
+};
+declare const EbayPageNotice: FC<Props>;
+export default EbayPageNotice;
+//# sourceMappingURL=page-notice.d.ts.map

package/ebay-page-notice/page-notice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-notice.d.ts","sourceRoot":"","sources":["../../src/ebay-page-notice/page-notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAA;AAK/C,aAAK,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAgC7B,CAAA;AAED,eAAe,cAAc,CAAA"}

package/ebay-page-notice/page-notice.js

@@ -0,0 +1,45 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
+var ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
+var icon_1 = __importDefault(require("../ebay-icon/icon"));
+var EbayPageNotice = function (_a) {
+    var _b = _a.status, status = _b === void 0 ? 'general' : _b, children = _a.children, ariaLabel = _a["aria-label"], rest = __rest(_a, ["status", "children", 'aria-label']);
+    var childrenArray = react_1.default.Children.toArray(children);
+    var content = childrenArray.find(function (child) { return child.type === ebay_notice_content_1.EbayNoticeContent; });
+    if (!content) {
+        throw new Error("EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice");
+    }
+    return (react_1.default.createElement("section", __assign({}, rest, { "aria-labelledby": status + "-status", className: "page-notice " + (status !== "general" ? "page-notice--" + status : ""), role: "region" }),
+        status !== "general" ? (react_1.default.createElement("div", { className: "page-notice__header", id: status + "-status" },
+            react_1.default.createElement(icon_1.default, { name: status + "-filled", a11yText: ariaLabel, a11yVariant: "label" }))) : null,
+        react_1.default.createElement(notice_content_1.default, __assign({}, content.props, { type: "page" })),
+        children));
+};
+exports.default = EbayPageNotice;

package/ebay-pagination/README.md

@@ -0,0 +1,72 @@
+# EbayPagination
+
+The `<EbayPagination>` is a tag used to create a pagination navigation. It will display up to 9 page links.
+If pagination doesn't fit the page it will adjust to the available width.
+
+## Import JS
+```jsx harmony
+import { EbayPagination, EbayPaginationItem } from '@ebay/ui-core-react/ebay-pagination'
+```
+
+## Import styles from Skin
+```jsx harmony
+import '@ebay/skin/pagination'
+import '@ebay/skin/utility'
+```
+
+### or if using CSS/SCSS
+```jsx
+import '@ebay/skin/pagination.css'
+import '@ebay/skin/utility.css'
+```
+
+### EbayPagination Usage
+
+```React
+<EbayPagination a11yPreviousText="Previous page" a11yNextText="Next page" a11yCurrentText="Results Pagination - Page 2">
+    <EbayPaginationItem href="#" type="previous" disabled/>
+    <EbayPaginationItem href="#" current>item 1</EbayPaginationItem>
+    <EbayPaginationItem href="#">item 2</EbayPaginationItem>
+    <EbayPaginationItem href="#">item 3</EbayPaginationItem>
+    <EbayPaginationItem href="#" type="next"/>
+</EbayPagination>
+```
+
+### EbayPagination Attributes
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+`a11yPreviousText` | String | No | a11y text for previous arrow button
+`a11yNextText` | String | No | a11y text for next arrow button
+`a11yCurrentText` | String | No | Description for the current page (e.g. Results of Page 1)
+`variant` | String | No | Either `show-last`, or `show-range` (default). If show-last then will show the last page always and will put `…` between the last visible range and the last page. `…` and the last page will take up two items in the range. `…` will be hidden when the range to the last item is fully visible.
+`fluid` | Boolean | No | Will fill all available horizontal space. Horizontal space will be distributed around each item as necessary.
+
+### EbayPagination Events
+
+Event | Data | Description
+--- | --- | ---
+`onPrevious` | `{ originalEvent }`| clicked previous arrow button
+`onNext` | `{ originalEvent }` | clicked next arrow button
+`onSelect` | `{ originalEvent, value, index }` | page selected clicked
+
+## EbayPaginationItem Tag
+
+### EbayPaginationItem Usage
+
+```React
+<EbayPaginationItem>1</EbayPaginationItem>
+```
+
+### EbayPaginationItem Attributes
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+`disabled` | Boolean | No | Previous/next button is disabled or not
+`href` | String | No | for link that looks like a menu-item; omitting the href will switch to a button
+`current` | Boolean | No | the current page
+`type` | String | No | "previous", "next" or "page"(default). To specify if the information entered is for the previous or next arrow button or a page. If the `type='previous|next'` isn't provided the previous/next arrow buttons will be taken as `disabled`
+
+Notes:
+
+* If you want to have client side or ajax based navigation then you should omit the `href` attribute on each item. This will cause each item to be `<button>` instead of an `<a>`.

package/ebay-pagination/const.d.ts

@@ -0,0 +1,3 @@
+export declare const MIN_PAGES = 1;
+export declare const MAX_PAGES = 9;
+//# sourceMappingURL=const.d.ts.map

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

@@ -0,0 +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"}

package/ebay-pagination/const.js

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

package/ebay-pagination/helpers.d.ts

@@ -0,0 +1,11 @@
+import { ItemState, PaginationVariant } from './types';
+export declare function pageNumbersAround(totalPages: number, selectedPage: number, maxVisiblePages?: number, withDots?: boolean): ItemState[];
+export declare function calcPageState(selectedPage: number, visiblePages: number, totalPages: number, variant?: PaginationVariant): ItemState[];
+/**
+ * Calculates the maximum width for an element within its container.
+ *
+ * Based on eBayUI Core Marko implementation.
+ * See https://github.com/eBay/ebayui-core/blob/v8.6.0/src/components/ebay-pagination/component.js#L119-L132
+ */
+export declare function getMaxWidth(el?: HTMLElement): number;
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +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"}

package/ebay-pagination/helpers.js

@@ -0,0 +1,67 @@
+"use strict";
+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) {
+    if (maxVisiblePages === void 0) { maxVisiblePages = totalPages; }
+    if (withDots === void 0) { withDots = false; }
+    var visibleItems = Math.min(maxVisiblePages, totalPages);
+    var startIndexWithoutDots = Math.max(0, selectedPage - Math.ceil((visibleItems - 1) / 2));
+    var startIndexWithDots = visibleItems < 4 ? selectedPage :
+        Math.max(0, selectedPage - Math.floor((visibleItems - 1) / 2));
+    var endIndex = (withDots ? startIndexWithDots : startIndexWithoutDots) + visibleItems;
+    var closeToEnd = endIndex >= totalPages;
+    var visibleRangeWithDots = function (start, end) {
+        var items = visibleRange(totalPages, start, end);
+        if (visibleItems > 2) {
+            items[end - 2] = 'dots';
+            items[end - 1] = 'hidden';
+            items[totalPages - 1] = 'visible';
+        }
+        else if (visibleItems > 1) {
+            items[end - 1] = 'dots';
+        }
+        return items;
+    };
+    if (closeToEnd) {
+        return visibleRange(totalPages, totalPages - visibleItems);
+    }
+    return withDots ?
+        visibleRangeWithDots(startIndexWithDots, endIndex) :
+        visibleRange(totalPages, startIndexWithoutDots, endIndex);
+}
+exports.pageNumbersAround = pageNumbersAround;
+function calcPageState(selectedPage, visiblePages, totalPages, variant) {
+    if (variant === void 0) { variant = 'show-range'; }
+    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');
+}
+exports.calcPageState = calcPageState;
+function clamp(n, min, max) {
+    // eslint-disable-next-line no-nested-ternary
+    return n <= min ? min : n >= max ? max : n;
+}
+function visibleRange(totalItems, start, end) {
+    return Array(totalItems)
+        .fill('hidden')
+        .fill('visible', start, end);
+}
+/**
+ * Calculates the maximum width for an element within its container.
+ *
+ * Based on eBayUI Core Marko implementation.
+ * See https://github.com/eBay/ebayui-core/blob/v8.6.0/src/components/ebay-pagination/component.js#L119-L132
+ */
+function getMaxWidth(el) {
+    if (!el) {
+        return 0;
+    }
+    el.style.width = '100vw';
+    var result = el.offsetWidth;
+    el.style.width = null;
+    return result;
+}
+exports.getMaxWidth = getMaxWidth;

package/ebay-pagination/index.d.ts

@@ -0,0 +1,4 @@
+export { default as EbayPagination } from './pagination';
+export { default as EbayPaginationItem } from './pagination-item';
+export { PaginationVariant } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA"}

package/ebay-pagination/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var pagination_1 = require("./pagination");
+Object.defineProperty(exports, "EbayPagination", { enumerable: true, get: function () { return pagination_1.default; } });
+var pagination_item_1 = require("./pagination-item");
+Object.defineProperty(exports, "EbayPaginationItem", { enumerable: true, get: function () { return pagination_item_1.default; } });

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

@@ -0,0 +1,23 @@
+import React, { Key, ReactNode, RefObject, StyleHTMLAttributes, MouseEvent, ComponentProps } from 'react';
+export declare type PaginationItemType = 'previous' | 'next' | 'page';
+declare type HtmlProps = Omit<ComponentProps<'button'>, 'type'> & ComponentProps<'a'> & ComponentProps<'li'>;
+export declare type PaginationItemProps = HtmlProps & {
+    pageIndex?: number;
+    key?: Key;
+    type?: PaginationItemType;
+    current?: boolean;
+    disabled?: boolean;
+    href?: string;
+    hide?: boolean;
+    a11yPreviousText?: string;
+    a11yNextText?: string;
+    onSelect?: (e: MouseEvent | KeyboardEvent, value: string, index: number) => void;
+    onNext?: (e: MouseEvent | KeyboardEvent) => void;
+    onPrevious?: (e: MouseEvent | KeyboardEvent) => void;
+    style?: StyleHTMLAttributes<HTMLButtonElement & HTMLAnchorElement>;
+    forwardedRef?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
+    children?: ReactNode;
+};
+declare const _default: React.ForwardRefExoticComponent<Pick<PaginationItemProps, "form" | "slot" | "style" | "title" | "type" | "download" | "name" | "className" | "forwardedRef" | "color" | "id" | "lang" | "media" | "target" | "role" | "tabIndex" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "hrefLang" | "ping" | "rel" | "referrerPolicy" | "hide" | "pageIndex" | "current" | "a11yPreviousText" | "a11yNextText" | "onNext" | "onPrevious"> & React.RefAttributes<React.FC<PaginationItemProps>>>;
+export default _default;
+//# sourceMappingURL=pagination-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-item.d.ts","sourceRoot":"","sources":["../../src/ebay-pagination/pagination-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK7G,oBAAY,kBAAkB,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAC7D,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;AACpG,oBAAY,mBAAmB,GAAG,SAAS,GAAG;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,mBAAmB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;;AAyFF,wBAAiD"}

package/ebay-pagination/pagination-item.js

@@ -0,0 +1,62 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ebay_icon_1 = require("../ebay-icon");
+var component_utils_1 = require("../common/component-utils");
+var classnames_1 = __importDefault(require("classnames"));
+var EbayPaginationItem = function (_a) {
+    var _b = _a.pageIndex, pageIndex = _b === void 0 ? 0 : _b, key = _a.key, current = _a.current, disabled = _a.disabled, _c = _a.type, type = _c === void 0 ? 'page' : _c, href = _a.href, hide = _a.hide, children = _a.children, _d = _a.a11yPreviousText, a11yPreviousText = _d === void 0 ? 'Previous page' : _d, _e = _a.a11yNextText, a11yNextText = _e === void 0 ? 'Next page' : _e, onSelect = _a.onSelect, onNext = _a.onNext, onPrevious = _a.onPrevious, className = _a.className, style = _a.style, forwardedRef = _a.forwardedRef, rest = __rest(_a, ["pageIndex", "key", "current", "disabled", "type", "href", "hide", "children", "a11yPreviousText", "a11yNextText", "onSelect", "onNext", "onPrevious", "className", "style", "forwardedRef"]);
+    var handlePageNumber = function (e) {
+        onSelect(e, e.currentTarget.innerText, pageIndex);
+    };
+    var handleNextPage = function (e) {
+        if (!e.currentTarget.getAttribute('aria-disabled')) {
+            onNext(e);
+        }
+    };
+    var handlePreviousPage = function (e) {
+        if (!e.currentTarget.getAttribute('aria-disabled')) {
+            onPrevious(e);
+        }
+    };
+    var isAnchor = !!href;
+    var ButtonOrAnchor = isAnchor ? 'a' : 'button';
+    var iconClassName = isAnchor ? 'icon-link' : 'icon-btn';
+    switch (type) {
+        case 'previous':
+            return (react_1.default.createElement(ButtonOrAnchor, __assign({}, rest, { ref: forwardedRef, "aria-disabled": disabled ? 'true' : undefined, "aria-label": a11yPreviousText, href: disabled ? undefined : href, className: classnames_1.default(iconClassName, 'pagination__previous'), style: style, onClick: handlePreviousPage }),
+                react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "paginationPrev" })));
+        case 'next':
+            return (react_1.default.createElement(ButtonOrAnchor, __assign({}, rest, { ref: forwardedRef, "aria-disabled": disabled ? 'true' : undefined, "aria-label": a11yNextText, href: disabled ? undefined : href, className: classnames_1.default(iconClassName, 'pagination__next'), style: style, onClick: handleNextPage }),
+                react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "paginationNext" })));
+        default:
+            return (react_1.default.createElement("li", __assign({}, rest, { hidden: hide }),
+                react_1.default.createElement(ButtonOrAnchor, { ref: forwardedRef, "aria-current": current ? 'page' : undefined, href: href, className: "pagination__item", style: style, key: key, onClick: handlePageNumber }, children)));
+    }
+};
+exports.default = component_utils_1.withForwardRef(EbayPaginationItem);

package/ebay-pagination/pagination.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps, FC } from 'react';
+import { PaginationVariant } from './types';
+declare type PaginationCallback = (e?: Event, value?: string) => void;
+declare type PaginationProps = Omit<ComponentProps<'nav'>, 'onSelect'> & {
+    id?: string;
+    a11yPreviousText?: string;
+    a11yNextText?: string;
+    a11yCurrentText?: string;
+    onPrevious?: PaginationCallback;
+    onNext?: PaginationCallback;
+    onSelect?: (e?: Event, value?: string, index?: number) => void;
+    variant?: PaginationVariant;
+    fluid?: boolean;
+};
+declare const EbayPagination: FC<PaginationProps>;
+export default EbayPagination;
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +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"}