@arc-ui/components 11.24.2 → 11.26.0

package/dist/PaginationSimple/PaginationSimple.cjs.js

@@ -19,7 +19,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * 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 = filterDataAttrs.__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 = filterDataAttrs.__rest(_a, ["hidePrev", "hideNext", "hideFirst", "hideLast", "prevHref", "nextHref", "firstHref", "lastHref", "onPrevPage", "onNextPage", "onLastPage", "onFirstPage", "isFluid", "showEllipsis"]);
     var surface = React.useContext(Surface.Context).surface;
     return (React__default["default"].createElement("nav", filterDataAttrs.__assign({ className: index.classNames("arc-PaginationSimple", {
             "arc-PaginationSimple--onDarkSurface": surface === "dark",
@@ -28,19 +28,40 @@ var PaginationSimple = function (_a) {
         }) }, filterDataAttrs.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: index.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: index.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.Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid_esm.BtIconChevronLeftMid })),
                     React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev"))),
+            React__default["default"].createElement("li", { className: index.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: index.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.Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid_esm.BtIconChevronRightMid })))))));
+                        React__default["default"].createElement(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid_esm.BtIconChevronRightMid }))),
+                React__default["default"].createElement("a", { tabIndex: 0, href: lastHref, role: !lastHref ? "button" : undefined, className: index.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" })))))))));
 };
 
 exports.PaginationSimple = PaginationSimple;

package/dist/PaginationSimple/PaginationSimple.esm.js

@@ -11,7 +11,7 @@ import '../_shared/esm/suffix-modifier-3d548e45.js';
  * 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 = useContext(Context).surface;
     return (React__default.createElement("nav", __assign({ className: classNames("arc-PaginationSimple", {
             "arc-PaginationSimple--onDarkSurface": surface === "dark",
@@ -20,19 +20,40 @@ var PaginationSimple = function (_a) {
         }) }, filterDataAttrs(props)),
         React__default.createElement("ul", { className: "arc-PaginationSimple-list" },
             React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
+                React__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.createElement("div", { className: "arc-PaginationSimple-iconContainer" },
+                        React__default.createElement("svg", { width: "32", height: "32", style: { marginBottom: "-2px" }, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                            React__default.createElement("g", { transform: "translate(8.5, 8)" },
+                                React__default.createElement("path", { d: "M2 0.282227L2 13.7177", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" }),
+                                React__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.createElement("span", { className: "arc-PaginationSimple-prevText" }, "First")),
                 React__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.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
                         React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid })),
                     React__default.createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev"))),
+            React__default.createElement("li", { className: classNames("arc-PaginationSimple-listItem arc-PaginationSimple-listItemEllipsis", {
+                    "arc-PaginationSimple-listItemEllipsis--hidden": !showEllipsis
+                }) }, "..."),
             React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
                 React__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.createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
                     React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
-                        React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid })))))));
+                        React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid }))),
+                React__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.createElement("span", { className: "arc-PaginationSimple-nextText" }, "Last"),
+                    React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer" },
+                        React__default.createElement("svg", { width: "32", height: "32", style: { marginBottom: "-2px" }, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                            React__default.createElement("g", { transform: "translate(8.5, 8)" },
+                                React__default.createElement("path", { d: "M13 0.282227L13 13.7177", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" }),
+                                React__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" })))))))));
 };
 
 export { PaginationSimple };