@persona/design-system 0.1.5-pre.4 → 0.1.6

package/dist/MiddleTruncatedText-Bzpg3zAU.mjs

@@ -0,0 +1,171 @@
+import { Typography } from "@persona/design-tokens";
+import styled from "styled-components";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region lib/middleTruncateText.ts
+const ELLIPSIS = "…";
+const DEFAULT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;
+const MEASUREMENT_TOLERANCE_PX = 1;
+function createMeasurementCanvas() {
+	const canvas = document.createElement("canvas");
+	const cleanup = () => {
+		canvas.width = 0;
+		canvas.height = 0;
+		canvas.remove();
+	};
+	return [canvas, cleanup];
+}
+function buildMiddleTruncatedText(text, charsToShow) {
+	if (charsToShow >= text.length) return text;
+	if (charsToShow <= 1) return ELLIPSIS.slice(0, Math.max(charsToShow, 0));
+	const contentChars = charsToShow - 1;
+	const front = Math.ceil(contentChars / 2);
+	const back = Math.floor(contentChars / 2);
+	return text.slice(0, front) + ELLIPSIS + text.slice(text.length - back);
+}
+function isMiddleTruncated(displayText, fullText) {
+	return displayText !== fullText;
+}
+function parseMaxWidthPx(maxWidth) {
+	if (typeof maxWidth === "number") return maxWidth;
+	if (maxWidth.endsWith("px")) {
+		const parsed = Number.parseFloat(maxWidth);
+		return Number.isNaN(parsed) ? null : parsed;
+	}
+	return null;
+}
+function measureTextWidth(text, font = DEFAULT_FONT) {
+	const [canvas, cleanupCanvas] = createMeasurementCanvas();
+	try {
+		const context = canvas.getContext("2d");
+		if (!context) return text.length * 6;
+		context.font = font;
+		const measuredWidth = context.measureText(text).width;
+		const minimumReasonableWidth = text.length * 4;
+		if (measuredWidth === 0 || measuredWidth < minimumReasonableWidth) return text.length * 6;
+		return measuredWidth;
+	} finally {
+		cleanupCanvas();
+	}
+}
+function findMiddleTruncatedTextForWidth(text, maxWidthPx, font = DEFAULT_FONT) {
+	const fitBudget = maxWidthPx + MEASUREMENT_TOLERANCE_PX;
+	if (measureTextWidth(text, font) <= fitBudget) return text;
+	let low = 1;
+	let high = text.length;
+	let bestDisplay = buildMiddleTruncatedText(text, 1);
+	while (low <= high) {
+		const mid = Math.floor((low + high) / 2);
+		const candidate = buildMiddleTruncatedText(text, mid);
+		if (measureTextWidth(candidate, font) <= fitBudget) {
+			bestDisplay = candidate;
+			low = mid + 1;
+		} else high = mid - 1;
+	}
+	return bestDisplay;
+}
+function findMaxMiddleTruncatedCharsThatFit(element, text, maxWidthPx, font) {
+	const measuredWidth = element.clientWidth > 0 ? element.clientWidth : null;
+	const parsedMaxWidth = maxWidthPx ?? parseMaxWidthPx(element.style.maxWidth);
+	const widthBudget = measuredWidth != null && parsedMaxWidth != null ? Math.min(measuredWidth, parsedMaxWidth) : measuredWidth ?? parsedMaxWidth;
+	if (widthBudget != null && widthBudget > 0) {
+		const displayText = findMiddleTruncatedTextForWidth(text, widthBudget, font);
+		return {
+			displayText,
+			charsToShow: displayText.length
+		};
+	}
+	element.textContent = text;
+	if (element.scrollWidth <= element.clientWidth) return {
+		displayText: text,
+		charsToShow: text.length
+	};
+	let low = 1;
+	let high = text.length;
+	let bestCharsToShow = 1;
+	let bestDisplay = buildMiddleTruncatedText(text, 1);
+	while (low <= high) {
+		const mid = Math.floor((low + high) / 2);
+		const candidate = buildMiddleTruncatedText(text, mid);
+		element.textContent = candidate;
+		if (element.scrollWidth <= element.clientWidth) {
+			bestCharsToShow = mid;
+			bestDisplay = candidate;
+			low = mid + 1;
+		} else high = mid - 1;
+	}
+	return {
+		displayText: bestDisplay,
+		charsToShow: bestCharsToShow
+	};
+}
+//#endregion
+//#region lib/MiddleTruncatedText.tsx
+const TruncationSpan = styled.span`
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  min-width: 0;
+  position: relative;
+`;
+const AccessibleText = styled.span`
+  opacity: 0;
+  user-select: text;
+`;
+const VisualTruncatedText = styled.span`
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  color: inherit;
+  pointer-events: none;
+`;
+const MiddleTruncatedText = ({ value, maxWidth = "96px", font, titleBehavior = "conditional", onTruncatedChange, "aria-label": ariaLabel, style, ...props }) => {
+	const ref = useRef(null);
+	const [displayText, setDisplayText] = useState(value);
+	const maxWidthPx = parseMaxWidthPx(maxWidth);
+	const updateTruncation = useCallback((element) => {
+		const { displayText: nextDisplayText } = findMaxMiddleTruncatedCharsThatFit(element, value, maxWidthPx, font);
+		setDisplayText((current) => current === nextDisplayText ? current : nextDisplayText);
+		onTruncatedChange?.(isMiddleTruncated(nextDisplayText, value));
+	}, [
+		value,
+		maxWidthPx,
+		font,
+		onTruncatedChange
+	]);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		updateTruncation(element);
+		let cancelled = false;
+		document.fonts?.ready.then(() => {
+			if (!cancelled) updateTruncation(element);
+		});
+		const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => updateTruncation(element));
+		resizeObserver?.observe(element);
+		return () => {
+			cancelled = true;
+			resizeObserver?.disconnect();
+		};
+	}, [maxWidth, updateTruncation]);
+	const isTruncated = isMiddleTruncated(displayText, value);
+	return /* @__PURE__ */ jsx(TruncationSpan, {
+		ref,
+		style: {
+			...style,
+			maxWidth
+		},
+		"aria-label": ariaLabel ?? (isTruncated ? value : void 0),
+		title: titleBehavior !== "never" && (titleBehavior === "always" || isTruncated) ? value : void 0,
+		...props,
+		children: isTruncated ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AccessibleText, { children: value }), /* @__PURE__ */ jsx(VisualTruncatedText, {
+			"aria-hidden": "true",
+			children: displayText
+		})] }) : displayText
+	});
+};
+//#endregion
+export { MiddleTruncatedText as t };
+
+//# sourceMappingURL=MiddleTruncatedText-Bzpg3zAU.mjs.map

package/dist/MiddleTruncatedText-Bzpg3zAU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiddleTruncatedText-Bzpg3zAU.mjs","names":[],"sources":["../lib/middleTruncateText.ts","../lib/MiddleTruncatedText.tsx"],"sourcesContent":["import { Typography } from '@persona/design-tokens';\n\nconst ELLIPSIS = '…';\nconst DEFAULT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;\nconst MEASUREMENT_TOLERANCE_PX = 1;\n\nfunction createMeasurementCanvas(): [HTMLCanvasElement, () => void] {\n  // oxlint-disable-next-line persona-web/document-create-element-canvas\n  const canvas = document.createElement('canvas');\n  const cleanup = () => {\n    canvas.width = 0;\n    canvas.height = 0;\n    canvas.remove();\n  };\n\n  return [canvas, cleanup];\n}\n\nexport function buildMiddleTruncatedText(text: string, charsToShow: number): string {\n  if (charsToShow >= text.length) {\n    return text;\n  }\n\n  if (charsToShow <= ELLIPSIS.length) {\n    return ELLIPSIS.slice(0, Math.max(charsToShow, 0));\n  }\n\n  const contentChars = charsToShow - ELLIPSIS.length;\n  const front = Math.ceil(contentChars / 2);\n  const back = Math.floor(contentChars / 2);\n\n  return text.slice(0, front) + ELLIPSIS + text.slice(text.length - back);\n}\n\nexport function isMiddleTruncated(displayText: string, fullText: string): boolean {\n  return displayText !== fullText;\n}\n\nexport function parseMaxWidthPx(maxWidth: number | string): number | null {\n  if (typeof maxWidth === 'number') {\n    return maxWidth;\n  }\n\n  if (maxWidth.endsWith('px')) {\n    const parsed = Number.parseFloat(maxWidth);\n    return Number.isNaN(parsed) ? null : parsed;\n  }\n\n  return null;\n}\n\nexport function measureTextWidth(text: string, font = DEFAULT_FONT): number {\n  const [canvas, cleanupCanvas] = createMeasurementCanvas();\n\n  try {\n    const context = canvas.getContext('2d');\n\n    if (!context) {\n      return text.length * 6;\n    }\n\n    context.font = font;\n    const measuredWidth = context.measureText(text).width;\n    const minimumReasonableWidth = text.length * 4;\n\n    if (measuredWidth === 0 || measuredWidth < minimumReasonableWidth) {\n      return text.length * 6;\n    }\n\n    return measuredWidth;\n  } finally {\n    cleanupCanvas();\n  }\n}\n\nexport function findMiddleTruncatedTextForWidth(\n  text: string,\n  maxWidthPx: number,\n  font = DEFAULT_FONT,\n): string {\n  const fitBudget = maxWidthPx + MEASUREMENT_TOLERANCE_PX;\n\n  if (measureTextWidth(text, font) <= fitBudget) {\n    return text;\n  }\n\n  let low = ELLIPSIS.length;\n  let high = text.length;\n  let bestDisplay = buildMiddleTruncatedText(text, ELLIPSIS.length);\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const candidate = buildMiddleTruncatedText(text, mid);\n\n    if (measureTextWidth(candidate, font) <= fitBudget) {\n      bestDisplay = candidate;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return bestDisplay;\n}\n\nexport function findMaxMiddleTruncatedCharsThatFit(\n  element: HTMLElement,\n  text: string,\n  maxWidthPx?: number | null,\n  font?: string,\n): { displayText: string; charsToShow: number } {\n  const measuredWidth = element.clientWidth > 0 ? element.clientWidth : null;\n  const parsedMaxWidth = maxWidthPx ?? parseMaxWidthPx(element.style.maxWidth);\n  const widthBudget =\n    measuredWidth != null && parsedMaxWidth != null\n      ? Math.min(measuredWidth, parsedMaxWidth)\n      : (measuredWidth ?? parsedMaxWidth);\n\n  if (widthBudget != null && widthBudget > 0) {\n    const displayText = findMiddleTruncatedTextForWidth(text, widthBudget, font);\n    return { displayText, charsToShow: displayText.length };\n  }\n\n  element.textContent = text;\n  if (element.scrollWidth <= element.clientWidth) {\n    return { displayText: text, charsToShow: text.length };\n  }\n\n  let low = ELLIPSIS.length;\n  let high = text.length;\n  let bestCharsToShow = ELLIPSIS.length;\n  let bestDisplay = buildMiddleTruncatedText(text, ELLIPSIS.length);\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const candidate = buildMiddleTruncatedText(text, mid);\n    element.textContent = candidate;\n\n    if (element.scrollWidth <= element.clientWidth) {\n      bestCharsToShow = mid;\n      bestDisplay = candidate;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return { displayText: bestDisplay, charsToShow: bestCharsToShow };\n}\n","import {\n  type ComponentPropsWithoutRef,\n  type FC,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  findMaxMiddleTruncatedCharsThatFit,\n  isMiddleTruncated,\n  parseMaxWidthPx,\n} from './middleTruncateText';\n\nconst TruncationSpan = styled.span`\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  min-width: 0;\n  position: relative;\n`;\n\nconst AccessibleText = styled.span`\n  opacity: 0;\n  user-select: text;\n`;\n\nconst VisualTruncatedText = styled.span`\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  color: inherit;\n  pointer-events: none;\n`;\n\nexport interface MiddleTruncatedTextProps extends ComponentPropsWithoutRef<'span'> {\n  value: string;\n  maxWidth?: number | string;\n  font?: string;\n  titleBehavior?: 'always' | 'conditional' | 'never';\n  onTruncatedChange?: (isTruncated: boolean) => void;\n}\n\nexport const MiddleTruncatedText: FC<MiddleTruncatedTextProps> = ({\n  value,\n  maxWidth = '96px',\n  font,\n  titleBehavior = 'conditional',\n  onTruncatedChange,\n  'aria-label': ariaLabel,\n  style,\n  ...props\n}) => {\n  const ref = useRef<HTMLSpanElement>(null);\n  const [displayText, setDisplayText] = useState(value);\n  const maxWidthPx = parseMaxWidthPx(maxWidth);\n\n  const updateTruncation = useCallback(\n    (element: HTMLElement) => {\n      const { displayText: nextDisplayText } = findMaxMiddleTruncatedCharsThatFit(\n        element,\n        value,\n        maxWidthPx,\n        font,\n      );\n      setDisplayText((current) => (current === nextDisplayText ? current : nextDisplayText));\n      onTruncatedChange?.(isMiddleTruncated(nextDisplayText, value));\n    },\n    [value, maxWidthPx, font, onTruncatedChange],\n  );\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      return;\n    }\n\n    updateTruncation(element);\n\n    let cancelled = false;\n    void document.fonts?.ready.then(() => {\n      if (!cancelled) {\n        updateTruncation(element);\n      }\n    });\n\n    const resizeObserver =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(() => updateTruncation(element));\n    resizeObserver?.observe(element);\n\n    return () => {\n      cancelled = true;\n      resizeObserver?.disconnect();\n    };\n  }, [maxWidth, updateTruncation]);\n\n  const isTruncated = isMiddleTruncated(displayText, value);\n\n  return (\n    <TruncationSpan\n      ref={ref}\n      style={{ ...style, maxWidth }}\n      aria-label={ariaLabel ?? (isTruncated ? value : undefined)}\n      title={\n        titleBehavior !== 'never' && (titleBehavior === 'always' || isTruncated) ? value : undefined\n      }\n      {...props}\n    >\n      {isTruncated ? (\n        <>\n          <AccessibleText>{value}</AccessibleText>\n          <VisualTruncatedText aria-hidden='true'>{displayText}</VisualTruncatedText>\n        </>\n      ) : (\n        displayText\n      )}\n    </TruncationSpan>\n  );\n};\n\nexport default MiddleTruncatedText;\n"],"mappings":"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"}

package/dist/Modal.d.mts

@@ -1,9 +1,9 @@
-import { r as ButtonProps } from "./Button-DqDLGURJ.mjs";
+import { r as ButtonProps } from "./Button-DcTUxRNI.mjs";
 import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_aria_components0 from "react-aria-components";
 import { Dialog, DialogTrigger, Pressable } from "react-aria-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Modal/Modal.d.ts
 declare const ModalTrigger: typeof DialogTrigger;

package/dist/PageHeader.d.mts

@@ -1,6 +1,6 @@
 import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/PageHeader/PageHeader.d.ts
 declare const PageHeaderContainer: _$styled_components0.StyledComponent<"header", any, {}, never>;

package/dist/PageSelector-COqR1tdA.d.cts

@@ -0,0 +1,30 @@
+import { n as HStackProps } from "./Stack-B5VYkPBe.cjs";
+import { t as PaginationParams } from "./types-CmnKGG5I.cjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Pagination/PageSelector.d.ts
+declare const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
+declare const PageInput: _$styled_components0.StyledComponent<(props: HStackProps) => _$react_jsx_runtime0.JSX.Element, any, {
+  align: "center";
+}, "align">;
+interface PageSelectorProps {
+  paginationParams: PaginationParams;
+  handlePageLinkClick: (pageNumber: number) => void;
+  isLoading?: boolean;
+  /**
+   * Called with the new page number after the page changes (next, prev, or
+   * typed input). Lets the consumer react to page changes -- e.g. scroll the
+   * page back to the top.
+   */
+  onPageChange?: (pageNumber: number) => void;
+}
+declare function PageSelector({
+  paginationParams,
+  handlePageLinkClick,
+  isLoading,
+  onPageChange
+}: PageSelectorProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageInput as n, PageSelector as r, PAGE_LIMIT_BEFORE_SCROLL_MODE as t };
+//# sourceMappingURL=PageSelector-COqR1tdA.d.cts.map

package/dist/PageSelector-mn6q4SKY.d.mts

@@ -0,0 +1,30 @@
+import { n as HStackProps } from "./Stack-Du7tLSPC.mjs";
+import { t as PaginationParams } from "./types-DMjr-u_o.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/Pagination/PageSelector.d.ts
+declare const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
+declare const PageInput: _$styled_components0.StyledComponent<(props: HStackProps) => _$react_jsx_runtime0.JSX.Element, any, {
+  align: "center";
+}, "align">;
+interface PageSelectorProps {
+  paginationParams: PaginationParams;
+  handlePageLinkClick: (pageNumber: number) => void;
+  isLoading?: boolean;
+  /**
+   * Called with the new page number after the page changes (next, prev, or
+   * typed input). Lets the consumer react to page changes -- e.g. scroll the
+   * page back to the top.
+   */
+  onPageChange?: (pageNumber: number) => void;
+}
+declare function PageSelector({
+  paginationParams,
+  handlePageLinkClick,
+  isLoading,
+  onPageChange
+}: PageSelectorProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageInput as n, PageSelector as r, PAGE_LIMIT_BEFORE_SCROLL_MODE as t };
+//# sourceMappingURL=PageSelector-mn6q4SKY.d.mts.map

package/dist/PageSelector.d.cts

@@ -1,30 +1,2 @@
-import { n as HStackProps } from "./Stack-toDRLy--.cjs";
-import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-import { PaginationParams } from "lib/interfaces/api";
-
-//#region components/Pagination/PageSelector.d.ts
-declare const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
-declare const PageInput: _$styled_components0.StyledComponent<(props: HStackProps) => _$react_jsx_runtime0.JSX.Element, any, {
-  align: "center";
-}, "align">;
-interface PageSelectorProps {
-  paginationParams: PaginationParams;
-  handlePageLinkClick: (pageNumber: number) => void;
-  isLoading?: boolean;
-  /**
-   * Called with the new page number after the page changes (next, prev, or
-   * typed input). Lets the consumer react to page changes -- e.g. scroll the
-   * page back to the top.
-   */
-  onPageChange?: (pageNumber: number) => void;
-}
-declare function PageSelector({
-  paginationParams,
-  handlePageLinkClick,
-  isLoading,
-  onPageChange
-}: PageSelectorProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageInput, PageSelector as default };
-//# sourceMappingURL=PageSelector.d.cts.map
+import { n as PageInput, r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "./PageSelector-COqR1tdA.cjs";
+export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageInput, PageSelector as default };

package/dist/PageSelector.d.mts

@@ -1,30 +1,2 @@
-import { n as HStackProps } from "./Stack-BntgUvsW.mjs";
-import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { PaginationParams } from "lib/interfaces/api";
-
-//#region components/Pagination/PageSelector.d.ts
-declare const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
-declare const PageInput: _$styled_components0.StyledComponent<(props: HStackProps) => _$react_jsx_runtime0.JSX.Element, any, {
-  align: "center";
-}, "align">;
-interface PageSelectorProps {
-  paginationParams: PaginationParams;
-  handlePageLinkClick: (pageNumber: number) => void;
-  isLoading?: boolean;
-  /**
-   * Called with the new page number after the page changes (next, prev, or
-   * typed input). Lets the consumer react to page changes -- e.g. scroll the
-   * page back to the top.
-   */
-  onPageChange?: (pageNumber: number) => void;
-}
-declare function PageSelector({
-  paginationParams,
-  handlePageLinkClick,
-  isLoading,
-  onPageChange
-}: PageSelectorProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageInput, PageSelector as default };
-//# sourceMappingURL=PageSelector.d.mts.map
+import { n as PageInput, r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "./PageSelector-mn6q4SKY.mjs";
+export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageInput, PageSelector as default };

package/dist/Pagination-BUjpYIwq.d.mts

@@ -0,0 +1,33 @@
+import { t as PaginationParams } from "./types-DMjr-u_o.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/Pagination/Pagination.d.ts
+declare const PaginationInfo: _$styled_components0.StyledComponent<"div", any, {}, never>;
+interface PaginationProps {
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  paginationParams?: PaginationParams;
+  handlePageSizeClick: (pageSize: number) => void;
+  handlePageLinkClick: (pageNumber: number) => void;
+  isLoading?: boolean;
+  showPageSizeSelector?: boolean;
+  /**
+   * Called with the new page number after the page changes. Lets the consumer
+   * react to page changes -- e.g. scroll the page back to the top.
+   */
+  onPageChange?: (pageNumber: number) => void;
+}
+declare const Pagination: ({
+  pageSize,
+  pageSizeOptions,
+  paginationParams,
+  handlePageSizeClick,
+  handlePageLinkClick,
+  isLoading,
+  showPageSizeSelector,
+  onPageChange
+}: PaginationProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PaginationInfo as n, Pagination as t };
+//# sourceMappingURL=Pagination-BUjpYIwq.d.mts.map

package/dist/Pagination-CeoHVtYD.d.cts

@@ -0,0 +1,33 @@
+import { t as PaginationParams } from "./types-CmnKGG5I.cjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Pagination/Pagination.d.ts
+declare const PaginationInfo: _$styled_components0.StyledComponent<"div", any, {}, never>;
+interface PaginationProps {
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  paginationParams?: PaginationParams;
+  handlePageSizeClick: (pageSize: number) => void;
+  handlePageLinkClick: (pageNumber: number) => void;
+  isLoading?: boolean;
+  showPageSizeSelector?: boolean;
+  /**
+   * Called with the new page number after the page changes. Lets the consumer
+   * react to page changes -- e.g. scroll the page back to the top.
+   */
+  onPageChange?: (pageNumber: number) => void;
+}
+declare const Pagination: ({
+  pageSize,
+  pageSizeOptions,
+  paginationParams,
+  handlePageSizeClick,
+  handlePageLinkClick,
+  isLoading,
+  showPageSizeSelector,
+  onPageChange
+}: PaginationProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PaginationInfo as n, Pagination as t };
+//# sourceMappingURL=Pagination-CeoHVtYD.d.cts.map

package/dist/Pagination-DEZFb552.cjs

@@ -0,0 +1,232 @@
+const require_chunk = require("./chunk-CKQMccvm.cjs");
+const require_Stack = require("./Stack-BF-9YjA1.cjs");
+const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
+const require_Input = require("./Input-DQS-BEym.cjs");
+const require_Select = require("./Select-CowngLd7.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lodash_fp_js = require("lodash/fp.js");
+//#region components/Pagination/constants.ts
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+	10,
+	25,
+	50,
+	100,
+	300
+];
+const MIN_PAGE_SIZE = 10;
+//#endregion
+//#region components/Pagination/PageSelector.tsx
+const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
+const PageSelectorStack = (0, styled_components.default)(require_Stack.HStack).attrs({ justify: "flex-end" })`
+  padding: ${_persona_design_tokens.Spacing[2]};
+`;
+const PageInput = (0, styled_components.default)(require_Stack.HStack).attrs({ align: "center" })`
+  white-space: nowrap;
+`;
+function PageSelector({ paginationParams, handlePageLinkClick, isLoading, onPageChange }) {
+	const { "current-page": currentPage, "total-pages": totalPages, "lower-bound": lowerBound } = paginationParams ?? {};
+	const [selectedPage, setSelectedPage] = (0, react.useState)(currentPage);
+	const handlePageLinkClickDebounced = (0, react.useMemo)(() => (0, lodash_fp_js.debounce)(500, handlePageLinkClick), [handlePageLinkClick]);
+	(0, react.useEffect)(() => {
+		if (currentPage != null) setSelectedPage(currentPage);
+	}, [currentPage]);
+	if (!paginationParams) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageSelectorStack, {
+		"data-test": "pagination__page-selector",
+		id: "pagination__page-selector",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageInput, { children: [
+				totalPages < 100 && !lowerBound ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
+					"aria-label": "Go to page number",
+					size: "sm",
+					inputSize: 2,
+					onChange: (e) => {
+						const value = e.target.valueAsNumber;
+						if (Number.isNaN(value)) setSelectedPage(void 0);
+						else {
+							setSelectedPage(value);
+							const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);
+							handlePageLinkClickDebounced(boundedValue);
+							onPageChange?.(boundedValue);
+						}
+					},
+					onBlur: (e) => {
+						if (Number.isNaN(e.target.valueAsNumber)) setSelectedPage(currentPage);
+					},
+					min: 1,
+					max: totalPages,
+					type: "number",
+					disabled: isLoading,
+					value: selectedPage ?? ""
+				}) : currentPage + " ",
+				"of ",
+				lowerBound ? "many" : totalPages,
+				" pages"
+			] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+				id: "pagination__page-selector--left",
+				disabled: currentPage === 1 || isLoading,
+				onClick: () => {
+					if (currentPage !== 1) {
+						const prevPageNum = currentPage - 1;
+						setSelectedPage(prevPageNum);
+						handlePageLinkClick(prevPageNum);
+						onPageChange?.(prevPageNum);
+					}
+				},
+				"data-test": "pagination__page-selector-paddle-left",
+				variant: "inverse",
+				size: "sm",
+				width: "auto",
+				"aria-label": "Previous page",
+				children: "Prev"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+				id: "pagination__page-selector--right",
+				disabled: currentPage === totalPages && !lowerBound || isLoading,
+				onClick: () => {
+					if (currentPage !== totalPages || lowerBound) {
+						const nextPageNum = currentPage + 1;
+						setSelectedPage(nextPageNum);
+						handlePageLinkClick(nextPageNum);
+						onPageChange?.(nextPageNum);
+					}
+				},
+				"data-test": "pagination__page-selector-paddle-right",
+				variant: "inverse",
+				size: "sm",
+				width: "auto",
+				"aria-label": "Next page",
+				children: "Next"
+			})
+		]
+	});
+}
+//#endregion
+//#region components/Pagination/PageSizeSelector.tsx
+const Selector = (0, styled_components.default)("div")`
+  padding: ${_persona_design_tokens.Spacing[2]};
+  display: flex;
+  justify-content: flex-end;
+`;
+const Label = styled_components.default.label`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: ${_persona_design_tokens.Spacing[2]};
+  padding: ${_persona_design_tokens.Spacing[2]};
+`;
+(0, styled_components.default)("div")`
+  padding: 0 ${_persona_design_tokens.Spacing[1]};
+  color: ${_persona_design_tokens.Color.PrimaryPurple};
+  cursor: pointer;
+
+  ${({ currentPageSize, pageSizeOption }) => {
+	if (currentPageSize === pageSizeOption) return `
+        ${_persona_design_tokens.Typography.TextMediumBold};
+        text-decoration: underline;
+      `;
+}};
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick }) => {
+	const pageSizes = [...pageSizeOptions, ...pageSizeOptions.includes(pageSize) ? [] : [pageSize]].sort((a, b) => a - b);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Selector, {
+		"data-test": "pagination__page-size-selector",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Label, { children: ["Items per page:", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.Select, {
+			value: pageSize.toString(),
+			onValueChange: (val) => handlePageSizeClick(Number(val)),
+			size: "sm",
+			children: pageSizes.map((size) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.Option, {
+				value: size.toString(),
+				children: size
+			}, size))
+		})] })
+	});
+};
+//#endregion
+//#region components/Pagination/Pagination.tsx
+const MAX_PAGES = 100;
+const Container = (0, styled_components.default)("nav")`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const PaginationInfo = (0, styled_components.default)("div")`
+  display: flex;
+  align-items: center;
+
+  color: ${_persona_design_tokens.Color.TextPrimary};
+`;
+const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, paginationParams, handlePageSizeClick, handlePageLinkClick, isLoading, showPageSizeSelector = true, onPageChange }) => {
+	if (!paginationParams || !pageSize) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {});
+	const { "current-page": currentPage, "total-count": totalCount, "total-pages": totalPages, "lower-bound": lowerBound } = paginationParams;
+	const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? "many" : totalCount;
+	const lastItemIndex = lowerBound ? currentPage * pageSize : Math.min(currentPage * pageSize, totalCount);
+	const firstItemIndex = pageSize * (currentPage - 1) + 1;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
+		role: "navigation",
+		"aria-label": "pagination",
+		children: [showPageSizeSelector && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSizeSelector, {
+			pageSize,
+			pageSizeOptions,
+			handlePageSizeClick
+		}), totalCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+			"Showing ",
+			firstItemIndex,
+			"-",
+			lastItemIndex,
+			" of ",
+			totalCountDisplay,
+			" items"
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationInfo, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSelector, {
+			paginationParams,
+			handlePageLinkClick,
+			isLoading,
+			onPageChange
+		}) })] })]
+	});
+};
+//#endregion
+//#region components/Pagination/index.ts
+var Pagination_default = Pagination;
+//#endregion
+Object.defineProperty(exports, "DEFAULT_PAGE_SIZE_OPTIONS", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_PAGE_SIZE_OPTIONS;
+	}
+});
+Object.defineProperty(exports, "MIN_PAGE_SIZE", {
+	enumerable: true,
+	get: function() {
+		return MIN_PAGE_SIZE;
+	}
+});
+Object.defineProperty(exports, "PAGE_LIMIT_BEFORE_SCROLL_MODE", {
+	enumerable: true,
+	get: function() {
+		return PAGE_LIMIT_BEFORE_SCROLL_MODE;
+	}
+});
+Object.defineProperty(exports, "PageSelector", {
+	enumerable: true,
+	get: function() {
+		return PageSelector;
+	}
+});
+Object.defineProperty(exports, "Pagination_default", {
+	enumerable: true,
+	get: function() {
+		return Pagination_default;
+	}
+});
+
+//# sourceMappingURL=Pagination-DEZFb552.cjs.map