periplo-ui 3.36.0 → 3.38.0

package/dist/components/Pagination/Pagination.d.ts

@@ -12,6 +12,7 @@ type AnchorComponentProps = {
     'aria-current'?: 'page';
     children: React.ReactNode;
     onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    rel?: string;
 };
 type PaginationLinkProps = {
     isActive?: boolean;

package/dist/components/Pagination/Pagination.js

@@ -20,7 +20,7 @@ PaginationContent.displayName = "PaginationContent";
 const PaginationItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn(baseStyles.item, className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 const PaginationLink = React.forwardRef(
-  ({ className, isActive, size = "sm", disabled = false, href, ...props }, ref) => {
+  ({ className, isActive, size = "sm", disabled = false, href, rel, ...props }, ref) => {
     const buttonClassName = cn(
       buttonVariants({
         variant: isActive ? "primary" : "text",
@@ -39,6 +39,7 @@ const PaginationLink = React.forwardRef(
       {
         ref,
         href: href ?? "#",
+        rel,
         "aria-current": isActive ? "page" : void 0,
         className: cn(baseStyles.link, buttonClassName),
         children: props.children
@@ -52,10 +53,11 @@ const PaginationPrevious = React.forwardRef(
     PaginationLink,
     {
       ref,
-      "aria-label": previousLabel !== "" ? previousLabel : "Go to previous page",
+      "aria-label": previousLabel || "Go to previous page",
       size: "sm",
       disabled,
       href,
+      rel: "prev",
       className: cn("flex items-center gap-2", baseStyles.button, className),
       ...props,
       children: [
@@ -71,10 +73,11 @@ const PaginationNext = React.forwardRef(
     PaginationLink,
     {
       ref,
-      "aria-label": nextLabel === "" ? "Go to next page" : nextLabel,
+      "aria-label": nextLabel || "Go to next page",
       size: "sm",
       disabled,
       href,
+      rel: "next",
       className: cn("flex items-center gap-2", baseStyles.button, className),
       ...props,
       children: [

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport { CaretLeft, CaretRight } from '@phosphor-icons/react/dist/ssr'\nimport * as React from 'react'\n\nimport { Button, ButtonProps, buttonVariants } from '../Button'\n\nimport { cn } from '@/lib/utils'\n\nconst baseStyles = {\n  nav: 'flex justify-center',\n  content: 'flex flex-row items-center gap-1',\n  item: 'list-none',\n  link: 'outline-none',\n  button: 'min-w-8 px-2 transition-none',\n  ellipsis: 'flex h-8 w-8 items-center justify-center',\n}\n\ntype BasePaginationProps = {\n  className?: string\n}\n\ntype PaginationRootProps = BasePaginationProps & React.ComponentProps<'nav'>\ntype PaginationContentProps = BasePaginationProps & React.ComponentProps<'ul'>\ntype PaginationItemProps = BasePaginationProps & React.ComponentProps<'li'>\n\ntype AnchorComponentProps = {\n  href: string\n  className?: string\n  'aria-current'?: 'page'\n  children: React.ReactNode\n  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n  disabled?: boolean\n  href?: string\n  anchorComponent?: React.ComponentType<AnchorComponentProps>\n  previousLabel?: string\n  nextLabel?: string\n} & Pick<ButtonProps, 'size'> &\n  React.ComponentProps<'a'>\n\n/** Base props shared between both link and button modes */\ntype BasePaginationComponentProps = {\n  /** The current active page number (1-based indexing) */\n  currentPage: number\n  /** The total number of available pages */\n  totalPages: number\n  /** Optional CSS class name for styling the pagination container */\n  className?: string\n  labels?: {\n    /** Text to show in the previous button (default: '') */\n    previous?: string\n    /** Text to show in the next button (default: '') */\n    next?: string\n    /** Aria label to show in the page number (default: 'Page {number}') */\n    page?: string\n  }\n}\n\n/** Props specific to link mode */\ntype LinkModePaginationProps = {\n  mode: 'link'\n  /**\n   * Custom component to use for links (e.g., Next.js Link)\n   * Must accept standard anchor props (href, className, etc.)\n   */\n  anchorComponent: React.ComponentType<AnchorComponentProps>\n  /**\n   * Function to generate the href for each page link\n   */\n  generateHref: (page: number) => string\n  /** Optional callback when page changes - not required in link mode since links handle navigation */\n  onPageChange?: (page: number) => void\n} & BasePaginationComponentProps\n\n/** Props specific to button mode */\ntype ButtonModePaginationProps = {\n  mode: 'button'\n  /** Callback function called when a page is selected - required in button mode */\n  onPageChange: (page: number) => void\n  /** These props are not used in button mode */\n  anchorComponent?: never\n  generateHref?: never\n} & BasePaginationComponentProps\n\n/** Union type for all possible pagination props */\nexport type PaginationProps =\n  | LinkModePaginationProps\n  | ButtonModePaginationProps\n  | (Omit<BasePaginationComponentProps, 'mode'> & {\n      mode: undefined\n      onPageChange: (page: number) => void\n      anchorComponent?: React.ComponentType<AnchorComponentProps>\n      generateHref?: (page: number) => string\n    })\n\nconst PaginationRoot = React.forwardRef<HTMLElement, PaginationRootProps>(({ className, ...props }, ref) => (\n  <nav ref={ref} role=\"navigation\" aria-label=\"pagination\" className={cn(baseStyles.nav, className)} {...props} />\n))\nPaginationRoot.displayName = 'PaginationRoot'\n\nconst PaginationContent = React.forwardRef<HTMLUListElement, PaginationContentProps>(({ className, ...props }, ref) => (\n  <ul ref={ref} className={cn(baseStyles.content, className)} {...props} />\n))\nPaginationContent.displayName = 'PaginationContent'\n\nconst PaginationItem = React.forwardRef<HTMLLIElement, PaginationItemProps>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(baseStyles.item, className)} {...props} />\n))\nPaginationItem.displayName = 'PaginationItem'\n\nconst PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  ({ className, isActive, size = 'sm', disabled = false, href, ...props }, ref) => {\n    const buttonClassName = cn(\n      buttonVariants({\n        variant: isActive ? 'primary' : 'text',\n        size,\n      }),\n      disabled && 'opacity-50',\n      baseStyles.button,\n      className,\n    )\n\n    if (disabled) {\n      return (\n        <Button variant=\"text\" size=\"sm\" disabled className={buttonClassName}>\n          {props.children}\n        </Button>\n      )\n    }\n\n    const AnchorComponent = props.anchorComponent ?? 'a'\n\n    return (\n      <AnchorComponent\n        ref={ref}\n        href={href ?? '#'}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(baseStyles.link, buttonClassName)}\n      >\n        {props.children}\n      </AnchorComponent>\n    )\n  },\n)\nPaginationLink.displayName = 'PaginationLink'\n\nconst PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  ({ className, disabled, href, previousLabel = '', ...props }, ref) => (\n    <PaginationLink\n      ref={ref}\n      aria-label={previousLabel !== '' ? previousLabel : 'Go to previous page'}\n      size=\"sm\"\n      disabled={disabled}\n      href={href}\n      className={cn('flex items-center gap-2', baseStyles.button, className)}\n      {...props}\n    >\n      <CaretLeft className=\"h-4 w-4 shrink-0\" />\n      {previousLabel && <span>{previousLabel}</span>}\n    </PaginationLink>\n  ),\n)\nPaginationPrevious.displayName = 'PaginationPrevious'\n\nconst PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  ({ className, disabled, href, nextLabel = '', ...props }, ref) => (\n    <PaginationLink\n      ref={ref}\n      aria-label={nextLabel === '' ? 'Go to next page' : nextLabel}\n      size=\"sm\"\n      disabled={disabled}\n      href={href}\n      className={cn('flex items-center gap-2', baseStyles.button, className)}\n      {...props}\n    >\n      {nextLabel && <span>{nextLabel}</span>}\n      <CaretRight className=\"h-4 w-4 shrink-0\" />\n    </PaginationLink>\n  ),\n)\nPaginationNext.displayName = 'PaginationNext'\n\nconst PaginationEllipsis = ({ className }: BasePaginationProps) => (\n  <span className={cn(baseStyles.ellipsis, className)}>...</span>\n)\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\n/**\n * A pagination component that displays page numbers and navigation controls.\n *\n * @example\n * ```tsx\n * // Basic usage with anchor tags\n * <Pagination\n *   currentPage={1}\n *   totalPages={10}\n * />\n *\n * // With Next.js Link component\n * <Pagination\n *   currentPage={1}\n *   totalPages={10}\n *   onPageChange={setPage}\n *   anchorComponent={Link}\n *   generateHref={(page) => `/posts?page=${page}`}\n * />\n *\n * // Client-side table navigation\n * <Pagination\n *   currentPage={1}\n *   totalPages={10}\n *   onPageChange={setPage}\n *   mode=\"button\"\n * />\n * ```\n */\nconst Pagination: React.FC<PaginationProps> = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n  className,\n  mode = 'button',\n  anchorComponent,\n  generateHref = () => '#',\n  labels = {\n    previous: '',\n    next: '',\n    page: 'Page {number}',\n  },\n}) => {\n  const handlePageChange = (pageNum: number) => {\n    if (onPageChange) {\n      onPageChange(pageNum)\n    }\n  }\n\n  const renderPageNumbers = () => {\n    const items: Array<React.ReactNode> = []\n\n    const addPageNumber = (pageNum: number) => {\n      const commonProps = {\n        isActive: currentPage === pageNum,\n        href: mode === 'link' ? generateHref(pageNum) : undefined,\n        anchorComponent,\n        pageLabel: labels.page,\n      }\n\n      items.push(\n        <PaginationItem\n          key={pageNum}\n          aria-label={labels.page ? labels.page.replace('{number}', pageNum.toString()) : undefined}\n        >\n          {mode === 'button' ? (\n            <Button\n              variant={commonProps.isActive ? 'primary' : 'text'}\n              size=\"sm\"\n              className={baseStyles.button}\n              onClick={(event: React.MouseEvent) => {\n                event.preventDefault()\n                handlePageChange(pageNum)\n              }}\n              aria-label={\n                labels.page ? labels.page.replace('{number}', pageNum.toString()) : `Go to page ${pageNum.toString()}`\n              }\n              aria-current={commonProps.isActive ? 'page' : undefined}\n            >\n              {pageNum}\n            </Button>\n          ) : (\n            <PaginationLink {...commonProps}>{pageNum}</PaginationLink>\n          )}\n        </PaginationItem>,\n      )\n    }\n\n    addPageNumber(1)\n\n    if (currentPage > 3) {\n      items.push(<PaginationEllipsis key=\"ellipsis-1\" />)\n    }\n\n    for (let index = Math.max(2, currentPage - 1); index <= Math.min(totalPages - 1, currentPage + 1); index++) {\n      addPageNumber(index)\n    }\n\n    if (currentPage < totalPages - 2) {\n      items.push(<PaginationEllipsis key=\"ellipsis-2\" />)\n    }\n\n    if (totalPages > 1) {\n      addPageNumber(totalPages)\n    }\n\n    return items\n  }\n\n  const commonNavProps = (page: number) => ({\n    onClick: (event: React.MouseEvent) => {\n      event.preventDefault()\n      handlePageChange(page)\n    },\n    href: generateHref(page),\n    anchorComponent,\n  })\n\n  return (\n    <PaginationRoot className={className}>\n      <PaginationContent>\n        <PaginationItem>\n          {mode === 'button' ? (\n            <Button\n              variant=\"text\"\n              size=\"sm\"\n              className={cn('flex items-center gap-2', baseStyles.button, currentPage === 1 && 'opacity-50')}\n              onClick={currentPage > 1 ? commonNavProps(currentPage - 1).onClick : undefined}\n              disabled={currentPage === 1}\n              aria-label={labels.previous === '' ? 'Go to previous page' : labels.previous}\n            >\n              <CaretLeft className=\"h-4 w-4 shrink-0\" />\n              {labels.previous && <span>{labels.previous}</span>}\n            </Button>\n          ) : (\n            <PaginationPrevious\n              {...commonNavProps(currentPage - 1)}\n              disabled={currentPage === 1}\n              previousLabel={labels.previous}\n            />\n          )}\n        </PaginationItem>\n        {renderPageNumbers()}\n        <PaginationItem>\n          {mode === 'button' ? (\n            <Button\n              variant=\"text\"\n              size=\"sm\"\n              className={cn('flex items-center gap-2', baseStyles.button, currentPage === totalPages && 'opacity-50')}\n              onClick={currentPage < totalPages ? commonNavProps(currentPage + 1).onClick : undefined}\n              disabled={currentPage === totalPages || totalPages === 0}\n              aria-label={labels.next === '' ? 'Go to next page' : labels.next}\n            >\n              {labels.next && <span>{labels.next}</span>}\n              <CaretRight className=\"h-4 w-4 shrink-0\" />\n            </Button>\n          ) : (\n            <PaginationNext\n              {...commonNavProps(currentPage + 1)}\n              disabled={currentPage === totalPages || totalPages === 0}\n              nextLabel={labels.next}\n            />\n          )}\n        </PaginationItem>\n      </PaginationContent>\n    </PaginationRoot>\n  )\n}\n\nexport {\n  PaginationRoot,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n  PaginationEllipsis,\n  Pagination,\n}\n"],"names":[],"mappings":";;;;;;;AASA;AAAmB;AACZ;AACI;AACH;AACA;AACE;AAEV;AAmFA;AAGA;AAEA;AAGA;AAEA;AAGA;AAEA;AAA6B;AAEzB;AAAwB;AACP;AACmB;AAChC;AACD;AACW;AACD;AACX;AAGF;AACE;AAGE;AAIJ;AAEA;AACE;AAAC;AAAA;AACC;AACc;AACoB;AACY;AAEvC;AAAA;AACT;AAGN;AACA;AAEA;AAAiC;AAE7B;AAAC;AAAA;AACC;AACmD;AAC9C;AACL;AACA;AACqE;AACjE;AAEJ;AAAwC;AACD;AAAA;AAAA;AAG7C;AACA;AAEA;AAA6B;AAEzB;AAAC;AAAA;AACC;AACmD;AAC9C;AACL;AACA;AACqE;AACjE;AAEH;AAA8B;AACU;AAAA;AAAA;AAG/C;AACA;AAEA;AAGA;AA+BA;AAA+C;AAC7C;AACA;AACA;AACA;AACO;AACP;AACqB;AACZ;AACG;AACJ;AACA;AAEV;AACE;AACE;AACE;AAAoB;AACtB;AAGF;AACE;AAEA;AACE;AAAoB;AACQ;AACsB;AAChD;AACkB;AAGpB;AAAM;AACJ;AAAC;AAAA;AAEiF;AAG9E;AAAC;AAAA;AAC6C;AACvC;AACiB;AAEpB;AACA;AAAwB;AAC1B;AAEsG;AAExD;AAE7C;AAAA;AAGuC;AAAA;AApBvC;AAsBP;AACF;AAGF;AAEA;AACE;AAAkD;AAGpD;AACE;AAAmB;AAGrB;AACE;AAAkD;AAGpD;AACE;AAAwB;AAG1B;AAAO;AAGT;AAA0C;AAEtC;AACA;AAAqB;AACvB;AACuB;AACvB;AAGF;AAGM;AAEI;AAAC;AAAA;AACS;AACH;AACwF;AACxB;AAC3C;AAC0C;AAEpE;AAAwC;AACG;AAAA;AAAA;AAG7C;AAAC;AAAA;AACmC;AACR;AACJ;AAAA;AAG5B;AACmB;AAGf;AAAC;AAAA;AACS;AACH;AACiG;AACxB;AACvB;AACK;AAE3D;AAAkC;AACM;AAAA;AAAA;AAG3C;AAAC;AAAA;AACmC;AACqB;AACrC;AAAA;AAGxB;AAIR;;"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport { CaretLeft, CaretRight } from '@phosphor-icons/react/dist/ssr'\nimport * as React from 'react'\n\nimport { Button, ButtonProps, buttonVariants } from '../Button'\n\nimport { cn } from '@/lib/utils'\n\nconst baseStyles = {\n  nav: 'flex justify-center',\n  content: 'flex flex-row items-center gap-1',\n  item: 'list-none',\n  link: 'outline-none',\n  button: 'min-w-8 px-2 transition-none',\n  ellipsis: 'flex h-8 w-8 items-center justify-center',\n}\n\ntype BasePaginationProps = {\n  className?: string\n}\n\ntype PaginationRootProps = BasePaginationProps & React.ComponentProps<'nav'>\ntype PaginationContentProps = BasePaginationProps & React.ComponentProps<'ul'>\ntype PaginationItemProps = BasePaginationProps & React.ComponentProps<'li'>\n\ntype AnchorComponentProps = {\n  href: string\n  className?: string\n  'aria-current'?: 'page'\n  children: React.ReactNode\n  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void\n  rel?: string\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n  disabled?: boolean\n  href?: string\n  anchorComponent?: React.ComponentType<AnchorComponentProps>\n  previousLabel?: string\n  nextLabel?: string\n} & Pick<ButtonProps, 'size'> &\n  React.ComponentProps<'a'>\n\n/** Base props shared between both link and button modes */\ntype BasePaginationComponentProps = {\n  /** The current active page number (1-based indexing) */\n  currentPage: number\n  /** The total number of available pages */\n  totalPages: number\n  /** Optional CSS class name for styling the pagination container */\n  className?: string\n  labels?: {\n    /** Text to show in the previous button (default: '') */\n    previous?: string\n    /** Text to show in the next button (default: '') */\n    next?: string\n    /** Aria label to show in the page number (default: 'Page {number}') */\n    page?: string\n  }\n}\n\n/** Props specific to link mode */\ntype LinkModePaginationProps = {\n  mode: 'link'\n  /**\n   * Custom component to use for links (e.g., Next.js Link)\n   * Must accept standard anchor props (href, className, etc.)\n   */\n  anchorComponent: React.ComponentType<AnchorComponentProps>\n  /**\n   * Function to generate the href for each page link\n   */\n  generateHref: (page: number) => string\n  /** Optional callback when page changes - not required in link mode since links handle navigation */\n  onPageChange?: (page: number) => void\n} & BasePaginationComponentProps\n\n/** Props specific to button mode */\ntype ButtonModePaginationProps = {\n  mode: 'button'\n  /** Callback function called when a page is selected - required in button mode */\n  onPageChange: (page: number) => void\n  /** These props are not used in button mode */\n  anchorComponent?: never\n  generateHref?: never\n} & BasePaginationComponentProps\n\n/** Union type for all possible pagination props */\nexport type PaginationProps =\n  | LinkModePaginationProps\n  | ButtonModePaginationProps\n  | (Omit<BasePaginationComponentProps, 'mode'> & {\n      mode: undefined\n      onPageChange: (page: number) => void\n      anchorComponent?: React.ComponentType<AnchorComponentProps>\n      generateHref?: (page: number) => string\n    })\n\nconst PaginationRoot = React.forwardRef<HTMLElement, PaginationRootProps>(({ className, ...props }, ref) => (\n  <nav ref={ref} role=\"navigation\" aria-label=\"pagination\" className={cn(baseStyles.nav, className)} {...props} />\n))\nPaginationRoot.displayName = 'PaginationRoot'\n\nconst PaginationContent = React.forwardRef<HTMLUListElement, PaginationContentProps>(({ className, ...props }, ref) => (\n  <ul ref={ref} className={cn(baseStyles.content, className)} {...props} />\n))\nPaginationContent.displayName = 'PaginationContent'\n\nconst PaginationItem = React.forwardRef<HTMLLIElement, PaginationItemProps>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(baseStyles.item, className)} {...props} />\n))\nPaginationItem.displayName = 'PaginationItem'\n\nconst PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  ({ className, isActive, size = 'sm', disabled = false, href, rel, ...props }, ref) => {\n    const buttonClassName = cn(\n      buttonVariants({\n        variant: isActive ? 'primary' : 'text',\n        size,\n      }),\n      disabled && 'opacity-50',\n      baseStyles.button,\n      className,\n    )\n\n    if (disabled) {\n      return (\n        <Button variant=\"text\" size=\"sm\" disabled className={buttonClassName}>\n          {props.children}\n        </Button>\n      )\n    }\n\n    const AnchorComponent = props.anchorComponent ?? 'a'\n\n    return (\n      <AnchorComponent\n        ref={ref}\n        href={href ?? '#'}\n        rel={rel}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(baseStyles.link, buttonClassName)}\n      >\n        {props.children}\n      </AnchorComponent>\n    )\n  },\n)\nPaginationLink.displayName = 'PaginationLink'\n\nconst PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  ({ className, disabled, href, previousLabel = '', ...props }, ref) => (\n    <PaginationLink\n      ref={ref}\n      aria-label={previousLabel || 'Go to previous page'}\n      size=\"sm\"\n      disabled={disabled}\n      href={href}\n      rel=\"prev\"\n      className={cn('flex items-center gap-2', baseStyles.button, className)}\n      {...props}\n    >\n      <CaretLeft className=\"h-4 w-4 shrink-0\" />\n      {previousLabel && <span>{previousLabel}</span>}\n    </PaginationLink>\n  ),\n)\nPaginationPrevious.displayName = 'PaginationPrevious'\n\nconst PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  ({ className, disabled, href, nextLabel = '', ...props }, ref) => (\n    <PaginationLink\n      ref={ref}\n      aria-label={nextLabel || 'Go to next page'}\n      size=\"sm\"\n      disabled={disabled}\n      href={href}\n      rel=\"next\"\n      className={cn('flex items-center gap-2', baseStyles.button, className)}\n      {...props}\n    >\n      {nextLabel && <span>{nextLabel}</span>}\n      <CaretRight className=\"h-4 w-4 shrink-0\" />\n    </PaginationLink>\n  ),\n)\nPaginationNext.displayName = 'PaginationNext'\n\nconst PaginationEllipsis = ({ className }: BasePaginationProps) => (\n  <span className={cn(baseStyles.ellipsis, className)}>...</span>\n)\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\n/**\n * A pagination component that displays page numbers and navigation controls.\n *\n * @example\n * ```tsx\n * // Basic usage with anchor tags\n * <Pagination\n *   currentPage={1}\n *   totalPages={10}\n * />\n *\n * // With Next.js Link component\n * <Pagination\n *   currentPage={1}\n *   totalPages={10}\n *   onPageChange={setPage}\n *   anchorComponent={Link}\n *   generateHref={(page) => `/posts?page=${page}`}\n * />\n *\n * // Client-side table navigation\n * <Pagination\n *   currentPage={1}\n *   totalPages={10}\n *   onPageChange={setPage}\n *   mode=\"button\"\n * />\n * ```\n */\nconst Pagination: React.FC<PaginationProps> = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n  className,\n  mode = 'button',\n  anchorComponent,\n  generateHref = () => '#',\n  labels = {\n    previous: '',\n    next: '',\n    page: 'Page {number}',\n  },\n}) => {\n  const handlePageChange = (pageNum: number) => {\n    if (onPageChange) {\n      onPageChange(pageNum)\n    }\n  }\n\n  const renderPageNumbers = () => {\n    const items: Array<React.ReactNode> = []\n\n    const addPageNumber = (pageNum: number) => {\n      const commonProps = {\n        isActive: currentPage === pageNum,\n        href: mode === 'link' ? generateHref(pageNum) : undefined,\n        anchorComponent,\n        pageLabel: labels.page,\n      }\n\n      items.push(\n        <PaginationItem\n          key={pageNum}\n          aria-label={labels.page ? labels.page.replace('{number}', pageNum.toString()) : undefined}\n        >\n          {mode === 'button' ? (\n            <Button\n              variant={commonProps.isActive ? 'primary' : 'text'}\n              size=\"sm\"\n              className={baseStyles.button}\n              onClick={(event: React.MouseEvent) => {\n                event.preventDefault()\n                handlePageChange(pageNum)\n              }}\n              aria-label={\n                labels.page ? labels.page.replace('{number}', pageNum.toString()) : `Go to page ${pageNum.toString()}`\n              }\n              aria-current={commonProps.isActive ? 'page' : undefined}\n            >\n              {pageNum}\n            </Button>\n          ) : (\n            <PaginationLink {...commonProps}>{pageNum}</PaginationLink>\n          )}\n        </PaginationItem>,\n      )\n    }\n\n    addPageNumber(1)\n\n    if (currentPage > 3) {\n      items.push(<PaginationEllipsis key=\"ellipsis-1\" />)\n    }\n\n    for (let index = Math.max(2, currentPage - 1); index <= Math.min(totalPages - 1, currentPage + 1); index++) {\n      addPageNumber(index)\n    }\n\n    if (currentPage < totalPages - 2) {\n      items.push(<PaginationEllipsis key=\"ellipsis-2\" />)\n    }\n\n    if (totalPages > 1) {\n      addPageNumber(totalPages)\n    }\n\n    return items\n  }\n\n  const commonNavProps = (page: number) => ({\n    onClick: (event: React.MouseEvent) => {\n      event.preventDefault()\n      handlePageChange(page)\n    },\n    href: generateHref(page),\n    anchorComponent,\n  })\n\n  return (\n    <PaginationRoot className={className}>\n      <PaginationContent>\n        <PaginationItem>\n          {mode === 'button' ? (\n            <Button\n              variant=\"text\"\n              size=\"sm\"\n              className={cn('flex items-center gap-2', baseStyles.button, currentPage === 1 && 'opacity-50')}\n              onClick={currentPage > 1 ? commonNavProps(currentPage - 1).onClick : undefined}\n              disabled={currentPage === 1}\n              aria-label={labels.previous === '' ? 'Go to previous page' : labels.previous}\n            >\n              <CaretLeft className=\"h-4 w-4 shrink-0\" />\n              {labels.previous && <span>{labels.previous}</span>}\n            </Button>\n          ) : (\n            <PaginationPrevious\n              {...commonNavProps(currentPage - 1)}\n              disabled={currentPage === 1}\n              previousLabel={labels.previous}\n            />\n          )}\n        </PaginationItem>\n        {renderPageNumbers()}\n        <PaginationItem>\n          {mode === 'button' ? (\n            <Button\n              variant=\"text\"\n              size=\"sm\"\n              className={cn('flex items-center gap-2', baseStyles.button, currentPage === totalPages && 'opacity-50')}\n              onClick={currentPage < totalPages ? commonNavProps(currentPage + 1).onClick : undefined}\n              disabled={currentPage === totalPages || totalPages === 0}\n              aria-label={labels.next === '' ? 'Go to next page' : labels.next}\n            >\n              {labels.next && <span>{labels.next}</span>}\n              <CaretRight className=\"h-4 w-4 shrink-0\" />\n            </Button>\n          ) : (\n            <PaginationNext\n              {...commonNavProps(currentPage + 1)}\n              disabled={currentPage === totalPages || totalPages === 0}\n              nextLabel={labels.next}\n            />\n          )}\n        </PaginationItem>\n      </PaginationContent>\n    </PaginationRoot>\n  )\n}\n\nexport {\n  PaginationRoot,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n  PaginationEllipsis,\n  Pagination,\n}\n"],"names":[],"mappings":";;;;;;;AASA;AAAmB;AACZ;AACI;AACH;AACA;AACE;AAEV;AAoFA;AAGA;AAEA;AAGA;AAEA;AAGA;AAEA;AAA6B;AAEzB;AAAwB;AACP;AACmB;AAChC;AACD;AACW;AACD;AACX;AAGF;AACE;AAGE;AAIJ;AAEA;AACE;AAAC;AAAA;AACC;AACc;AACd;AACkC;AACY;AAEvC;AAAA;AACT;AAGN;AACA;AAEA;AAAiC;AAE7B;AAAC;AAAA;AACC;AAC6B;AACxB;AACL;AACA;AACI;AACiE;AACjE;AAEJ;AAAwC;AACD;AAAA;AAAA;AAG7C;AACA;AAEA;AAA6B;AAEzB;AAAC;AAAA;AACC;AACyB;AACpB;AACL;AACA;AACI;AACiE;AACjE;AAEH;AAA8B;AACU;AAAA;AAAA;AAG/C;AACA;AAEA;AAGA;AA+BA;AAA+C;AAC7C;AACA;AACA;AACA;AACO;AACP;AACqB;AACZ;AACG;AACJ;AACA;AAEV;AACE;AACE;AACE;AAAoB;AACtB;AAGF;AACE;AAEA;AACE;AAAoB;AACQ;AACsB;AAChD;AACkB;AAGpB;AAAM;AACJ;AAAC;AAAA;AAEiF;AAG9E;AAAC;AAAA;AAC6C;AACvC;AACiB;AAEpB;AACA;AAAwB;AAC1B;AAEsG;AAExD;AAE7C;AAAA;AAGuC;AAAA;AApBvC;AAsBP;AACF;AAGF;AAEA;AACE;AAAkD;AAGpD;AACE;AAAmB;AAGrB;AACE;AAAkD;AAGpD;AACE;AAAwB;AAG1B;AAAO;AAGT;AAA0C;AAEtC;AACA;AAAqB;AACvB;AACuB;AACvB;AAGF;AAGM;AAEI;AAAC;AAAA;AACS;AACH;AACwF;AACxB;AAC3C;AAC0C;AAEpE;AAAwC;AACG;AAAA;AAAA;AAG7C;AAAC;AAAA;AACmC;AACR;AACJ;AAAA;AAG5B;AACmB;AAGf;AAAC;AAAA;AACS;AACH;AACiG;AACxB;AACvB;AACK;AAE3D;AAAkC;AACM;AAAA;AAAA;AAG3C;AAAC;AAAA;AACmC;AACqB;AACrC;AAAA;AAGxB;AAIR;;"}

package/dist/components/TruncatedTypographyWithTooltip/TruncatedTypographyWithTooltip.js

@@ -1,11 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import { cn } from '../../lib/utils.js';
+import { Popover } from '../Popover/Popover.js';
 import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
 import { Typography } from '../Typography/Typography.js';
+import { useIsMobile } from '../../lib/useMobile.js';
 
 const TruncatedTypographyWithTooltip = ({ label, ...props }) => {
   const textRef = useRef(null);
+  const isMobile = useIsMobile();
   const [isTruncated, setIsTruncated] = useState(false);
   useEffect(() => {
     const checkTruncation = () => {
@@ -20,7 +23,15 @@ const TruncatedTypographyWithTooltip = ({ label, ...props }) => {
       window.removeEventListener("resize", checkTruncation);
     };
   }, [label]);
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { delayDuration: 500, children: [
+  return isMobile && isTruncated ? /* @__PURE__ */ jsx(
+    Popover,
+    {
+      side: "top",
+      triggerElement: /* @__PURE__ */ jsx(Typography, { ...props, ref: textRef, className: cn(props.className, "truncate"), children: label }),
+      ...props,
+      children: label
+    }
+  ) : /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { delayDuration: 500, children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Typography, { ...props, ref: textRef, className: cn(props.className, "truncate"), children: label }) }),
     isTruncated && /* @__PURE__ */ jsx(TooltipContent, { children: label })
   ] }) });

package/dist/components/TruncatedTypographyWithTooltip/TruncatedTypographyWithTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"TruncatedTypographyWithTooltip.js","sources":["../../../src/components/TruncatedTypographyWithTooltip/TruncatedTypographyWithTooltip.tsx"],"sourcesContent":["import { ComponentProps, useEffect, useRef, useState } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { Typography } from '../Typography'\n\ntype TruncatedTypographyWithTooltipProps = {\n  label: string\n} & Omit<ComponentProps<typeof Typography>, 'children'>\n\nexport const TruncatedTypographyWithTooltip = ({ label, ...props }: TruncatedTypographyWithTooltipProps) => {\n  const textRef = useRef<HTMLParagraphElement>(null)\n  const [isTruncated, setIsTruncated] = useState(false)\n\n  useEffect(() => {\n    const checkTruncation = () => {\n      if (textRef.current) {\n        setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth)\n      }\n    }\n\n    const frame = requestAnimationFrame(checkTruncation)\n    window.addEventListener('resize', checkTruncation)\n\n    return () => {\n      cancelAnimationFrame(frame)\n      window.removeEventListener('resize', checkTruncation)\n    }\n  }, [label])\n\n  return (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={500}>\n        <TooltipTrigger asChild>\n          <Typography {...props} ref={textRef} className={cn(props.className, 'truncate')}>\n            {label}\n          </Typography>\n        </TooltipTrigger>\n        {isTruncated && <TooltipContent>{label}</TooltipContent>}\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,iCAAiC,CAAC,EAAE,KAAA,EAAO,GAAG,OAAM,KAA2C;AAC1G,EAAA,MAAM,OAAA,GAAU,OAA6B,IAAI,CAAA;AACjD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,QAAA,cAAA,CAAe,OAAA,CAAQ,OAAA,CAAQ,WAAA,GAAc,OAAA,CAAQ,QAAQ,WAAW,CAAA;AAAA;AAC1E,KACF;AAEA,IAAA,MAAM,KAAA,GAAQ,sBAAsB,eAAe,CAAA;AACnD,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,eAAe,CAAA;AAEjD,IAAA,OAAO,MAAM;AACX,MAAA,oBAAA,CAAqB,KAAK,CAAA;AAC1B,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,eAAe,CAAA;AAAA,KACtD;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,WAAA,EAAA,EAAY,eAAe,GAAA,EAC1B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAY,GAAG,KAAA,EAAO,GAAA,EAAK,OAAA,EAAS,SAAA,EAAW,GAAG,KAAA,CAAM,SAAA,EAAW,UAAU,CAAA,EAC3E,iBACH,CAAA,EACF,CAAA;AAAA,IACC,WAAA,oBAAe,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACzC,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TruncatedTypographyWithTooltip.js","sources":["../../../src/components/TruncatedTypographyWithTooltip/TruncatedTypographyWithTooltip.tsx"],"sourcesContent":["import { ComponentProps, useEffect, useRef, useState } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { Popover } from '../Popover'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { Typography } from '../Typography'\n\nimport { useIsMobile } from '@/lib/useMobile'\n\ntype TruncatedTypographyWithTooltipProps = {\n  label: string\n} & Omit<ComponentProps<typeof Typography>, 'children'>\n\nexport const TruncatedTypographyWithTooltip = ({ label, ...props }: TruncatedTypographyWithTooltipProps) => {\n  const textRef = useRef<HTMLParagraphElement>(null)\n  const isMobile = useIsMobile()\n  const [isTruncated, setIsTruncated] = useState(false)\n\n  useEffect(() => {\n    const checkTruncation = () => {\n      if (textRef.current) {\n        setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth)\n      }\n    }\n\n    const frame = requestAnimationFrame(checkTruncation)\n    window.addEventListener('resize', checkTruncation)\n\n    return () => {\n      cancelAnimationFrame(frame)\n      window.removeEventListener('resize', checkTruncation)\n    }\n  }, [label])\n\n  return isMobile && isTruncated ? (\n    <Popover\n      side=\"top\"\n      triggerElement={\n        <Typography {...props} ref={textRef} className={cn(props.className, 'truncate')}>\n          {label}\n        </Typography>\n      }\n      {...props}\n    >\n      {label}\n    </Popover>\n  ) : (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={500}>\n        <TooltipTrigger asChild>\n          <Typography {...props} ref={textRef} className={cn(props.className, 'truncate')}>\n            {label}\n          </Typography>\n        </TooltipTrigger>\n        {isTruncated && <TooltipContent>{label}</TooltipContent>}\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,iCAAiC,CAAC,EAAE,KAAA,EAAO,GAAG,OAAM,KAA2C;AAC1G,EAAA,MAAM,OAAA,GAAU,OAA6B,IAAI,CAAA;AACjD,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,QAAA,cAAA,CAAe,OAAA,CAAQ,OAAA,CAAQ,WAAA,GAAc,OAAA,CAAQ,QAAQ,WAAW,CAAA;AAAA;AAC1E,KACF;AAEA,IAAA,MAAM,KAAA,GAAQ,sBAAsB,eAAe,CAAA;AACnD,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,eAAe,CAAA;AAEjD,IAAA,OAAO,MAAM;AACX,MAAA,oBAAA,CAAqB,KAAK,CAAA;AAC1B,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,eAAe,CAAA;AAAA,KACtD;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,OAAO,YAAY,WAAA,mBACjB,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,KAAA;AAAA,MACL,cAAA,kBACE,GAAA,CAAC,UAAA,EAAA,EAAY,GAAG,KAAA,EAAO,GAAA,EAAK,OAAA,EAAS,SAAA,EAAW,EAAA,CAAG,KAAA,CAAM,SAAA,EAAW,UAAU,GAC3E,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MAED,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,sBAGH,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,WAAA,EAAA,EAAY,eAAe,GAAA,EAC1B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAY,GAAG,KAAA,EAAO,GAAA,EAAK,OAAA,EAAS,SAAA,EAAW,GAAG,KAAA,CAAM,SAAA,EAAW,UAAU,CAAA,EAC3E,iBACH,CAAA,EACF,CAAA;AAAA,IACC,WAAA,oBAAe,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACzC,CAAA,EACF,CAAA;AAEJ;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "3.36.0",
+  "version": "3.38.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",