@pantheon-systems/pds-toolkit-react 2.0.0-alpha.7 → 2.0.0-alpha.71

package/dist/components/ResultCount/ResultCount.d.ts

@@ -0,0 +1,53 @@
+import { ComponentPropsWithoutRef } from 'react';
+import './result-count.css';
+export interface ResultCountLabelStrings {
+    /**
+     * Connector shown between the matching and total counts.
+     */
+    of?: string;
+    /**
+     * Leading word shown before the matching count once filtered (e.g.
+     * "Showing 4 of 14 sites"). Defaults to "Showing" — pass `null` to omit
+     * it and fall back to the bare "4 of 14 sites" form. Only ever appears
+     * in the filtered form; the unfiltered total is never prefixed.
+     */
+    showing?: string | null;
+    /**
+     * Plural form of the unit noun, e.g. "sites".
+     */
+    unitPlural?: string;
+    /**
+     * Singular form of the unit noun, e.g. "site".
+     */
+    unitSingular?: string;
+}
+export interface ResultCountProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Number of items matching the current filters. Omit entirely when no
+     * filters are active — passing it (even equal to `countTotal`) renders
+     * the "matching of total" form instead of the plain total.
+     */
+    countMatching?: number;
+    /**
+     * Total number of items, ignoring any active filters.
+     */
+    countTotal: number;
+    /**
+     * Label strings for the connector word and the singular/plural unit noun.
+     */
+    labelStrings?: ResultCountLabelStrings;
+    /**
+     * BCP 47 locale (e.g. `'en'`, `'fr'`) used to choose between
+     * `labelStrings.unitSingular`/`unitPlural` for a given count, via
+     * `Intl.PluralRules`. Defaults to the runtime's locale.
+     */
+    locale?: string;
+}
+/**
+ * ResultCount UI component
+ */
+export declare const ResultCount: ({ className, countMatching, countTotal, labelStrings, locale, ...props }: ResultCountProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SiteFooter/SiteFooter.d.ts

@@ -0,0 +1,45 @@
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import { ContainerWidth } from '../../libs/types/custom-types';
+import './site-footer.css';
+type LegalLinkKey = 'privacy' | 'dataSubjectRequest' | 'cookiePolicy' | 'termsOfUse' | 'acceptableUse' | 'accessibilityStatement';
+export interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
+    /**
+     * HTML element to render. Use 'footer' for standalone usage or 'div' when nested inside another footer landmark.
+     */
+    as?: 'footer' | 'div';
+    /**
+     * Footer content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * PDS container width, controlling the footer's max-width and inline padding.
+     * Defaults to 'full' (full width, edge-to-edge, no padding) so the containing
+     * layout or app provides the gutter; set a constrained width (e.g. 'x-wide')
+     * to have the footer constrain and pad itself.
+     */
+    containerWidth?: ContainerWidth;
+    /**
+     * Should the footer have a top border?
+     */
+    hasTopBorder?: boolean;
+    /**
+     * Legal policy links, in display order. Accepts the predefined Pantheon
+     * legal link keys and/or custom links or buttons (e.g. a cookie
+     * preferences trigger), interspersed in whatever order you need.
+     */
+    legalLinks?: Array<LegalLinkKey | ReactElement>;
+    /**
+     * The background color of the surface this footer is placed on.
+     * Use 'secondary' to strengthen the internal divider border when the footer sits on a secondary background.
+     */
+    surfaceColor?: 'default' | 'secondary';
+}
+/**
+ * SiteFooter UI component
+ */
+export declare const SiteFooter: ({ as: Element, children, className, containerWidth, hasTopBorder, legalLinks, surfaceColor, ...props }: SiteFooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/{navigation/DashboardSearch/DashboardSearch.d.ts → SiteSearch/SiteSearch.d.ts}

@@ -1,14 +1,14 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { SiteOption } from '../../../libs/components/SiteOptionDisplay/SiteOptionDisplay';
-import './dashboard-search.css';
+import { SiteOption } from '../../libs/components/SiteOptionDisplay/SiteOptionDisplay';
+import './site-search.css';
 type LabelStrings = {
     clearButton?: string;
     inputInstructions?: string;
 };
 /**
- * Prop types for DashboardSearch
+ * Prop types for SiteSearch
  */
-export interface DashboardSearchProps extends ComponentPropsWithoutRef<'div'> {
+export interface SiteSearchProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Additional class names
      */
@@ -17,11 +17,6 @@ export interface DashboardSearchProps extends ComponentPropsWithoutRef<'div'> {
      * Is the search input disabled?
      */
     disabled?: boolean;
-    /**
-     * Offset for the starting right position for the search input in rems.
-     * @deprecated This prop is no longer used since absolute positioning was removed.
-     */
-    horizontalOffset?: number;
     /**
      * ID for the component.
      */
@@ -64,7 +59,7 @@ export interface DashboardSearchProps extends ComponentPropsWithoutRef<'div'> {
     siteList?: SiteOption[];
 }
 /**
- * DashboardSearch UI component
+ * SiteSearch UI component
  */
-export declare const DashboardSearch: ({ className, disabled, horizontalOffset: _horizontalOffset, id, isLoading, label, labelStrings, loadingText, noResultsText, onFocus, onOptionSelect, placeholder, siteList, ...props }: DashboardSearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SiteSearch: ({ className, disabled, id, isLoading, label, labelStrings, loadingText, noResultsText, onFocus, onOptionSelect, placeholder, siteList, ...props }: SiteSearchProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SortableList/SortableList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SortableListProps } from './types';
+import './sortable-list.css';
+export interface SortableListHandle {
+    /** Reverts the list to the order it was in when drag mode was last enabled. */
+    resetToSnapshot: () => void;
+}
+export declare const SortableList: React.ForwardRefExoticComponent<SortableListProps & React.RefAttributes<SortableListHandle>>;

package/dist/components/SortableList/SortableListHeader.d.ts

@@ -0,0 +1,7 @@
+import type { SortableListColumn, SortableListHeaderProps } from './types';
+import './sortable-list.css';
+interface SortableListHeaderInternalProps {
+    columns?: SortableListColumn[];
+}
+export declare const SortableListHeader: ({ children, className, columns, ...props }: SortableListHeaderProps & SortableListHeaderInternalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SortableList/SortableRow.d.ts

@@ -0,0 +1,16 @@
+import type { SortableListColumn, SortableRowProps } from './types';
+import './sortable-list.css';
+interface SortableRowInternalProps {
+    columns?: SortableListColumn[];
+    depth?: number;
+    hasChildren?: boolean;
+    isDragActive?: boolean;
+    isDragging?: boolean;
+    isDropTarget?: boolean;
+    isExpanded?: boolean;
+    isProjectedParent?: boolean;
+    onToggleExpand?: () => void;
+    projectedDepthDelta?: number;
+}
+export declare const SortableRow: ({ children, className, columns, depth, hasChildren, id, isDragActive, isDragging: _isDraggingProp, isDropTarget, isExpanded, isLocked, isProjectedParent, onToggleExpand, projectedDepthDelta, ...props }: SortableRowProps & SortableRowInternalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SortableList/sortable-utils.d.ts

@@ -0,0 +1,19 @@
+import type { FlattenedNode, SortableTreeNode } from './types';
+/**
+ * Flatten a tree into a list suitable for dnd-kit's SortableContext.
+ * Only includes nodes whose ancestors are all expanded.
+ */
+export declare function flattenTree(items: SortableTreeNode[], expandedIds: Set<string>, parentId?: string | null, depth?: number, ancestorIds?: string[]): FlattenedNode[];
+/**
+ * Rebuild a tree from a flat list of nodes.
+ */
+export declare function buildTree(flatNodes: FlattenedNode[]): SortableTreeNode[];
+/**
+ * Find a node by id in a tree.
+ */
+export declare function findItem(items: SortableTreeNode[], id: string): SortableTreeNode | undefined;
+/**
+ * Calculate the projected depth during a drag based on horizontal pointer offset.
+ * Returns the clamped depth the item would land at if dropped.
+ */
+export declare function getProjectedDepth(flatNodes: FlattenedNode[], activeId: string, overId: string, dragOffsetX: number, indentSize: number, maxDepth: number, activeNodeDepth?: number): number;

package/dist/components/SortableList/types.d.ts

@@ -0,0 +1,142 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface SortableTreeNode {
+    [key: string]: unknown;
+    children?: SortableTreeNode[];
+    id: string;
+}
+export interface FlattenedNode {
+    ancestorIds: string[];
+    data: SortableTreeNode;
+    depth: number;
+    hasChildren: boolean;
+    id: string;
+    index: number;
+    isExpanded: boolean;
+    parentId: string | null;
+}
+export interface SortableListColumn {
+    /**
+     * Unique identifier for this column. Used as the slot name in SortableRow.
+     */
+    id: string;
+    /**
+     * Display label for the column header. Also used as the visually-hidden
+     * label for screen readers inside each row cell.
+     */
+    label: string;
+    /**
+     * CSS width value for the column (e.g., '1fr', '10rem', '150px').
+     */
+    width: string;
+}
+export type ReorderMode = 'always' | 'toggle' | 'disabled';
+export interface SortableRowMeta {
+    depth: number;
+    hasChildren: boolean;
+    index: number;
+    isDragging: boolean;
+    isExpanded: boolean;
+    isLocked: boolean;
+    toggleExpand: () => void;
+}
+export interface SortableListProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Content for the header area. Typically a SortableListHeader.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Column definitions for grid-based layout. Defines widths, labels,
+     * and slot names used by both the header and row content areas.
+     * When omitted, the row content area uses a plain flex layout.
+     */
+    columns?: SortableListColumn[];
+    /**
+     * Initial tree data (uncontrolled mode).
+     */
+    defaultItems?: SortableTreeNode[];
+    /**
+     * Function to extract a human-readable label from an item for screen reader
+     * announcements (e.g. "Picked up Home page. Position 1 of 5."). Defaults to
+     * using the item's id.
+     */
+    getItemLabel?: (item: SortableTreeNode) => string;
+    /**
+     * Whether drag is currently enabled. Only relevant when reorderMode='toggle'.
+     * Controlled externally (e.g., by a UtilityBar lock/unlock button).
+     */
+    isDragEnabled?: boolean;
+    /**
+     * Function that returns true for items whose position should be fixed.
+     * Locked items cannot be dragged and cannot be displaced by other items
+     * moving around them. Use this for items that must always remain at the
+     * top or bottom of the list (e.g. a Home page that is always first).
+     * Does not prevent other items from being nested inside the locked item —
+     * use isNestingLocked for that.
+     */
+    isItemLocked?: (item: SortableTreeNode) => boolean;
+    /**
+     * Function that returns true for items that should not accept nested
+     * children. Items matching this function can still be moved to a new
+     * position; they just cannot be used as a parent during drag-and-drop.
+     */
+    isNestingLocked?: (item: SortableTreeNode) => boolean;
+    /**
+     * Tree-structured data (controlled mode).
+     */
+    items?: SortableTreeNode[];
+    /**
+     * Maximum nesting depth allowed. 0 = flat list, no nesting.
+     */
+    maxDepth?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Callback when items are reordered. Receives the new tree structure.
+     */
+    onReorder?: (items: SortableTreeNode[]) => void;
+    /**
+     * Render function for each row. Receives the item data and tree metadata.
+     */
+    renderRow: (item: SortableTreeNode, meta: SortableRowMeta) => ReactNode;
+    /**
+     * Controls drag-and-drop availability.
+     * - 'always': drag handles always visible (default).
+     * - 'toggle': drag state controlled externally via isDragEnabled prop.
+     * - 'disabled': no dragging, no handles, read-only list.
+     */
+    reorderMode?: ReorderMode;
+    /**
+     * Custom screen reader instructions for drag operations.
+     */
+    screenReaderInstructions?: string;
+}
+export interface SortableRowProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Child elements — the consumer-defined row content.
+     */
+    children: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Unique identifier for this row. Must match an item id.
+     */
+    id: string;
+    /**
+     * Prevents this row from being dragged or receiving drops.
+     */
+    isLocked?: boolean;
+}
+export interface SortableListHeaderProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Child elements assigned to named slots.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}

package/dist/components/SortableList/useSortableTree.d.ts

@@ -0,0 +1,18 @@
+import type { FlattenedNode, SortableTreeNode } from './types';
+interface UseSortableTreeOptions {
+    defaultItems?: SortableTreeNode[];
+    isDragEnabled?: boolean;
+    items?: SortableTreeNode[];
+    onReorder?: (items: SortableTreeNode[]) => void;
+}
+export declare function useSortableTree({ defaultItems, isDragEnabled, items: controlledItems, onReorder, }: UseSortableTreeOptions): {
+    currentItems: SortableTreeNode[];
+    expandedIds: Set<string>;
+    expandItem: (id: string) => void;
+    flatNodes: FlattenedNode[];
+    handleReorder: (updatedFlat: FlattenedNode[]) => void;
+    resetToSnapshot: () => void;
+    sortableIds: string[];
+    toggleExpand: (id: string) => void;
+};
+export {};

package/dist/components/{RefreshChecker/RefreshChecker.d.ts → StatusChecker/StatusChecker.d.ts}

@@ -1,17 +1,8 @@
 import { ComponentPropsWithoutRef } from 'react';
-import './refresh-checker.css';
-/**
- * Enum for RefreshChecker states
- */
-export declare enum RefreshCheckerState {
-    CHECKED = "checked",
-    DEFAULT = "default",
-    WORKING = "working"
-}
-/**
- * Prop types for RefreshChecker
- */
-interface RefreshCheckerProps extends ComponentPropsWithoutRef<'div'> {
+import './status-checker.css';
+export declare const statusCheckerStates: readonly ["default", "working", "checked"];
+export type StatusCheckerState = (typeof statusCheckerStates)[number];
+export interface StatusCheckerProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Alignment of the component. Default is left.
      */
@@ -45,10 +36,6 @@ interface RefreshCheckerProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * State of the component
      */
-    state?: `${RefreshCheckerState}`;
+    state?: StatusCheckerState;
 }
-/**
- * RefreshChecker UI component
- */
-export declare const RefreshChecker: ({ alignment, className, componentWidth, labelStrings, lastChecked, onCheck, state, ...props }: RefreshCheckerProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const StatusChecker: ({ alignment, className, componentWidth, labelStrings, lastChecked, onCheck, state, ...props }: StatusCheckerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/StatusIndicator/StatusIndicator.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { StatusType } from '../../libs/types/custom-types';
 import './status-indicator.css';
 export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
@@ -11,9 +11,12 @@ export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
      */
     label: string;
     /**
-     * Sets the size
+     * Optionally makes the status indicator a link. Pass a fully-formed,
+     * router-agnostic link element (e.g. an anchor or your router's link
+     * component); the indicator's dot and label render as its children, so the
+     * whole indicator becomes clickable.
      */
-    size?: 'xs' | 's';
+    linkContent?: ReactNode;
     /**
      * Sets status type
      */
@@ -22,4 +25,4 @@ export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * StatusIndicator UI component
  */
-export declare const StatusIndicator: ({ className, label, size, type, ...props }: StatusIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StatusIndicator: ({ className, label, linkContent, type, ...props }: StatusIndicatorProps) => import("react/jsx-runtime").JSX.Element;