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

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.cts

@@ -13,6 +13,12 @@ interface ModalTitleProps {
   children: ReactNode;
   className?: string;
 }
+/** Props passed to modal content render functions. */
+interface ModalRenderProps {
+  /** Element that floating content should use as its portal container. */
+  portalContainer: HTMLDivElement | null;
+}
+type ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);
 interface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {
   /**
    * Display X button to close popover
@@ -30,6 +36,7 @@ interface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {
    * Renders tabs within the modal.
    * Adds a tab bar and will render the contents of the selected tab in a tabpanel.
    * Overrides `children`.
+   * Tab contents can be render functions that receive the modal portal container.
    */
   tabs?: TabView[];
   /**
@@ -51,7 +58,7 @@ interface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {
 }
 interface TabView {
   name: string;
-  contents: JSX.Element;
+  contents: ModalRenderable;
   badge?: React.ReactElement;
   disabled?: boolean;
   'data-tour-target'?: string;
@@ -87,9 +94,7 @@ interface ModalProps {
   /**
    * Children content
    */
-  children?: ReactNode | ((props: {
-    portalContainer: HTMLDivElement | null;
-  }) => ReactNode);
+  children?: ModalRenderable;
   /**
    * When true, removes horizontal and vertical padding from the body. Defaults to false.
    * Can also be set via contentProps.noBodyPadding.
@@ -137,5 +142,5 @@ declare const _default: (({
   }: ModalTitleProps) => _$react_jsx_runtime0.JSX.Element;
 };
 //#endregion
-export { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger, _default as default };
+export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };
 //# sourceMappingURL=Modal.d.cts.map

package/dist/Modal.d.mts

@@ -1,9 +1,9 @@
-import { r as ButtonProps } from "./Button-DqDLGURJ.mjs";
+import { r as ButtonProps } from "./Button-DXsYU5qU.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;
@@ -13,6 +13,12 @@ interface ModalTitleProps {
   children: ReactNode;
   className?: string;
 }
+/** Props passed to modal content render functions. */
+interface ModalRenderProps {
+  /** Element that floating content should use as its portal container. */
+  portalContainer: HTMLDivElement | null;
+}
+type ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);
 interface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {
   /**
    * Display X button to close popover
@@ -30,6 +36,7 @@ interface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {
    * Renders tabs within the modal.
    * Adds a tab bar and will render the contents of the selected tab in a tabpanel.
    * Overrides `children`.
+   * Tab contents can be render functions that receive the modal portal container.
    */
   tabs?: TabView[];
   /**
@@ -51,7 +58,7 @@ interface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {
 }
 interface TabView {
   name: string;
-  contents: JSX.Element;
+  contents: ModalRenderable;
   badge?: React.ReactElement;
   disabled?: boolean;
   'data-tour-target'?: string;
@@ -87,9 +94,7 @@ interface ModalProps {
   /**
    * Children content
    */
-  children?: ReactNode | ((props: {
-    portalContainer: HTMLDivElement | null;
-  }) => ReactNode);
+  children?: ModalRenderable;
   /**
    * When true, removes horizontal and vertical padding from the body. Defaults to false.
    * Can also be set via contentProps.noBodyPadding.
@@ -137,5 +142,5 @@ declare const _default: (({
   }: ModalTitleProps) => _$react_jsx_runtime0.JSX.Element;
 };
 //#endregion
-export { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger, _default as default };
+export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };
 //# sourceMappingURL=Modal.d.mts.map

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-CMoV-cHa.d.mts

@@ -0,0 +1,30 @@
+import { n as HStackProps } from "./Stack-UMhJ6F_3.mjs";
+import { t as PaginationParams } from "./types-DTak9UTv.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-CMoV-cHa.d.mts.map

package/dist/PageSelector-DoROR_Uh.d.cts

@@ -0,0 +1,30 @@
+import { n as HStackProps } from "./Stack-D979gYU9.cjs";
+import { t as PaginationParams } from "./types-CuCT-YnX.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-DoROR_Uh.d.cts.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-DoROR_Uh.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-CMoV-cHa.mjs";
+export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageInput, PageSelector as default };

package/dist/Pagination-B97xQ-Wk.d.cts

@@ -0,0 +1,33 @@
+import { t as PaginationParams } from "./types-CuCT-YnX.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-B97xQ-Wk.d.cts.map

package/dist/Pagination-Cj08JRG9.mjs

@@ -0,0 +1,202 @@
+import { t as HStack } from "./Stack-ckRN7LrP.mjs";
+import { n as Button } from "./IconButton-DC4rh6ow.mjs";
+import { n as Input } from "./Input-PWfwMSJ7.mjs";
+import { n as Select, t as Option } from "./Select-ByTgXOlU.mjs";
+import { Color, Spacing, Typography } from "@persona/design-tokens";
+import styled from "styled-components";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { debounce } from "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 = styled(HStack).attrs({ justify: "flex-end" })`
+  padding: ${Spacing[2]};
+`;
+const PageInput = styled(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] = useState(currentPage);
+	const handlePageLinkClickDebounced = useMemo(() => debounce(500, handlePageLinkClick), [handlePageLinkClick]);
+	useEffect(() => {
+		if (currentPage != null) setSelectedPage(currentPage);
+	}, [currentPage]);
+	if (!paginationParams) return /* @__PURE__ */ jsx("div", {});
+	return /* @__PURE__ */ jsxs(PageSelectorStack, {
+		"data-test": "pagination__page-selector",
+		id: "pagination__page-selector",
+		children: [
+			/* @__PURE__ */ jsxs(PageInput, { children: [
+				totalPages < 100 && !lowerBound ? /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(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 = styled("div")`
+  padding: ${Spacing[2]};
+  display: flex;
+  justify-content: flex-end;
+`;
+const Label = styled.label`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: ${Spacing[2]};
+  padding: ${Spacing[2]};
+`;
+styled("div")`
+  padding: 0 ${Spacing[1]};
+  color: ${Color.PrimaryPurple};
+  cursor: pointer;
+
+  ${({ currentPageSize, pageSizeOption }) => {
+	if (currentPageSize === pageSizeOption) return `
+        ${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__ */ jsx(Selector, {
+		"data-test": "pagination__page-size-selector",
+		children: /* @__PURE__ */ jsxs(Label, { children: ["Items per page:", /* @__PURE__ */ jsx(Select, {
+			value: pageSize.toString(),
+			onValueChange: (val) => handlePageSizeClick(Number(val)),
+			size: "sm",
+			children: pageSizes.map((size) => /* @__PURE__ */ jsx(Option, {
+				value: size.toString(),
+				children: size
+			}, size))
+		})] })
+	});
+};
+//#endregion
+//#region components/Pagination/Pagination.tsx
+const MAX_PAGES = 100;
+const Container = styled("nav")`
+  ${Typography.TextMedium};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const PaginationInfo = styled("div")`
+  display: flex;
+  align-items: center;
+
+  color: ${Color.TextPrimary};
+`;
+const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, paginationParams, handlePageSizeClick, handlePageLinkClick, isLoading, showPageSizeSelector = true, onPageChange }) => {
+	if (!paginationParams || !pageSize) return /* @__PURE__ */ 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__ */ jsxs(Container, {
+		role: "navigation",
+		"aria-label": "pagination",
+		children: [showPageSizeSelector && /* @__PURE__ */ jsx(PageSizeSelector, {
+			pageSize,
+			pageSizeOptions,
+			handlePageSizeClick
+		}), totalCount > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", { children: [
+			"Showing ",
+			firstItemIndex,
+			"-",
+			lastItemIndex,
+			" of ",
+			totalCountDisplay,
+			" items"
+		] }), /* @__PURE__ */ jsx(PaginationInfo, { children: /* @__PURE__ */ jsx(PageSelector, {
+			paginationParams,
+			handlePageLinkClick,
+			isLoading,
+			onPageChange
+		}) })] })]
+	});
+};
+//#endregion
+//#region components/Pagination/index.ts
+var Pagination_default = Pagination;
+//#endregion
+export { MIN_PAGE_SIZE as a, DEFAULT_PAGE_SIZE_OPTIONS as i, PAGE_LIMIT_BEFORE_SCROLL_MODE as n, PageSelector as r, Pagination_default as t };
+
+//# sourceMappingURL=Pagination-Cj08JRG9.mjs.map