@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/navigation/Pagination.js

@@ -0,0 +1,300 @@
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { Placement } from "../theme/enums.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { formatNumber } from "../utils/format.js";
+import SelectInput, { SelectInputSize } from "../inputs/SelectInput.js";
+/* empty css                     */
+import { styled } from "@linaria/react";
+import { forwardRef, useCallback, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+//#region src/navigation/Pagination.tsx
+/**
+* The control under a paged list or table that moves between pages: previous and next buttons
+* around a short window of page numbers, with an optional "1–25 of 312" summary and an optional
+* rows-per-page select. The app owns the data: it passes the item `total` and the `pageSize`, and
+* Pagination reports the page the user picks (`onChange`) and the size they pick
+* (`onPageSizeChange`). It does not fetch, slice or route. `isCompact` replaces the page numbers
+* with "3 of 13" for narrow toolbars.
+*
+* Not "Load more" (a `Button`), not `Tabs` (sibling views), not `Breadcrumbs` (parent pages).
+*
+* SSR: the page window is pure; nothing touches `window` or `document` at module scope.
+*/
+/** Canonical rungs; Pagination supports all five (the rung of every button and the select). */
+var PaginationSize = /* @__PURE__ */ function(PaginationSize) {
+	/** 20px controls, caption text. */
+	PaginationSize["X_SMALL"] = "X_SMALL";
+	/** 24px controls, body_sm text. The usual size in a table footer or a Topbar. */
+	PaginationSize["SMALL"] = "SMALL";
+	/** 32px controls, body_md text. The default. */
+	PaginationSize["MEDIUM"] = "MEDIUM";
+	/** 36px controls, body_lg text. */
+	PaginationSize["LARGE"] = "LARGE";
+	/** 40px controls, body_lg text. */
+	PaginationSize["X_LARGE"] = "X_LARGE";
+	return PaginationSize;
+}({});
+/** Pages shown in full up to this count; past it the window is always seven slots. */
+var WINDOW_SLOTS = 7;
+/** The default `nav` name. */
+var DEFAULT_ARIA_LABEL = "Pagination";
+var Root = /*#__PURE__*/ styled("nav")({
+	name: "Root",
+	class: "gx-Pagination-r9u33u3",
+	propsAsIs: false
+});
+var Controls = /*#__PURE__*/ styled("div")({
+	name: "Controls",
+	class: "gx-Pagination-Controls-c1ffm52h",
+	propsAsIs: false
+});
+var PageSize = /*#__PURE__*/ styled("div")({
+	name: "PageSize",
+	class: "gx-Pagination-PageSize-p1uj1xow",
+	propsAsIs: false
+});
+var Pages = /*#__PURE__*/ styled("ul")({
+	name: "Pages",
+	class: "gx-Pagination-Pages-p1ytmnqd",
+	propsAsIs: false
+});
+/** The summary at the start, the controls at the end. */
+var FILL_WIDTH_CSS = "gx-Pagination-FILL_WIDTH_CSS-f1bfyy52";
+/** 96px: a four-digit size and its caret at every rung (SelectInput's own default is 200px). */
+var PAGE_SIZE_SELECT_CSS = "gx-Pagination-PAGE_SIZE_SELECT_CSS-p16nmdqk";
+/** Previous / next: a square of the button's rung around a smaller caret (TableCore's expand button). */
+var CARET_BUTTON_CSS = "gx-Pagination-CARET_BUTTON_CSS-c8xq1jo";
+/** The previous / next caret: 12px, 10px on the 20px and 24px rungs (the collapsible Widget's caret). */
+var PAGINATION_SIZE_TO_CARET_PX_MAP = {
+	["X_SMALL"]: 10,
+	["SMALL"]: 10,
+	["MEDIUM"]: 12,
+	["LARGE"]: 12,
+	["X_LARGE"]: 12
+};
+var PAGINATION_SIZE_TO_BUTTON_SIZE_MAP = {
+	["X_SMALL"]: ButtonSize.X_SMALL,
+	["SMALL"]: ButtonSize.SMALL,
+	["MEDIUM"]: ButtonSize.MEDIUM,
+	["LARGE"]: ButtonSize.LARGE,
+	["X_LARGE"]: ButtonSize.X_LARGE
+};
+var PAGINATION_SIZE_TO_SELECT_INPUT_SIZE_MAP = {
+	["X_SMALL"]: SelectInputSize.X_SMALL,
+	["SMALL"]: SelectInputSize.SMALL,
+	["MEDIUM"]: SelectInputSize.MEDIUM,
+	["LARGE"]: SelectInputSize.LARGE,
+	["X_LARGE"]: SelectInputSize.X_LARGE
+};
+var PAGINATION_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** The page window: every page up to seven, else seven slots with one or two ellipses. */
+function getPaginationSlots(page, pageCount) {
+	const pages = (from, to) => Array.from({ length: to - from + 1 }, (_, index) => ({
+		kind: "page",
+		page: from + index
+	}));
+	if (pageCount <= WINDOW_SLOTS) return pages(1, pageCount);
+	if (page <= 4) return [
+		...pages(1, 5),
+		{
+			kind: "ellipsis",
+			key: "end-ellipsis"
+		},
+		...pages(pageCount, pageCount)
+	];
+	if (page >= pageCount - 3) return [
+		...pages(1, 1),
+		{
+			kind: "ellipsis",
+			key: "start-ellipsis"
+		},
+		...pages(pageCount - 4, pageCount)
+	];
+	return [
+		...pages(1, 1),
+		{
+			kind: "ellipsis",
+			key: "start-ellipsis"
+		},
+		...pages(page - 1, page + 1),
+		{
+			kind: "ellipsis",
+			key: "end-ellipsis"
+		},
+		...pages(pageCount, pageCount)
+	];
+}
+/** A whole number at least `min`; non-finite reads as `fallback`. */
+function wholeAtLeast(value, min, fallback) {
+	return Number.isFinite(value) ? Math.max(min, Math.floor(value)) : fallback;
+}
+/** Moves between the pages of a list or table, with an optional summary and page-size select. */
+var Pagination = forwardRef(function Pagination({ total, value, defaultValue = 1, onChange, pageSize: pageSizeProp = 25, pageSizeOptions, onPageSizeChange, hasSummary = false, isCompact = false, size = "MEDIUM", isDisabled = false, fillWidth = false, ariaLabel, id, className, style, ...rest }, ref) {
+	const pageSize = wholeAtLeast(pageSizeProp, 1, 1);
+	const itemCount = wholeAtLeast(total, 0, 0);
+	const pageCount = Math.max(1, Math.ceil(itemCount / pageSize));
+	const [rawPage, setPage] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const page = Math.min(pageCount, wholeAtLeast(rawPage, 1, 1));
+	const textSize = PAGINATION_SIZE_TO_TEXT_SIZE_MAP[size];
+	const buttonSize = PAGINATION_SIZE_TO_BUTTON_SIZE_MAP[size];
+	const pageSizeLabelId = useId();
+	const pendingFocus = useRef(null);
+	const pageButtons = useRef(/* @__PURE__ */ new Map());
+	const previousButton = useRef(null);
+	const nextButton = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const target = pendingFocus.current;
+		if (target === null) return;
+		pendingFocus.current = null;
+		(target === "previous" ? previousButton.current : target === "next" ? nextButton.current : pageButtons.current.get(page))?.focus();
+	});
+	const goTo = (next) => {
+		if (next === page || next < 1 || next > pageCount) return;
+		setPage(next);
+	};
+	/** An arrow press; at the edge, focus goes to the current page (or the other arrow when compact). */
+	const step = (delta) => {
+		const next = page + delta;
+		if (next < 1 || next > pageCount) return;
+		if (next === 1 || next === pageCount) pendingFocus.current = isCompact ? delta === 1 ? "previous" : "next" : "current";
+		goTo(next);
+	};
+	const sizeOptions = (() => {
+		if (pageSizeOptions === void 0) return [];
+		return (pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b)).map((option) => ({
+			id: String(option),
+			label: formatNumber(option)
+		}));
+	})();
+	const handlePageSizeChange = useCallback((selected) => {
+		if (selected === null) return;
+		const next = Number(selected);
+		if (!Number.isFinite(next) || next === pageSize) return;
+		onPageSizeChange?.(next);
+		const nextPage = Math.floor((page - 1) * pageSize / next) + 1;
+		if (nextPage !== page) setPage(nextPage);
+	}, [
+		onPageSizeChange,
+		page,
+		pageSize,
+		setPage
+	]);
+	const from = (page - 1) * pageSize + 1;
+	const to = Math.min(page * pageSize, itemCount);
+	const summary = itemCount === 0 ? "No results" : `${formatNumber(from)}–${formatNumber(to)} of ${formatNumber(itemCount)}`;
+	const name = ariaLabel || rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL);
+	const setPageButton = (pageNumber) => (element) => {
+		if (element === null) pageButtons.current.delete(pageNumber);
+		else pageButtons.current.set(pageNumber, element);
+	};
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		id,
+		"aria-label": name,
+		className: cx(fillWidth && FILL_WIDTH_CSS, className),
+		style,
+		children: [hasSummary && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: textSize,
+			variant: TextVariant.SECONDARY,
+			isTabular: itemCount > 0,
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: summary
+		}), /* @__PURE__ */ jsxs(Controls, { children: [pageSizeOptions !== void 0 && /* @__PURE__ */ jsxs(PageSize, { children: [/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			id: pageSizeLabelId,
+			size: textSize,
+			variant: TextVariant.SECONDARY,
+			children: "Rows per page"
+		}), /* @__PURE__ */ jsx(SelectInput, {
+			options: sizeOptions,
+			value: String(pageSize),
+			onChange: handlePageSizeChange,
+			size: PAGINATION_SIZE_TO_SELECT_INPUT_SIZE_MAP[size],
+			isDisabled,
+			"aria-labelledby": pageSizeLabelId,
+			placement: Placement.BOTTOM_END,
+			className: PAGE_SIZE_SELECT_CSS
+		})] }), /* @__PURE__ */ jsxs(Pages, {
+			role: "list",
+			children: [
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, {
+					ref: (element) => {
+						previousButton.current = element;
+					},
+					leading: /* @__PURE__ */ jsx(Icon, {
+						component: CaretLeftIcon,
+						size: PAGINATION_SIZE_TO_CARET_PX_MAP[size],
+						variant: IconVariant.INHERIT
+					}),
+					ariaLabel: "Previous page",
+					variant: ButtonVariant.TERTIARY,
+					size: buttonSize,
+					isDisabled: isDisabled || page === 1,
+					onClick: () => step(-1),
+					className: CARET_BUTTON_CSS
+				}) }),
+				isCompact ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: textSize,
+					isTabular: true,
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: `${formatNumber(page)} of ${formatNumber(pageCount)}`
+				}) }) : getPaginationSlots(page, pageCount).map((slot) => slot.kind === "page" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, {
+					ref: setPageButton(slot.page),
+					label: formatNumber(slot.page),
+					variant: slot.page === page ? ButtonVariant.SECONDARY : ButtonVariant.TERTIARY,
+					size: buttonSize,
+					isDisabled,
+					"aria-current": slot.page === page ? "page" : void 0,
+					onClick: () => goTo(slot.page)
+				}) }, slot.page) : /* @__PURE__ */ jsx("li", {
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: textSize,
+						variant: TextVariant.TERTIARY,
+						children: "…"
+					})
+				}, slot.key)),
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, {
+					ref: (element) => {
+						nextButton.current = element;
+					},
+					leading: /* @__PURE__ */ jsx(Icon, {
+						component: CaretRightIcon,
+						size: PAGINATION_SIZE_TO_CARET_PX_MAP[size],
+						variant: IconVariant.INHERIT
+					}),
+					ariaLabel: "Next page",
+					variant: ButtonVariant.TERTIARY,
+					size: buttonSize,
+					isDisabled: isDisabled || page === pageCount,
+					onClick: () => step(1),
+					className: CARET_BUTTON_CSS
+				}) })
+			]
+		})] })]
+	});
+});
+Pagination.displayName = "Pagination";
+//#endregion
+export { PaginationSize, Pagination as default };

package/dist/navigation/SidebarNav.d.ts

@@ -0,0 +1,107 @@
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ElementType, type MouseEvent, type ReactNode } from "react";
+export interface SidebarNavProps extends AriaAttributes {
+    /** The destinations: `NavItem`s and `NavGroup`s, in display order. Scrolls when taller than the column. */
+    children?: ReactNode;
+    /** Content of the 48px row at the top: the brand mark or a workspace switcher. In collapsed mode, pass a compact version (the logomark alone). */
+    header?: ReactNode;
+    /** Content pinned under the list: the account row, `NavItem`s such as Settings, the collapse toggle. */
+    footer?: ReactNode;
+    /**
+     * Icon rail: items show only their icon (labels and counts move into tooltips), group labels become dividers. Give the parent a 48px width.
+     * @default false
+     */
+    isCollapsed?: boolean;
+    /**
+     * Name of the `<nav>` landmark (announced "Main navigation").
+     * @default Main
+     */
+    ariaLabel?: string;
+    /** DOM id of the `<nav>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<nav>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<nav>`. */
+    className?: string;
+    /** Inline style on the `<nav>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+export interface NavItemProps extends AriaAttributes {
+    /** Visible text; truncates to one line. In collapsed mode it is visually hidden (still the accessible name) and shown in the tooltip. */
+    label: string;
+    /** Phosphor icon component (`HouseIcon`, not `<HouseIcon />`), 14px. In collapsed mode an item without one shows its label's first letter. */
+    icon?: PhosphorIcon;
+    /** Destination. Renders an `<a>` (or `as`). Without it the item is a `<button>`. */
+    href?: string;
+    /**
+     * Router link component that renders the anchor when `href` is set. It receives `href` and must forward its `ref`. Ignored without `href`.
+     * @default "a"
+     */
+    as?: ElementType;
+    /**
+     * With `href`: opens in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) and adds a trailing arrow plus visually hidden "(opens in a new tab)".
+     * @default false
+     */
+    isExternal?: boolean;
+    /** Called on activation (a button item's action, or analytics on a link). Not called while disabled. */
+    onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    /**
+     * The current page: `aria-current="page"`, the active fill and a `text.primary` icon. Derive it from the route, not local state.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Not activatable: no `href`, disabled color, `aria-disabled`. Stays focusable so its `tooltip` can say why.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** Badge after the label (a `SMALL` `Chip count`; `99+` past 99). Values of 0 or less are hidden. In collapsed mode it moves into the tooltip and the accessible name. */
+    count?: number;
+    /** Content after the label and count: a "Beta" `Chip`, a `Kbd`. Must not be interactive. Hidden in collapsed mode. */
+    trailing?: ReactNode;
+    /** Tooltip on the item, placed to the right. In collapsed mode it replaces the default tooltip (the label and count). */
+    tooltip?: string | ReactNode;
+    /** DOM id of the link or button. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the link or button. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the link or button. */
+    className?: string;
+    /** Inline style on the link or button; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+export interface NavGroupProps extends AriaAttributes {
+    /** Section heading, small uppercase tertiary text. Names the section's list. In collapsed mode it becomes a divider (still the list's accessible name). */
+    label: string;
+    /** The section's `NavItem`s. */
+    children?: ReactNode;
+    /**
+     * The heading becomes a toggle with a caret that folds the section.
+     * @default false
+     */
+    isCollapsible?: boolean;
+    /** Controlled open state of a collapsible section. Pass it with `onOpenChange`. */
+    isOpen?: boolean;
+    /**
+     * Initial open state of a collapsible section while uncontrolled. Pass `defaultIsOpen` for sections that start open.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with the next state when the heading of a collapsible section is pressed. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** DOM id of the section's `<li>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the section's `<li>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the section's `<li>`. */
+    className?: string;
+    /** Inline style on the section's `<li>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** The primary navigation column: header, scrolling list of items and sections, footer. */
+declare const SidebarNav: import("react").ForwardRefExoticComponent<SidebarNavProps & import("react").RefAttributes<HTMLElement>>;
+/** One destination: a link (`href`) or a button, with an icon, a label, a count and an active state. */
+export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+/** A labelled section of items; with `isCollapsible` its heading folds it. */
+export declare const NavGroup: import("react").ForwardRefExoticComponent<NavGroupProps & import("react").RefAttributes<HTMLLIElement>>;
+export default SidebarNav;