@arc-ui/components 11.24.2 → 11.25.0

package/dist/index.js

@@ -35615,7 +35615,7 @@ var Pagination = function (_a) {
  * Use `PaginationSimple` to navigate through multiple pages of content.
  */
 var PaginationSimple = function (_a) {
-    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, prevHref = _a.prevHref, nextHref = _a.nextHref, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = __rest(_a, ["hidePrev", "hideNext", "prevHref", "nextHref", "onPrevPage", "onNextPage", "isFluid"]);
+    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, hideFirst = _a.hideFirst, hideLast = _a.hideLast, prevHref = _a.prevHref, nextHref = _a.nextHref, firstHref = _a.firstHref, lastHref = _a.lastHref, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, onLastPage = _a.onLastPage, onFirstPage = _a.onFirstPage, isFluid = _a.isFluid, _b = _a.showEllipsis, showEllipsis = _b === void 0 ? false : _b, props = __rest(_a, ["hidePrev", "hideNext", "hideFirst", "hideLast", "prevHref", "nextHref", "firstHref", "lastHref", "onPrevPage", "onNextPage", "onLastPage", "onFirstPage", "isFluid", "showEllipsis"]);
     var surface = React.useContext(Context$5).surface;
     return (React__default["default"].createElement("nav", __assign({ className: classNames("arc-PaginationSimple", {
             "arc-PaginationSimple--onDarkSurface": surface === "dark",
@@ -35624,19 +35624,40 @@ var PaginationSimple = function (_a) {
         }) }, filterDataAttrs(props)),
         React__default["default"].createElement("ul", { className: "arc-PaginationSimple-list" },
             React__default["default"].createElement("li", { className: "arc-PaginationSimple-listItem" },
+                React__default["default"].createElement("a", { tabIndex: 0, href: firstHref, role: !firstHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hideFirst
+                    }), onClick: onFirstPage },
+                    React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer" },
+                        React__default["default"].createElement("svg", { width: "32", height: "32", style: { marginBottom: "-2px" }, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                            React__default["default"].createElement("g", { transform: "translate(8.5, 8)" },
+                                React__default["default"].createElement("path", { d: "M2 0.282227L2 13.7177", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" }),
+                                React__default["default"].createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.24117 7.00009L14.9385 12.7041C15.1905 12.9566 15.332 13.2987 15.332 13.6554C15.332 14.0121 15.1905 14.3543 14.9385 14.6068C14.8139 14.7316 14.6659 14.8306 14.503 14.8982C14.3401 14.9657 14.1655 15.0005 13.9892 15.0005C13.8128 15.0005 13.6382 14.9657 13.4753 14.8981C13.3124 14.8306 13.1644 14.7316 13.0398 14.6068L6.39184 7.95075C6.14025 7.69833 5.99898 7.35647 5.99898 7.00009C5.99898 6.6437 6.14025 6.30184 6.39184 6.04942L13.0398 -0.606583C13.1644 -0.731391 13.3124 -0.830411 13.4753 -0.897974C13.6382 -0.965536 13.8128 -1.00031 13.9892 -1.00031C14.1655 -1.00031 14.3401 -0.965536 14.503 -0.897974C14.6659 -0.830411 14.8139 -0.731391 14.9385 -0.606583C15.1905 -0.354107 15.332 0.288038 15.332 0.64475C15.332 1.00147 15.1905 1.34361 14.9385 1.59609L9.24117 7.00009Z", fill: "currentColor" })))),
+                    React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "First")),
                 React__default["default"].createElement("a", { tabIndex: 0, href: prevHref, role: !prevHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
                         "arc-PaginationSimple-navigationButton--hidden": hidePrev
                     }), onClick: onPrevPage },
                     React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
                         React__default["default"].createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid })),
                     React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev"))),
+            React__default["default"].createElement("li", { className: classNames("arc-PaginationSimple-listItem arc-PaginationSimple-listItemEllipsis", {
+                    "arc-PaginationSimple-listItemEllipsis--hidden": !showEllipsis
+                }) }, "..."),
             React__default["default"].createElement("li", { className: "arc-PaginationSimple-listItem" },
                 React__default["default"].createElement("a", { tabIndex: 0, href: nextHref, role: !nextHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
                         "arc-PaginationSimple-navigationButton--hidden": hideNext
                     }), onClick: onNextPage },
                     React__default["default"].createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
                     React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
-                        React__default["default"].createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid })))))));
+                        React__default["default"].createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid }))),
+                React__default["default"].createElement("a", { tabIndex: 0, href: lastHref, role: !lastHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hideLast
+                    }), onClick: onLastPage },
+                    React__default["default"].createElement("span", { className: "arc-PaginationSimple-nextText" }, "Last"),
+                    React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer" },
+                        React__default["default"].createElement("svg", { width: "32", height: "32", style: { marginBottom: "-2px" }, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                            React__default["default"].createElement("g", { transform: "translate(8.5, 8)" },
+                                React__default["default"].createElement("path", { d: "M13 0.282227L13 13.7177", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" }),
+                                React__default["default"].createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.75883 7.00009L0.0614906 12.7041C-0.190495 12.9566 -0.332031 13.2987 -0.332031 13.6554C-0.332031 14.0121 -0.190495 14.3543 0.0614906 14.6068C0.186083 14.7316 0.334064 14.8306 0.496956 14.8982C0.659847 14.9657 0.834467 15.0005 1.01083 15.0005C1.18718 15.0005 1.3618 14.9657 1.52469 14.8981C1.68759 14.8306 1.83557 14.7316 1.96016 14.6068L8.60816 7.95075C8.85975 7.69833 9.00102 7.35647 9.00102 7.00009C9.00102 6.6437 8.85975 6.30184 8.60816 6.04942L1.96016 -0.606583C1.83557 -0.731391 1.68759 -0.830411 1.52469 -0.897974C1.3618 -0.965536 1.18718 -1.00031 1.01083 -1.00031C0.834467 -1.00031 0.659847 -0.965536 0.496956 -0.897974C0.334064 -0.830411 0.186083 -0.731391 0.0614906 -0.606583C-0.190495 -0.354107 -0.332031 0.288038 -0.332031 0.64475C-0.332031 1.00147 -0.190495 1.34361 0.0614906 1.59609L5.75883 7.00009Z", fill: "currentColor" })))))))));
 };
 
 var PosterImage = function (_a) {