@kickstartds/ds-agency-premium 1.6.71--canary.55.2416.0 → 1.6.72--canary.43.2474.0

package/dist/components/page-wrapper/index.js

@@ -1,4 +1,3 @@
-import "./tokens.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import Providers from '../providers/index.js';
 import '@kickstartds/base/lib/global/base';

package/dist/components/pagination/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { HTMLAttributes } from "react";
+import { FC, HTMLAttributes } from "react";
 /* eslint-disable */
 /**
  * This file was automatically generated by json-schema-to-typescript.
@@ -7,6 +7,7 @@ import { HTMLAttributes } from "react";
  * and run json-schema-to-typescript to regenerate this file.
  */
 interface PaginationProps {
+    truncate?: boolean;
     ariaLabels?: {
         /**
          * Aria label for the previous page link
@@ -40,8 +41,15 @@ interface PaginationProps {
         active?: boolean;
     }[];
 }
+declare const PageLink: FC<HTMLAttributes<HTMLAnchorElement> & {
+    active?: boolean;
+    url?: string;
+    label?: string;
+    num?: number;
+}>;
+declare const Placeholder: () => import("react/jsx-runtime").JSX.Element;
 declare const PaginationContextDefault: import("react").ForwardRefExoticComponent<PaginationProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const PaginationContext: import("react").Context<import("react").ForwardRefExoticComponent<PaginationProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export type { PaginationProps };
-export { PaginationContextDefault, PaginationContext, Pagination };
+export { PageLink, Placeholder, PaginationContextDefault, PaginationContext, Pagination };

package/dist/components/pagination/index.js

@@ -1,7 +1,7 @@
 import "./pagination.css";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, createElement, createContext, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
-import { forwardRef, createContext, useContext } from 'react';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { Link } from '@kickstartds/base/lib/link';
 import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
@@ -17,42 +17,36 @@ const defaults = {
     "pages": []
 };
 
-const PaginationContextDefault = forwardRef(({ pages, ariaLabels }, ref) => {
-    return (jsxs("div", { className: "dsa-pagination", ref: ref, children: [pages.findIndex((page) => page.active) !== 0 && (jsxs(Fragment, { children: [jsx(Link, { "aria-label": ariaLabels?.skipToFirstPage || "Skip to first page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-back", href: pages[0]?.url, children: jsx(Icon, { icon: "skip-back" }) }), jsx(Link, { "aria-label": ariaLabels?.previousPage || "Go to previous page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--prev", href: (() => {
-                            const activeIndex = pages.findIndex((page) => page.active);
-                            // Use the url of the next item after the active one, or "#" if at the end
-                            return pages[activeIndex - 1]?.url || "#";
-                        })(), children: jsx(Icon, { icon: "chevron-left" }) })] })), (() => {
-                const activeIndex = pages.findIndex((page) => page.active);
-                let lastRenderedIndex = -1;
-                const result = [];
-                pages.forEach((page, index) => {
-                    const isFirst = index === 0;
-                    const isLast = index === pages.length - 1;
-                    const isActive = page.active;
-                    const isBeforeActive = index === activeIndex - 1;
-                    const isAfterActive = index === activeIndex + 1;
-                    const shouldRender = isFirst || isLast || isActive || isBeforeActive || isAfterActive;
-                    if (!shouldRender) {
-                        if (index - lastRenderedIndex > 1 &&
-                            (result.length === 0 ||
-                                result[result.length - 1]?.type !== "div" ||
-                                result[result.length - 1]?.props?.className !==
-                                    "dsa-pagination__placeholder")) {
-                            result.push(jsx("div", { className: "dsa-pagination__placeholder", children: jsx("span", { children: "\u2026" }) }, `dsa-pagination__placeholder-${index}`));
+const PageLink = ({ active, url, label, num, ...props }) => (jsx(Link, { className: classnames("dsa-pagination__link", active && "dsa-pagination__link--active"), "aria-label": `${label} ${num}` || `Go to page ${num}`, "aria-current": active ? "page" : "false", href: url, ...props, children: num }));
+const Placeholder = () => (jsx("div", { className: "dsa-pagination__placeholder", children: jsx("span", { children: "\u2026" }) }));
+const PaginationContextDefault = forwardRef(({ pages = [], ariaLabels, truncate, ...props }, ref) => {
+    const activeIndex = pages.findIndex((page) => page.active);
+    return (jsxs("div", { className: "dsa-pagination", ...props, ref: ref, children: [jsx(Link, { "aria-label": ariaLabels?.skipToFirstPage || "Skip to first page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-back", href: pages[0]?.url, hidden: activeIndex === 0, children: jsx(Icon, { icon: "skip-back" }) }), jsx(Link, { "aria-label": ariaLabels?.previousPage || "Go to previous page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--prev", href: 
+                // Use the url of the next item after the active one
+                pages[activeIndex - 1]?.url, hidden: activeIndex === 0, children: jsx(Icon, { icon: "chevron-left" }) }), jsx("div", { className: "dsa-pagination__pages", children: truncate
+                    ? pages.reduce((result, page, index) => {
+                        const isFirst = index === 0;
+                        const isLast = index === pages.length - 1;
+                        const isActive = page.active;
+                        const isBeforeActive = index === activeIndex - 1;
+                        const isAfterActive = index === activeIndex + 1;
+                        const prevItem = result[result.length - 1];
+                        const shouldRender = isFirst ||
+                            isLast ||
+                            isActive ||
+                            isBeforeActive ||
+                            isAfterActive;
+                        if (shouldRender) {
+                            result.push(createElement(PageLink, { ...page, num: index + 1, label: ariaLabels?.goToPage, key: page.url }));
                         }
-                        return;
-                    }
-                    result.push(jsx(Link, { className: classnames("dsa-pagination__link", page.active && "dsa-pagination__link--active"), "aria-label": `${ariaLabels?.goToPage} ${index + 1}` ||
-                            `Go to page ${index + 1}`, href: page.url, children: (index + 1).toString() }, index));
-                    lastRenderedIndex = index;
-                });
-                return result;
-            })(), pages.findIndex((page) => page.active) !== pages.length - 1 && (jsxs(Fragment, { children: [jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--next", "aria-label": ariaLabels?.nextPage || "Go to next page", href: (() => {
-                            const activeIndex = pages.findIndex((page) => page.active);
-                            // Use the url of the next item after the active one, or "#" if at the end
-                            return pages[activeIndex + 1]?.url || "#";
-                        })(), children: jsx(Icon, { icon: "chevron-right" }) }), jsx(Link, { "aria-label": ariaLabels?.skipToLastPage || "Skip to last page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-forward", href: pages[pages.length - 1]?.url, children: jsx(Icon, { icon: "skip-forward" }) })] }))] }));
+                        else if (prevItem.type !== Placeholder) {
+                            result.push(jsx(Placeholder, {}, `dsa-pagination__placeholder-${index}`));
+                        }
+                        return result;
+                    }, [])
+                    : pages.map((page, index) => (createElement(PageLink, { ...page, num: index + 1, label: ariaLabels?.goToPage, key: page.url }))) }), jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--next", "aria-label": ariaLabels?.nextPage || "Go to next page", href: 
+                // Use the url of the next item after the active one
+                pages[activeIndex + 1]?.url, hidden: activeIndex === pages.length - 1, children: jsx(Icon, { icon: "chevron-right" }) }), jsx(Link, { "aria-label": ariaLabels?.skipToLastPage || "Skip to last page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-forward", href: pages[pages.length - 1]?.url, hidden: activeIndex === pages.length - 1, children: jsx(Icon, { icon: "skip-forward" }) })] }));
 });
 const PaginationContext = createContext(PaginationContextDefault);
 const Pagination = forwardRef((props, ref) => {
@@ -61,4 +55,4 @@ const Pagination = forwardRef((props, ref) => {
 });
 Pagination.displayName = "Pagination";
 
-export { Pagination, PaginationContext, PaginationContextDefault };
+export { PageLink, Pagination, PaginationContext, PaginationContextDefault, Placeholder };

package/dist/components/pagination/pagination.css

@@ -30,10 +30,22 @@
 }
 .dsa-pagination__link, .dsa-pagination__placeholder {
   --g-link--background: var(--dsa-pagination--background, transparent);
-  --g-link--background-hover: var(--dsa-pagination--background_hover, var(--ks-color-fg-alpha-8));
-  --g-link--color: var(--dsa-pagination--color, var(--ks-text-color-interface-interactive));
-  --g-link--color-hover: var(--dsa-pagination--color_hover, var(--ks-text-color-interface-interactive));
-  --g-link--border-radius: var(--dsa-pagination--border-radius, var(--ks-border-radius-control));
+  --g-link--background-hover: var(
+    --dsa-pagination--background_hover,
+    var(--ks-color-fg-alpha-8)
+  );
+  --g-link--color: var(
+    --dsa-pagination--color,
+    var(--ks-text-color-interface-interactive)
+  );
+  --g-link--color-hover: var(
+    --dsa-pagination--color_hover,
+    var(--ks-text-color-interface-interactive)
+  );
+  --g-link--border-radius: var(
+    --dsa-pagination--border-radius,
+    var(--ks-border-radius-control)
+  );
   border: var(--dsa-pagination--border, var(--ks-border-width-default) solid var(--ks-border-color-interface-interactive));
   border-radius: var(--dsa-pagination--border-radius, var(--ks-border-radius-control));
   width: var(--dsa-pagination--width, 4em);
@@ -49,18 +61,30 @@
   width: var(--dsa-pagination__icon--size, 1.25em);
   height: var(--dsa-pagination__icon--size, 1.25em);
 }
-.dsa-pagination__link--active, .dsa-pagination__placeholder--active {
-  --g-link--background: var(--dsa-pagination--background_active, var(--ks-background-color-primary-interactive));
+.dsa-pagination__link[aria-current=page] {
+  --g-link--background: var(
+    --dsa-pagination--background_active,
+    var(--ks-background-color-primary-interactive)
+  );
   --g-link--background-hover: var(
     --dsa-pagination--background_active,
     var(--ks-background-color-primary-interactive-hover)
   );
-  --g-link--color: var(--dsa-pagination--color_active, var(--dsa-text-color-on-primary));
-  --g-link--color-hover: var(--dsa-pagination--color_active_hover, var(--dsa-text-color-on-primary));
+  --g-link--color: var(
+    --dsa-pagination--color_active,
+    var(--dsa-text-color-on-primary)
+  );
+  --g-link--color-hover: var(
+    --dsa-pagination--color_active_hover,
+    var(--dsa-text-color-on-primary)
+  );
+}
+.dsa-pagination__placeholder span {
+  transform: translateY(-0.15em);
 }
 .dsa-pagination__placeholder {
   line-height: 0.25;
 }
-.dsa-pagination__placeholder span {
-  transform: translateY(-0.15em);
+.dsa-pagination__pages {
+  display: contents;
 }

package/dist/components/pagination/pagination.schema.dereffed.json

@@ -4,6 +4,9 @@
   "title": "Pagination",
   "type": "object",
   "properties": {
+    "truncate": {
+      "type": "boolean"
+    },
     "ariaLabels": {
       "type": "object",
       "properties": {

package/dist/components/pagination/pagination.schema.json

@@ -4,6 +4,9 @@
   "title": "Pagination",
   "type": "object",
   "properties": {
+    "truncate": {
+      "type": "boolean"
+    },
     "ariaLabels": {
       "type": "object",
       "properties": {