@pantheon-systems/pds-toolkit-react 2.0.0-alpha.8 → 2.0.0-alpha.81

package/dist/components/buttons/ClipboardButton/ClipboardButton.d.ts

@@ -19,6 +19,10 @@ export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'>
      * Is the button disabled?
      */
     disabled?: boolean;
+    /**
+     * Show a visible border around the button.
+     */
+    hasBorder?: boolean;
     /**
      * Which variant of button to render.
      */
@@ -27,4 +31,4 @@ export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'>
 /**
  * ClipboardButton UI component
  */
-export declare const ClipboardButton: ({ ariaLabel, className, clipboardText, disabled, variant, ...props }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClipboardButton: ({ ariaLabel, className, clipboardText, disabled, hasBorder, variant, ...props }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/CloseButton/CloseButton.d.ts

@@ -17,9 +17,9 @@ export interface CloseButtonProps extends ComponentPropsWithoutRef<'button'> {
      */
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Size of the icon.
+     * Size of the button.
      */
-    size?: 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l';
 }
 /**
  * CloseButton UI component

package/dist/components/buttons/FilterButton/FilterButton.d.ts

@@ -0,0 +1,92 @@
+import './filter-button.css';
+/**
+ * A single option the FilterButton can filter by.
+ */
+export interface FilterButtonOption {
+    /**
+     * Whether this option is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Visible label for the option.
+     */
+    label: string;
+    /**
+     * Unique value used for selection.
+     */
+    value: string;
+}
+/**
+ * Prop types for FilterButton
+ */
+export interface FilterButtonProps {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Text for the clear action in the panel footer.
+     */
+    clearLabel?: string;
+    /**
+     * Disable the entire control.
+     */
+    disabled?: boolean;
+    /**
+     * The filter key/dimension name shown in the trigger (e.g. "Status").
+     */
+    filterKey: string;
+    /**
+     * id applied to the trigger button.
+     */
+    id?: string;
+    /**
+     * Show the in-menu search input once the number of options reaches this
+     * threshold. Defaults to `8`. Set to `0` to always show it.
+     */
+    minFilterItems?: number;
+    /**
+     * Text shown when the search finds no matching options.
+     */
+    noResultsText?: string;
+    /**
+     * Called with the next selected values whenever the selection changes.
+     */
+    onSelectionChange: (values: string[]) => void;
+    /**
+     * Options the user can filter by.
+     */
+    options: FilterButtonOption[];
+    /**
+     * Accessible label for the search input.
+     */
+    searchLabel?: string;
+    /**
+     * Placeholder for the search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * Currently selected option values (controlled).
+     */
+    selectedValues: string[];
+    /**
+     * Restrict the filter to one option at a time. Choosing an option replaces
+     * the current selection and closes the panel; choosing the selected option
+     * again clears it.
+     */
+    singleSelect?: boolean;
+}
+/**
+ * FilterButton — a filter control with a stateful trigger, designed to sit in a
+ * UtilityBar above a Table. Composes the Dropdown compound component (a search
+ * row + a Clear footer behind a trigger) with three trigger states: default,
+ * single selection, and multiple selections (with a count).
+ *
+ * Multiselect by default: options are checkbox items and any number can be
+ * active at once. Set `singleSelect` to restrict the filter to one option at a
+ * time — options then render as radio items with a check mark.
+ *
+ * Selection is controlled: pass `selectedValues` and handle `onSelectionChange`.
+ * The consuming app owns filtering the data with those values.
+ */
+export declare const FilterButton: ({ className, clearLabel, disabled, filterKey, id, minFilterItems, noResultsText, onSelectionChange, options, searchLabel, searchPlaceholder, selectedValues, singleSelect, }: FilterButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/IconButton/IconButton.d.ts

@@ -2,7 +2,7 @@ import React, { ComponentPropsWithoutRef, MouseEvent } from 'react';
 import { ButtonType } from '../../../libs/types/custom-types';
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './icon-button.css';
-type IconButtonSize = 's' | 'm';
+type IconButtonSize = 'xs' | 's' | 'm';
 interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Aria-label attribute.
@@ -20,6 +20,10 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
      * Is the button disabled?
      */
     disabled?: boolean;
+    /**
+     * Show a visible border around the button.
+     */
+    hasBorder?: boolean;
     /**
      * Show tooltip on hover. If false, the title attribute will be used.
      */
@@ -32,10 +36,18 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
      * Which icon to render.
      */
     iconName: PDSIcon;
+    /**
+     * Whether the button is in a pressed/active toggle state. Maps to aria-pressed.
+     */
+    isPressed?: boolean;
     /**
      * Click event handler callback.
      */
     onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Icon to display when isPressed is true. When not set, iconName is used in both states.
+     */
+    pressedIconName?: PDSIcon;
     /**
      * Which size of button to render.
      */

package/dist/components/buttons/MenuButton/MenuButton.d.ts

@@ -1,8 +1,11 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
+import { StatusDotType } from '../../../libs/components/StatusDot/StatusDot';
 import { ButtonVariant, HeadingItemType, LinkItemType, MenuItemType, NodeItemType, SeparatorItemType } from '../../../libs/types/custom-types';
+import { TallyProps } from '../../badges/Tally/Tally';
 import { PDSIcon } from '../../icons/Icon/Icon';
+import '@components/Dropdown/dropdown.css';
 import './menu-button.css';
-type MenuButtonSize = 's' | 'm';
+type MenuButtonSize = 'xs' | 's' | 'm';
 /**
  * Prop types for MenuButton
  */
@@ -16,17 +19,28 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      */
     disabled?: boolean;
     /**
-     * How the button is displayed.
+     * Icon name for icon-only mode.
      */
-    displayType?: 'icon-end' | 'icon-only';
+    iconName?: PDSIcon;
     /**
-     * Icon name for icon-only buttons.
+     * Render as an icon-only button (no label, no angle-down). Not compatible with `tally` or `statusDot`.
      */
-    iconName?: PDSIcon;
+    iconOnly?: boolean;
     /**
      * ID value for this component.
      */
     id: string;
+    /**
+     * Opt in to swapping the trigger + floating dropdown panel for an inline
+     * accordion at the mobile breakpoint. Defaults to `false` — MenuButton
+     * always renders its normal trigger + dropdown otherwise, regardless of
+     * viewport. Set this explicitly when placing MenuButton inside a mobile
+     * nav menu that provides the accordion's expected layout (e.g. `Navbar`'s
+     * own mobile menu) — typically `isMobileAccordion={useIsMobile()}`, using
+     * the `useIsMobile` hook, so the swap only takes effect at the mobile
+     * breakpoint.
+     */
+    isMobileAccordion?: boolean;
     /**
      * Will this be used for a split button?
      */
@@ -39,18 +53,33 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      * Array of menu items
      */
     menuItems: Array<HeadingItemType | LinkItemType | MenuItemType | NodeItemType | SeparatorItemType>;
-    /**
-     * Horizontal position of the menu relative to the button. Applies to breakpoints `md` and up.
-     */
-    menuPosition?: 'start' | 'end';
     /**
      * Optional callback function for when the button is clicked or activated by the keyboard.
      */
     onClick?: () => void;
+    /**
+     * Optional callback fired whenever the menu's open state changes. Use
+     * this to manage focus deliberately when this MenuButton is nested
+     * inside another floating panel — e.g. return focus to the row that
+     * owns this menu when it closes, rather than leaving it to Floating UI's
+     * default (which can otherwise leave focus on an ancestor panel).
+     */
+    onOpenChange?: (isOpen: boolean) => void;
     /**
      * Which size of button to render.
      */
     size?: MenuButtonSize;
+    /**
+     * A status dot displayed in the left icon slot. Not available in `iconOnly` mode.
+     */
+    statusDot?: StatusDotType;
+    /**
+     * A tally badge displayed between the label and the angle-down icon. Not available in `iconOnly` mode.
+     */
+    tally?: {
+        label: TallyProps['label'];
+        type: TallyProps['type'];
+    };
     /**
      *  Optional `data-testid` value for this component.
      */
@@ -60,18 +89,23 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      */
     undefinedLabel?: string;
     /**
-     * Which variant of button to render — only valid for icon-end (default) display type.
-     */
-    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'navbar'>;
-    /**
-     * Is this button located with the Navbar component?
-     * This will adjust the styling and position of the dropdown.
-     * Omit this prop for the Dashboard application. It only applies to the standard Navbar component with a bottom border.
+     * Which variant of button to render. Not available in `iconOnly` mode.
+     * `navbar` is visually identical to `subtle` except it has no background
+     * at rest — only on hover/expanded — for triggers that sit directly on a
+     * nav/toolbar surface rather than a plain page background. `reverse-secondary`
+     * is for triggers on a dark/reverse surface — passed straight through to
+     * the underlying `Button`, which already supports it.
      */
-    withinNavbar?: boolean;
+    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle' | 'reverse-secondary'> | 'navbar';
 }
 /**
- * MenuButton UI component
+ * MenuButton UI component.
+ *
+ * Wraps the actual implementation in a Floating UI tree boundary: when
+ * nested inside another floating panel (e.g. a `Dropdown`'s panel), it joins
+ * that panel's tree so outside-clicks and Escape inside this menu resolve to
+ * this (innermost) menu without wrongly dismissing the parent. When not
+ * nested, it provides its own single-node tree — no consumer opt-in needed.
  */
-export declare const MenuButton: ({ className, disabled, displayType, iconName, id, isSplitButton, label, menuItems, menuPosition, onClick, size, testId, undefinedLabel, variant, withinNavbar, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuButton: (props: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/SSOButton/SSOButton.d.ts

@@ -16,6 +16,10 @@ interface SSOButtonProps extends ComponentPropsWithoutRef<'button'> {
      * Is the button disabled?
      */
     disabled?: boolean;
+    /**
+     * Is the button in a working state?
+     */
+    isWorking?: boolean;
     /**
      * The text of the button
      */
@@ -33,9 +37,13 @@ interface SSOButtonProps extends ComponentPropsWithoutRef<'button'> {
      * @default 'm'
      */
     size?: SSOButtonSize;
+    /**
+     * Text for an optional tooltip to be displayed when the button is `disabled` or `isWorking`.
+     */
+    tooltipText?: string;
 }
 /**
  * A Component used to render an SSO Button
  */
-export declare const SSOButton: ({ buttonType, className, disabled, label, onClick, platform, size, ...props }: SSOButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SSOButton: ({ buttonType, className, disabled, isWorking, label, onClick, platform, size, tooltipText, ...props }: SSOButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/SegmentedButton/SegmentedButton.d.ts

@@ -1,17 +1,40 @@
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './segmented-button.css';
+export type SegmentedButtonSize = 's' | 'm' | 'l';
 /**
  * Structure for each option in the SegmentedButton component.
  */
 interface OptionType {
+    /**
+     * Disables this individual option.
+     */
     disabled?: boolean;
+    /**
+     * Optional icon rendered before the label.
+     */
     iconName?: PDSIcon;
+    /**
+     * Optional unique ID for the option. Falls back to a generated ID.
+     */
     id?: string;
+    /**
+     * Shows a spinner before the label to indicate the option is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Visible text for the option.
+     */
     label: string;
+    /**
+     * Optional tally badge rendered after the label.
+     */
     tally?: {
         label: string | number;
         type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
     };
+    /**
+     * Value submitted when this option is selected.
+     */
     value: string;
 }
 /**
@@ -19,7 +42,11 @@ interface OptionType {
  */
 export interface SegmentedButtonProps {
     /**
-     * Additional class names
+     * Renders a border around the track. Off by default.
+     */
+    border?: boolean;
+    /**
+     * Additional class names.
      */
     className?: string;
     /**
@@ -27,9 +54,16 @@ export interface SegmentedButtonProps {
      */
     defaultValue?: string;
     /**
-     * Is the SegmentedButton disabled?
+     * Disables all options in the SegmentedButton.
      */
     disabled?: boolean;
+    /**
+     * Renders each option as an icon-only, square segment with a circular
+     * selected pill. Each option's `iconName` is required and its `label` is
+     * used as the accessible name (visually hidden) and shown in a tooltip on
+     * hover. Works at any size; the icon and pill scale with the size.
+     */
+    iconOnly?: boolean;
     /**
      * Unique ID for the SegmentedButton.
      */
@@ -39,24 +73,26 @@ export interface SegmentedButtonProps {
      */
     label: string;
     /**
-     * Callback function that will return the updated value from the instance when it changes.
+     * Callback fired when the selected option changes.
      */
     onChange?: (value: string) => void;
     /**
-     * Array of button options — must be between 2 and 6 options.
+     * Array of button options — must be between 2 and 6 options. Each option may
+     * include an optional icon or spinner before the label and a tally after it.
      */
     options: OptionType[];
     /**
-     * Size of the SegmentedButton.
+     * Size of the segmented button: `'s'` (20px), `'m'` (24px, default), or
+     * `'l'` (32px). The icon scales with the size.
      */
-    size?: 's' | 'm';
+    size?: SegmentedButtonSize;
     /**
-     * Value of the Segmented Button. Used to set the value of the field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     * Controlled value. Cannot be used together with `defaultValue`.
      */
     value?: string;
 }
 /**
  * SegmentedButton UI component
  */
-export declare const SegmentedButton: ({ className, defaultValue, disabled, id, label, onChange, options, size, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedButton: ({ border, className, defaultValue, disabled, iconOnly, id, label, onChange, options, size, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/SelectButton/SelectButton.d.ts

@@ -0,0 +1,81 @@
+import './select-button.css';
+/**
+ * A single option the SelectButton can choose between.
+ */
+export interface SelectButtonOption {
+    /**
+     * Whether this option is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Visible label for the option.
+     */
+    label: string;
+    /**
+     * Unique value used for selection.
+     */
+    value: string;
+}
+/**
+ * Prop types for SelectButton
+ */
+export interface SelectButtonProps {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Disable the entire control.
+     */
+    disabled?: boolean;
+    /**
+     * id applied to the trigger button.
+     */
+    id?: string;
+    /**
+     * The dimension name shown in the trigger (e.g. "Sort").
+     */
+    keyLabel: string;
+    /**
+     * Show the in-menu search input once the number of options reaches this
+     * threshold. Defaults to `8`. Set to `0` to always show it.
+     */
+    minFilterItems?: number;
+    /**
+     * Text shown when the search finds no matching options.
+     */
+    noResultsText?: string;
+    /**
+     * Called with the next value whenever the selection changes.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Options the user can choose between.
+     */
+    options: SelectButtonOption[];
+    /**
+     * Accessible label for the search input.
+     */
+    searchLabel?: string;
+    /**
+     * Placeholder for the search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * The currently selected value (controlled). Exactly one option is always
+     * selected — there is no "cleared" state.
+     */
+    value: string;
+}
+/**
+ * SelectButton — a trigger + menu for choosing exactly one value out of a
+ * small fixed set, for controls where a value is always active (e.g. sort
+ * field, group-by, time range, page size). Composes the same `Dropdown` +
+ * radio-item-with-checkmark pattern as `FilterButton`, but without
+ * `FilterButton`'s optional/clearable semantics — there is no empty state and
+ * no clear affordance, because unlike a filter, this kind of control can
+ * never have "nothing" selected.
+ *
+ * Selection is controlled: pass `value` and handle `onChange`.
+ */
+export declare const SelectButton: ({ className, disabled, id, keyLabel, minFilterItems, noResultsText, onChange, options, searchLabel, searchPlaceholder, value, }: SelectButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/SplitButton/SplitButton.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { ButtonVariant, LinkItemType, MenuItemType } from '../../../libs/types/custom-types';
+import { PDSIcon } from '../../icons/Icon/Icon';
 import './split-button.css';
 type SplitButtonSize = 's' | 'm';
 /**
@@ -18,6 +19,11 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
      * Is the button disabled?
      */
     disabled?: boolean;
+    /**
+     * Icon shown at the start of the primary action, e.g. `'plus'`. Only
+     * applies to the primary action — there's no equivalent for menu items.
+     */
+    iconName?: PDSIcon;
     /**
      * ID value for this component.
      */
@@ -38,5 +44,5 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
 /**
  * A component used to render a button with a primary action and a menu of additional options
  */
-export declare const SplitButton: ({ actionItems, className, disabled, id, moreActionsLabel, size, variant, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SplitButton: ({ actionItems, className, disabled, iconName, id, moreActionsLabel, size, variant, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/cards/ActionCard/ActionCard.d.ts

@@ -0,0 +1,64 @@
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import { CardBackground, CardPaddingScale } from '../../../libs/types/layout-types';
+import { CardImageVariant } from '../../cards/Card/Card';
+import './action-card.css';
+export interface ActionCardPrimaryAction {
+    /**
+     * Accessible label for the card-level action. Required — read by screen readers
+     * as the name of the interactive element that covers the card.
+     */
+    label: string;
+    /**
+     * For link-based actions: pass a native `<a>` or framework link element (e.g.
+     * React Router `<Link>`). The component clones the element and injects the
+     * required class and aria-label. Mutually exclusive with `onClick`.
+     */
+    linkContent?: ReactElement;
+    /**
+     * For button-based actions: callback fired when the card is activated.
+     * Mutually exclusive with `linkContent`.
+     */
+    onClick?: () => void;
+}
+/**
+ * Prop types for ActionCard
+ */
+export interface ActionCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Background color of the card.
+     */
+    background?: CardBackground;
+    /**
+     * Card content. Supports `image`, `main`, and `footer` named slots.
+     * Any interactive elements placed inside children (secondary actions) are
+     * naturally positioned above the card-level primary action.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Controls how the image slot is presented.
+     * - `bleed` (default): image extends to card edges, top corners rounded only.
+     * - `inset`: image has padding on all sides, all corners rounded.
+     */
+    imageVariant?: CardImageVariant;
+    /**
+     * Relative padding for the `main` and `footer` slots.
+     */
+    padding?: CardPaddingScale;
+    /**
+     * The card-level primary action. Provide either `linkContent` (for links) or
+     * `onClick` (for button actions), plus a required accessible `label`.
+     */
+    primaryAction: ActionCardPrimaryAction;
+}
+/**
+ * ActionCard UI component
+ *
+ * A fully-clickable card where the entire surface activates a primary action.
+ * Supports both link and button actions. Secondary interactive elements can be
+ * placed inside children and remain independently clickable above the card action.
+ */
+export declare const ActionCard: ({ background, children, className, imageVariant, padding, primaryAction, ...props }: ActionCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/cards/Card/Card.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '../../../libs/types/layout-types';
+import { CardBackground, CardPaddingScale, ImageDisplayVariant } from '../../../libs/types/layout-types';
 import './card.css';
-export type CardBackground = 'default' | 'transparent';
+export type CardImageVariant = ImageDisplayVariant;
 /**
  * Prop types for Card
  */
@@ -18,12 +18,18 @@ export interface CardProps extends ComponentPropsWithoutRef<'div'> {
      * Additional class names
      */
     className?: string;
+    /**
+     * Controls how the image fills the card top.
+     * - `bleed` (default): image extends to the card edges, top corners rounded only.
+     * - `inset`: image has padding on all sides, all corners rounded.
+     */
+    imageVariant?: CardImageVariant;
     /**
      * Relative padding for the `main` slot.
      */
-    padding?: GridGapOptions;
+    padding?: CardPaddingScale;
 }
 /**
  * Card UI component
  */
-export declare const Card: ({ background, children, className, padding, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ background, children, className, imageVariant, padding, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;