@allxsmith/bestax-bulma 5.17.0 → 5.18.0

package/dist/index.esm.js

@@ -3204,6 +3204,38 @@ const warnDeprecatedColorProp = (component, value, hint) => {
         `a visual effect. It will be removed in the next major version. ${hint}`);
 };
 
+/** A count read as a whole number from zero, or `fallback` when it's no number. */
+function whole(count, fallback) {
+    return Number.isFinite(count) ? Math.max(Math.floor(count), 0) : fallback;
+}
+function range(from, to) {
+    return Array.from({ length: Math.max(to - from + 1, 0) }, (_, i) => from + i);
+}
+/**
+ * The pages to show for `current` of `total`: the first and last
+ * `boundaries`, `siblings` on each side of the current one, and a gap for
+ * each run left out. A gap of a single page shows that page instead, and the
+ * window around the current page slides inward near either end, so the row
+ * keeps its length as the page moves.
+ */
+function pageItems(total, current, siblings, boundaries) {
+    const windowSize = siblings * 2 + 1;
+    // Every page fits in the room the boundary pages, the window and two gaps take.
+    if (total <= boundaries * 2 + windowSize + 2)
+        return range(1, total);
+    const lowest = boundaries + 2;
+    const highest = total - boundaries - 1;
+    const start = Math.min(Math.max(current - siblings, lowest), highest - windowSize + 1);
+    const end = start + windowSize - 1;
+    const gap = (from, to, name) => to === from ? [from] : [name];
+    return [
+        ...range(1, boundaries),
+        ...gap(boundaries + 1, start - 1, 'start-gap'),
+        ...range(start, end),
+        ...gap(end + 1, total - boundaries, 'end-gap'),
+        ...range(total - boundaries + 1, total),
+    ];
+}
 /**
  * "Previous" navigation button.
  *
@@ -3211,9 +3243,9 @@ const warnDeprecatedColorProp = (component, value, hint) => {
  * @param {PaginationPreviousNextProps} props - Props for the PaginationPrevious component.
  * @returns {JSX.Element} The rendered previous button.
  */
-const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('pagination-previous'), className, {
+const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('pagination-previous', {
         'is-disabled': disabled,
-    }), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
+    }), className), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
         ? e => {
             e.preventDefault();
             e.stopPropagation();
@@ -3226,9 +3258,7 @@ const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx
  * @param {PaginationPreviousNextProps} props - Props for the PaginationNext component.
  * @returns {JSX.Element} The rendered next button.
  */
-const PaginationNext = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('pagination-next'), className, {
-        'is-disabled': disabled,
-    }), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
+const PaginationNext = ({ className, disabled, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('pagination-next', { 'is-disabled': disabled }), className), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
         ? e => {
             e.preventDefault();
             e.stopPropagation();
@@ -3242,7 +3272,8 @@ const PaginationNext = ({ className, disabled, children, ...props }) => (jsx("a"
  * @returns {JSX.Element} The rendered pagination.
  * @see {@link https://bulma.io/documentation/components/pagination/ | Bulma Pagination documentation}
  */
-const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded, className, children, ...props }) => {
+const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded, total, current, onPageChange, siblingCount = 1, boundaryCount = 1, previousLabel = 'Previous', nextLabel = 'Next', disabled, getPageHref, getPageLabel, className, children, ...props }) => {
+    const [kept, setKept] = React.useState(1);
     warnDeprecatedColorProp('Pagination', color, 'Use the textColor / bgColor helper props instead.');
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
@@ -3257,7 +3288,43 @@ const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded,
         'is-rounded': rounded,
     });
     const paginationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: children }));
+    // A child that renders nothing (`{show && …}` when false) is no children.
+    const fromTotal = total !== undefined && React.Children.toArray(children).length === 0;
+    let content = children;
+    if (fromTotal) {
+        const pages = Number.isFinite(total) ? Math.max(Math.floor(total), 0) : 0;
+        // A current page that's no number reads as the first.
+        const page = Math.min(Math.max(whole(current ?? kept, 1), 1), Math.max(pages, 1));
+        const choose = (next) => {
+            if (next === page)
+                return;
+            if (current === undefined)
+                setKept(next);
+            onPageChange?.(next);
+        };
+        /**
+         * What a link to `target` is given, beside what it renders. With no
+         * `getPageHref` it's a button; a link that's `off` goes nowhere.
+         */
+        const linkTo = (target, off) => ({
+            href: off || !getPageHref ? undefined : getPageHref(target),
+            role: getPageHref ? undefined : 'button',
+            // A link that's off is disabled too, and the parts drop its clicks.
+            onClick: () => choose(target),
+            onKeyDown: getPageHref
+                ? undefined
+                : (e) => {
+                    if (off || (e.key !== 'Enter' && e.key !== ' '))
+                        return;
+                    e.preventDefault();
+                    choose(target);
+                },
+        });
+        const atStart = disabled || page <= 1;
+        const atEnd = disabled || page >= pages;
+        content = (jsxs(Fragment, { children: [jsx(PaginationPrevious, { disabled: atStart, ...linkTo(page - 1, atStart), children: previousLabel }), jsx(PaginationNext, { disabled: atEnd, ...linkTo(page + 1, atEnd), children: nextLabel }), jsx(PaginationList, { children: pageItems(pages, page, whole(siblingCount, 1), whole(boundaryCount, 1)).map(item => typeof item === 'number' ? (jsx(PaginationLink, { "aria-label": getPageLabel ? getPageLabel(item) : `Page ${item}`, active: item === page, disabled: disabled, ...linkTo(item, Boolean(disabled)), children: item }, item)) : (jsx(PaginationEllipsis, {}, item))) })] }));
+    }
+    return (jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: content }));
 };
 /**
  * Container for page links and ellipsis.
@@ -3297,10 +3364,10 @@ const PaginationLink = ({ className, textColor, bgColor, active, disabled, onCli
             onClick(e);
         }
     };
-    return (jsx("li", { children: jsx("a", { className: classNames(usePrefixedClassNames('pagination-link'), bulmaHelperClasses, className, {
+    return (jsx("li", { children: jsx("a", { className: classNames(usePrefixedClassNames('pagination-link', {
                 'is-current': active,
                 'is-disabled': disabled,
-            }), "aria-current": active ? 'page' : undefined, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleClick, ...rest, children: children }) }));
+            }), bulmaHelperClasses, className), "aria-current": active ? 'page' : undefined, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleClick, ...rest, children: children }) }));
 };
 /**
  * Ellipsis separator.