@digital-b2c/coreui-kit 0.11.9 → 0.11.10

package/dist/index.d.cts

@@ -243,9 +243,13 @@ interface PaginationProps {
     hasNumber?: boolean;
     disableArrows?: boolean;
     onPageChange?: (page: number) => void;
+    renderLink?: (props: AnchorHTMLAttributes<HTMLAnchorElement> & {
+        page: number;
+        children: ReactNode;
+    }) => ReactNode;
 }
 
-declare const Pagination: ({ className, totalPages, currentPage, loop, hasNumber, disableArrows, onPageChange, }: PaginationProps) => react_jsx_runtime.JSX.Element;
+declare const Pagination: ({ className, totalPages, currentPage, loop, hasNumber, disableArrows, onPageChange, renderLink, }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
 declare const Picture: ({ className, ...props }: PictureProps) => react_jsx_runtime.JSX.Element;
 
@@ -794,6 +798,10 @@ declare const FeaturedNewsHighlights: (({ variant, title, items, backgroundColor
     Title: ({ children }: FeaturedNewsHighlightsTitleProps) => react_jsx_runtime.JSX.Element;
 };
 
+type NewsCardListPaginationProps = {
+    children: ReactNode;
+};
+
 interface NewsCardListProps extends PropsWithChildren {
     className?: string;
     items: NewsCardProps[];
@@ -803,14 +811,14 @@ interface NewsCardListProps extends PropsWithChildren {
     onSearchSubmit?: (value: string) => void;
     searchInputProps?: InputProps;
     currentPage?: number;
-    onPageChange?: (page: number) => void;
-    totalPages?: number;
     renderLink?: (props: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children: React.ReactNode;
     }) => React.ReactNode;
 }
 
-declare const NewsCardList: ({ items, backgroundColor, className, currentPage, totalPages, searchValue, onPageChange, onSearchChange, onSearchSubmit, searchInputProps, renderLink, }: NewsCardListProps) => react_jsx_runtime.JSX.Element;
+declare const NewsCardList: (({ items, backgroundColor, className, currentPage, searchValue, onSearchChange, onSearchSubmit, searchInputProps, renderLink, children, }: NewsCardListProps) => react_jsx_runtime.JSX.Element) & {
+    Pagination: ({ children }: NewsCardListPaginationProps) => react_jsx_runtime.JSX.Element;
+};
 
 type BlogPostBodyProps = {
     children: ReactNode;
@@ -830,6 +838,10 @@ declare const BlogPost: (({ title, description: body, image, date, tag, relatedA
     Body: ({ children }: BlogPostBodyProps) => react_jsx_runtime.JSX.Element;
 };
 
+type BlogSearchResultsListPaginationProps = {
+    children: ReactNode;
+};
+
 type BlogSearchResultsListSearchProps = {
     children: ReactNode;
 };
@@ -841,16 +853,14 @@ interface BlogSearchResultsListProps extends PropsWithChildren {
     searchValue: string;
     onSearchChange: (value: string) => void;
     onSearchSubmit: (value: string) => void;
-    currentPage?: number;
-    onPageChange?: (page: number) => void;
-    totalPages?: number;
     renderLink?: (props: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children: React.ReactNode;
     }) => React.ReactNode;
 }
 
-declare const BlogSearchResultsList: (({ items, searchResult, onSearchChange, onSearchSubmit, onPageChange, searchValue, currentPage, totalPages, className, renderLink, children, }: BlogSearchResultsListProps) => react_jsx_runtime.JSX.Element) & {
+declare const BlogSearchResultsList: (({ items, searchResult, onSearchChange, onSearchSubmit, searchValue, className, renderLink, children, }: BlogSearchResultsListProps) => react_jsx_runtime.JSX.Element) & {
     Search: ({ children }: BlogSearchResultsListSearchProps) => react_jsx_runtime.JSX.Element;
+    Pagination: ({ children, }: BlogSearchResultsListPaginationProps) => react_jsx_runtime.JSX.Element;
 };
 
 type IntersectionObserverOptions = {

package/dist/index.d.ts

@@ -243,9 +243,13 @@ interface PaginationProps {
     hasNumber?: boolean;
     disableArrows?: boolean;
     onPageChange?: (page: number) => void;
+    renderLink?: (props: AnchorHTMLAttributes<HTMLAnchorElement> & {
+        page: number;
+        children: ReactNode;
+    }) => ReactNode;
 }
 
-declare const Pagination: ({ className, totalPages, currentPage, loop, hasNumber, disableArrows, onPageChange, }: PaginationProps) => react_jsx_runtime.JSX.Element;
+declare const Pagination: ({ className, totalPages, currentPage, loop, hasNumber, disableArrows, onPageChange, renderLink, }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
 declare const Picture: ({ className, ...props }: PictureProps) => react_jsx_runtime.JSX.Element;
 
@@ -794,6 +798,10 @@ declare const FeaturedNewsHighlights: (({ variant, title, items, backgroundColor
     Title: ({ children }: FeaturedNewsHighlightsTitleProps) => react_jsx_runtime.JSX.Element;
 };
 
+type NewsCardListPaginationProps = {
+    children: ReactNode;
+};
+
 interface NewsCardListProps extends PropsWithChildren {
     className?: string;
     items: NewsCardProps[];
@@ -803,14 +811,14 @@ interface NewsCardListProps extends PropsWithChildren {
     onSearchSubmit?: (value: string) => void;
     searchInputProps?: InputProps;
     currentPage?: number;
-    onPageChange?: (page: number) => void;
-    totalPages?: number;
     renderLink?: (props: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children: React.ReactNode;
     }) => React.ReactNode;
 }
 
-declare const NewsCardList: ({ items, backgroundColor, className, currentPage, totalPages, searchValue, onPageChange, onSearchChange, onSearchSubmit, searchInputProps, renderLink, }: NewsCardListProps) => react_jsx_runtime.JSX.Element;
+declare const NewsCardList: (({ items, backgroundColor, className, currentPage, searchValue, onSearchChange, onSearchSubmit, searchInputProps, renderLink, children, }: NewsCardListProps) => react_jsx_runtime.JSX.Element) & {
+    Pagination: ({ children }: NewsCardListPaginationProps) => react_jsx_runtime.JSX.Element;
+};
 
 type BlogPostBodyProps = {
     children: ReactNode;
@@ -830,6 +838,10 @@ declare const BlogPost: (({ title, description: body, image, date, tag, relatedA
     Body: ({ children }: BlogPostBodyProps) => react_jsx_runtime.JSX.Element;
 };
 
+type BlogSearchResultsListPaginationProps = {
+    children: ReactNode;
+};
+
 type BlogSearchResultsListSearchProps = {
     children: ReactNode;
 };
@@ -841,16 +853,14 @@ interface BlogSearchResultsListProps extends PropsWithChildren {
     searchValue: string;
     onSearchChange: (value: string) => void;
     onSearchSubmit: (value: string) => void;
-    currentPage?: number;
-    onPageChange?: (page: number) => void;
-    totalPages?: number;
     renderLink?: (props: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children: React.ReactNode;
     }) => React.ReactNode;
 }
 
-declare const BlogSearchResultsList: (({ items, searchResult, onSearchChange, onSearchSubmit, onPageChange, searchValue, currentPage, totalPages, className, renderLink, children, }: BlogSearchResultsListProps) => react_jsx_runtime.JSX.Element) & {
+declare const BlogSearchResultsList: (({ items, searchResult, onSearchChange, onSearchSubmit, searchValue, className, renderLink, children, }: BlogSearchResultsListProps) => react_jsx_runtime.JSX.Element) & {
     Search: ({ children }: BlogSearchResultsListSearchProps) => react_jsx_runtime.JSX.Element;
+    Pagination: ({ children, }: BlogSearchResultsListPaginationProps) => react_jsx_runtime.JSX.Element;
 };
 
 type IntersectionObserverOptions = {

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import clsx15 from 'clsx';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React64, { forwardRef, useId, useRef, useState, useCallback, useMemo, Children, isValidElement, useEffect } from 'react';
+import React65, { forwardRef, useId, useRef, useState, useCallback, useMemo, Children, isValidElement, useEffect, Fragment as Fragment$1 } from 'react';
 import gsap$1, { gsap } from 'gsap';
 import { useGSAP } from '@gsap/react';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
@@ -374,7 +374,7 @@ var svgs = {
   xBlack: icon_x_black_default,
   xWhite: icon_x_white_default
 };
-var Icon = React64.memo(
+var Icon = React65.memo(
   (_a) => {
     var _b = _a, { type, size } = _b, props = __objRest(_b, ["type", "size"]);
     if (type) {
@@ -1129,7 +1129,8 @@ var Pagination = ({
   loop = true,
   hasNumber = false,
   disableArrows = false,
-  onPageChange
+  onPageChange,
+  renderLink
 }) => {
   const [activePage, setActivePage] = useState(currentPage);
   const goToPage = (page) => {
@@ -1161,8 +1162,15 @@ var Pagination = ({
     setActivePage(page);
     onPageChange == null ? void 0 : onPageChange(page);
   };
+  const prevPage = activePage === 1 ? loop ? totalPages : 1 : activePage - 1;
+  const nextPage = activePage === totalPages ? loop ? 1 : totalPages : activePage + 1;
   return /* @__PURE__ */ jsxs("div", { className: clsx15(Pagination_module_default.pagination, className), children: [
-    !disableArrows && /* @__PURE__ */ jsx(
+    !disableArrows && (renderLink ? renderLink({
+      page: prevPage,
+      className: Pagination_module_default.prev,
+      "aria-label": "Go to previous page",
+      children: /* @__PURE__ */ jsx(Icon, { type: "filledChevronLeft" })
+    }) : /* @__PURE__ */ jsx(
       "button",
       {
         className: Pagination_module_default.prev,
@@ -1171,24 +1179,35 @@ var Pagination = ({
         "aria-label": "Go to previous page",
         children: /* @__PURE__ */ jsx(Icon, { type: "filledChevronLeft" })
       }
-    ),
+    )),
     /* @__PURE__ */ jsx("div", { className: Pagination_module_default.pages, children: Array.from({ length: totalPages }, (_, i) => {
       const page = i + 1;
-      return /* @__PURE__ */ jsx(
+      const pageClassName = clsx15(Pagination_module_default.page, {
+        [Pagination_module_default.active]: activePage === page,
+        [Pagination_module_default.number]: hasNumber
+      });
+      return renderLink ? /* @__PURE__ */ jsx(Fragment$1, { children: renderLink({
+        page,
+        className: pageClassName,
+        "aria-label": `Go to page ${page}`,
+        children: hasNumber ? page : null
+      }) }, page) : /* @__PURE__ */ jsx(
         "button",
         {
           onClick: () => goToPage(page),
-          className: clsx15(Pagination_module_default.page, {
-            [Pagination_module_default.active]: activePage === page,
-            [Pagination_module_default.number]: hasNumber
-          }),
+          className: pageClassName,
           "aria-label": `Go to page ${page}`,
           children: hasNumber ? page : null
         },
         page
       );
     }) }),
-    !disableArrows && /* @__PURE__ */ jsx(
+    !disableArrows && (renderLink ? renderLink({
+      page: nextPage,
+      className: Pagination_module_default.next,
+      "aria-label": "Go to next page",
+      children: /* @__PURE__ */ jsx(Icon, { type: "filledChevronRight" })
+    }) : /* @__PURE__ */ jsx(
       "button",
       {
         className: Pagination_module_default.next,
@@ -1197,7 +1216,7 @@ var Pagination = ({
         "aria-label": "Go to next page",
         children: /* @__PURE__ */ jsx(Icon, { type: "filledChevronRight" })
       }
-    )
+    ))
   ] });
 };
 
@@ -3620,21 +3639,27 @@ var NewsCardList_module_default = {
   "end-action-button": "NewsCardList_module_end-action-button",
   pagination: "NewsCardList_module_pagination"
 };
+var NewsCardListPagination = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
 var NewsCardList = ({
   items,
   backgroundColor,
   className,
   currentPage,
-  totalPages = 0,
   searchValue,
-  onPageChange,
   onSearchChange,
   onSearchSubmit,
   searchInputProps,
-  renderLink
+  renderLink,
+  children
 }) => {
   const featuredCards = items.slice(0, 4);
   const cards = currentPage !== 1 ? items : items.slice(4);
+  const slots = resolveCompoundSlots(children, {
+    pagination: NewsCardListPagination
+  });
+  const paginationNode = slots.pagination;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3679,21 +3704,19 @@ var NewsCardList = ({
             /* @__PURE__ */ jsx(BlogCardGrid2, { items: cards, hasContainer: false, renderLink })
           ] })
         ] }),
-        totalPages ? /* @__PURE__ */ jsx(
-          Pagination,
-          {
-            currentPage: currentPage || 1,
-            totalPages: totalPages || 0,
-            onPageChange,
-            className: clsx15("pagination", NewsCardList_module_default["pagination"]),
-            hasNumber: true
-          }
-        ) : null
+        paginationNode ? React65.cloneElement(paginationNode, {
+          className: clsx15("pagination", NewsCardList_module_default["pagination"])
+        }) : null
       ] })
     }
   );
 };
 
+// src/widgets/NewsCardList/index.ts
+var NewsCardList2 = Object.assign(NewsCardList, {
+  Pagination: NewsCardListPagination
+});
+
 // src/widgets/BlogPost/BlogPost.module.scss
 var BlogPost_module_default = {
   "blog-post": "BlogPost_module_blog-post",
@@ -3773,26 +3796,30 @@ var BlogSearchResultsList_module_default = {
   "end-action-button": "BlogSearchResultsList_module_end-action-button",
   pagination: "BlogSearchResultsList_module_pagination"
 };
+var BlogSearchResultsListPagination = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
 var BlogSearchResultsList = ({
   items,
   searchResult,
   onSearchChange,
   onSearchSubmit,
-  onPageChange,
   searchValue,
-  currentPage,
-  totalPages = 0,
   className,
   renderLink,
   children
 }) => {
   var _a;
   const slots = resolveCompoundSlots(children, {
-    search: BlogSearchResultsListSearch
+    search: BlogSearchResultsListSearch,
+    pagination: BlogSearchResultsListPagination
   });
   const searchNode = (_a = slots.search) != null ? _a : searchResult;
+  const paginationNode = slots.pagination;
   return /* @__PURE__ */ jsx("div", { className: clsx15("search-results-list", BlogSearchResultsList_module_default["search-results-list"], className), children: /* @__PURE__ */ jsxs(Container, { className: clsx15("container", BlogSearchResultsList_module_default["container"]), children: [
-    typeof searchNode === "string" ? /* @__PURE__ */ jsx("span", { className: clsx15("search-result", BlogSearchResultsList_module_default["search-result"]), children: searchNode }) : React64.isValidElement(searchNode) ? React64.cloneElement(searchNode, {
+    typeof searchNode === "string" ? /* @__PURE__ */ jsx("span", { className: clsx15("search-result", BlogSearchResultsList_module_default["search-result"]), children: searchNode }) : React65.isValidElement(searchNode) ? React65.cloneElement(searchNode, {
       className: clsx15("search-result", BlogSearchResultsList_module_default["search-result"])
     }) : null,
     /* @__PURE__ */ jsxs("div", { className: clsx15("wrapper", BlogSearchResultsList_module_default["wrapper"]), children: [
@@ -3820,22 +3847,16 @@ var BlogSearchResultsList = ({
       ),
       /* @__PURE__ */ jsx(BlogCardGrid2, { items, hasContainer: false, renderLink })
     ] }),
-    totalPages ? /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        currentPage: currentPage || 1,
-        totalPages: totalPages || 0,
-        onPageChange,
-        className: clsx15("pagination", BlogSearchResultsList_module_default["pagination"]),
-        hasNumber: true
-      }
-    ) : null
+    paginationNode ? React65.cloneElement(paginationNode, {
+      className: clsx15("pagination", BlogSearchResultsList_module_default["pagination"])
+    }) : null
   ] }) });
 };
 
 // src/widgets/BlogSearchResultsList/index.ts
 var BlogSearchResultsList2 = Object.assign(BlogSearchResultsList, {
-  Search: BlogSearchResultsListSearch
+  Search: BlogSearchResultsListSearch,
+  Pagination: BlogSearchResultsListPagination
 });
 function useIntersectionObserver({
   animateOnce = false,
@@ -3866,6 +3887,6 @@ function useIntersectionObserver({
   return { observeRef, isVisible };
 }
 
-export { Anchor, Badge, BlogCardGrid2 as BlogCardGrid, BlogPost2 as BlogPost, BlogSearchResultsList2 as BlogSearchResultsList, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, FeaturedNewsHighlights2 as FeaturedNewsHighlights, FilterBar, Footer, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, Input, InternalBrandsTab2 as InternalBrandsTab, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, NewsCard, NewsCardList, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, ResourceCardItem, ResourcesGridList, Sidebar, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextEvent2 as TextEvent, UpcomingEventCard, resolveCompoundSlots, svgs, useIntersectionObserver };
+export { Anchor, Badge, BlogCardGrid2 as BlogCardGrid, BlogPost2 as BlogPost, BlogSearchResultsList2 as BlogSearchResultsList, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, FeaturedNewsHighlights2 as FeaturedNewsHighlights, FilterBar, Footer, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, Input, InternalBrandsTab2 as InternalBrandsTab, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, NewsCard, NewsCardList2 as NewsCardList, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, ResourceCardItem, ResourcesGridList, Sidebar, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextEvent2 as TextEvent, UpcomingEventCard, resolveCompoundSlots, svgs, useIntersectionObserver };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map