@pantheon-systems/pds-toolkit-react 1.0.0-dev.99 → 1.0.0-dev.9998

package/_dist/components/navigation/TabMenu/TabMenu.d.ts

@@ -0,0 +1,43 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import { TabMenuDropdownProps } from './TabMenuDropdown';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './tab-menu.css';
+type DropdownSettings = Omit<TabMenuDropdownProps, 'links'>;
+export type TabMenuItemProps = NavigationItem & {
+    /**
+     * Settings for dropdown menu. Leave null if no dropdown is needed.
+     */
+    dropdownSettings?: DropdownSettings;
+    /**
+     * Icon to display next to the link content.
+     */
+    icon?: PDSIcon;
+    /**
+     * Promote active child link to the top level.
+     * If true, the top-level menu will display the active child link instead of the parent link. If using this approach, it is recommended to also include the parent link as the first child link.
+     */
+    promoteActiveChildLink?: boolean;
+};
+/**
+ * Prop types for TabMenu.
+ */
+export interface TabMenuProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Menu items to render.
+     */
+    menuItems?: TabMenuItemProps[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * TabMenu UI component.
+ */
+export declare const TabMenu: ({ ariaLabel, menuItems, className, ...props }: TabMenuProps) => React.JSX.Element;
+export {};

package/_dist/components/navigation/TabMenu/TabMenuDropdown.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './tab-menu.css';
+export type TabMenuDropdownProps = {
+    /**
+     * Button label for the dropdown trigger.
+     */
+    buttonLabel?: string;
+    /**
+     * Label for the dropdown filter. Leave null if no filter is needed.
+     */
+    filterLabel?: string;
+    /**
+     * Placeholder for the dropdown filter.
+     */
+    filterPlaceholder?: string;
+    /**
+     * Links to display in the dropdown.
+     */
+    links?: NavigationItem[];
+    /**
+     * Minimum number of items to enable filtering.
+     */
+    minFilterItems?: number;
+    /**
+     * Text to display when no results are found.
+     */
+    noResultsText?: string;
+};
+/**
+ * TabMenuDropdown UI component
+ */
+export declare const TabMenuDropdown: ({ buttonLabel, filterLabel, filterPlaceholder, links, minFilterItems, noResultsText, }: TabMenuDropdownProps) => React.JSX.Element;

package/_dist/components/navigation/UserMenu/UserMenu.d.ts

@@ -0,0 +1,69 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import './user-menu.css';
+/**
+ * Prop types for UserMenuItem
+ */
+export type UserMenuItem = {
+    /**
+     * Use if the menu item should perform an action. This should be a function to be called when the menu item is clicked. Do not use if `linkContent` is provided.
+     */
+    callback?: () => void;
+    /**
+     * Is the menu item disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Icon name for the menu item.
+     */
+    iconName?: PDSIcon;
+    /**
+     * Unique ID for the menu item. Optional.
+     */
+    id?: string;
+    /**
+     * The text to be displayed as the menu item label if a `callback` is provided.
+     */
+    label?: string;
+    /**
+     * Use if the menu item should navigate to another location. This should be a fully-formed link using the router of your choice. Should be used in place of `callback` and `label`.
+     */
+    linkContent?: ReactNode;
+};
+/**
+ * Prop types for UserMenu
+ */
+export interface UserMenuProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Aria label for the user menu.
+     */
+    ariaLabel?: string;
+    /**
+     * Array of menu items.
+     */
+    menuItems?: UserMenuItem[];
+    /**
+     * User email address.
+     */
+    userEmail?: string;
+    /**
+     * Image source for the user avatar.
+     */
+    userImageSrc?: string;
+    /**
+     * User display name.
+     */
+    userName?: string;
+    /**
+     * If true, the workspace selector will be styled and rendered to work with the mobile version of the navbar menu. Defaults to true.
+     */
+    withinNavbar?: boolean;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * UserMenu UI component
+ */
+export declare const UserMenu: ({ ariaLabel, menuItems, userEmail, userImageSrc, userName, withinNavbar, className, ...props }: UserMenuProps) => React.JSX.Element;

package/_dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts

@@ -0,0 +1,89 @@
+import React, { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import './workspace-selector.css';
+declare const tierLabels: {
+    silver: string;
+    gold: string;
+    platinum: string;
+    diamond: string;
+};
+export type PlanTiers = keyof typeof tierLabels;
+export type WorkspaceSelectorItem = {
+    /**
+     * Name of the workspace.
+     */
+    displayName?: string;
+    /**
+     * Image src for the workspace.
+     */
+    imageSrc?: string;
+    /**
+     * Is this the currently selected workspace?
+     */
+    isActive?: boolean;
+    /**
+     * This user does not have access to this workspace.
+     */
+    isUnprivileged?: boolean;
+    /**
+     * Account plan tier.
+     */
+    planTier?: PlanTiers;
+    /**
+     * Id of the workspace.
+     */
+    workspaceId?: string;
+    /**
+     * Link to the workspace. A link element via the router of your choice.
+     */
+    workspaceLink?: ReactElement;
+};
+/**
+ * Prop types for WorkspaceSelector
+ */
+export interface WorkspaceSelectorProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Aria label for the workspace selector menu.
+     */
+    ariaLabel?: string;
+    /**
+     * Link to create a new workspace. A link element using the router of your choice.
+     */
+    createWorkspaceLink?: ReactNode;
+    /**
+     * Placeholder text for the filter input.
+     */
+    filterPlaceholder?: string;
+    /**
+     * Label for the filter input.
+     */
+    filterLabel?: string;
+    /**
+     * Heading for the workspace dropdown menu.
+     */
+    menuHeading?: string;
+    /**
+     * Minimum number of items to enable filtering.
+     */
+    minFilterItems?: number;
+    /**
+     * Text to display when no results are found.
+     */
+    noResultsText?: string;
+    /**
+     * Is this component located in the top nav? Only applies when using the Navbar component from this toolkit. Defaults to true per design.
+     */
+    withinNavbar?: boolean;
+    /**
+     * List of all workspaces for a user.
+     */
+    workspaceList?: WorkspaceSelectorItem[];
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * WorkspaceSelector UI component
+ */
+export declare const WorkspaceSelector: ({ ariaLabel, createWorkspaceLink, filterPlaceholder, filterLabel, menuHeading, minFilterItems, noResultsText, withinNavbar, workspaceList, className, ...props }: WorkspaceSelectorProps) => React.JSX.Element;
+export {};

package/_dist/components/navigation/navigation-types.d.ts

@@ -0,0 +1,29 @@
+import type { ReactElement } from 'react';
+export type NavigationItem = {
+    /**
+     * A boolean indicating whether the item is the active item.
+     */
+    isActive?: boolean;
+    /**
+     * Link content — a fully-formed link element using the router of your choice. If a string is provided instead, the item will be rendered as a link that navigates to the first child item.
+     */
+    linkContent: ReactElement | string;
+    /**
+     * Submenu items.
+     */
+    links?: NavigationItem[];
+};
+export type FlattenedNavigationItem = {
+    /**
+     * A boolean indicating whether the item is the active item.
+     */
+    isActive?: boolean;
+    /**
+     * Link content — a fully-formed link element using the router of your choice.
+     */
+    linkContent: ReactElement;
+    /**
+     * Nesting level of the item.
+     */
+    level: 'top-level' | 'second-level' | 'third-level' | 'fourth-level';
+};

package/_dist/components/navigation/navigation-utilities.d.ts

@@ -0,0 +1,90 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import { NavigationItem } from '@components/navigation/navigation-types';
+/**
+ * Recursively searches through navigation items to find the first active link
+ * @param items - Array of navigation items to search through
+ * @returns The active link element, or null if no active link is found or if the active item is a string
+ * @example
+ * const activeLink = getActiveLink(menuItems);
+ */
+export declare const getActiveLink: (items: NavigationItem[]) => ReactElement | null;
+/**
+ * Extracts a string representation from linkContent, whether it's a string or React element
+ * @param linkContent - The link content to extract string from (string or React element)
+ * @returns String representation of the link content
+ * @example
+ * const linkText = getLinkContentString(<Link>Home</Link>); // Returns "Home"
+ * const linkText = getLinkContentString("About"); // Returns "About"
+ */
+export declare const getLinkContentString: (linkContent: ReactElement | string) => string;
+/**
+ * Determines if a navigation item is currently active
+ * @param item - The navigation item to check
+ * @returns True if the item is active, false otherwise
+ * @description Checks for active state via:
+ * - The `isActive` property on the item
+ * - The presence of 'pds-isActive' class on the link element
+ * - Returns false for string-based items
+ * @example
+ * const isActive = isActiveItem(navigationItem);
+ */
+export declare const isActiveItem: (item: NavigationItem) => boolean;
+/**
+ * Determines if a navigation item or any of its children are in the active trail
+ * @param item - The navigation item to check (including its children)
+ * @returns True if the item or any child is active, false otherwise
+ * @description Recursively checks the item and all child items for active state
+ * @example
+ * const inActiveTrail = isActiveTrail(parentItem); // True if parent or any child is active
+ */
+export declare const isActiveTrail: (item: NavigationItem) => boolean;
+/**
+ * Checks if the provided content is an interactive element (link, button, etc.)
+ * @param content - The React content to examine
+ * @returns True if the content is an interactive element, false otherwise
+ * @description Currently detects:
+ * - Native anchor elements (`<a>`)
+ * - React Router Link components (by displayName)
+ * @example
+ * const isInteractive = isInteractiveElement(<Link to="/home">Home</Link>); // true
+ * const isInteractive = isInteractiveElement(<span>Label</span>); // false
+ * const isInteractive = isInteractiveElement("Plain text"); // false
+ */
+export declare const isInteractiveElement: (content: ReactNode) => boolean;
+/**
+ * Processes navigation link content based on its type and available child links
+ * @param linkContent - The link content to process (string or React element)
+ * @param links - Optional array of child navigation items
+ * @returns Processed link content
+ * @description
+ * - If linkContent is a string and child links exist, clones the first child link with the string as label
+ * - Otherwise returns the linkContent as-is
+ * @example
+ * // With string and child links - uses first child as template
+ * const processed = processNavLinkContent("Home", [{ linkContent: <Link to="/home" /> }]);
+ *
+ * // With React element - returns as-is
+ * const processed = processNavLinkContent(<Link to="/about">About</Link>);
+ */
+export declare const processNavLinkContent: (linkContent: ReactElement | string, links?: NavigationItem[]) => ReactElement | string;
+/**
+ * Processes side navigation global items with optional icons and specialized markup structure
+ * @param baseClass - Base CSS class for styling
+ * @param linkContent - The link content to process (string or React element)
+ * @param links - Optional array of child navigation items
+ * @param icon - Optional PDS icon to include
+ * @returns Processed navigation item with icon and proper markup structure, or null
+ * @description
+ * Creates a structured navigation item with:
+ * - Icon support with proper CSS classes
+ * - Consistent markup structure for global navigation
+ * - Template behavior for string content with child links
+ * @example
+ * // String with icon and child links
+ * const item = processSideNavGlobalLinkContent('nav', 'Home', childLinks, 'home');
+ *
+ * // React element with icon
+ * const item = processSideNavGlobalLinkContent('nav', <Link to="/about">About</Link>, null, 'info');
+ */
+export declare const processSideNavGlobalLinkContent: (baseClass: string, linkContent: ReactElement | string, links?: NavigationItem[], icon?: PDSIcon) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/_dist/components/notifications/Banner/Banner.d.ts

@@ -0,0 +1,47 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './banner.css';
+type Banner = {
+    id: string;
+    isDismissible?: boolean;
+    message: string | React.ReactNode;
+    onDismiss?: () => void;
+    type?: 'info' | 'warning' | 'critical';
+};
+/**
+ * Prop types for Banner
+ */
+export interface BannerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Array of banner objects
+     */
+    banners: Banner[];
+    /**
+     * Label for the dismiss button
+     */
+    dismissLabel?: string;
+    /**
+     * Label for the next message button
+     */
+    labelNext?: string;
+    /**
+     * Label for the previous message button
+     */
+    labelPrevious?: string;
+    /**
+     * Type labels
+     */
+    typeLabels?: {
+        info: string;
+        warning: string;
+        critical: string;
+    };
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Banner UI component
+ */
+export declare const Banner: ({ banners, dismissLabel, labelNext, labelPrevious, typeLabels, className, ...props }: BannerProps) => React.JSX.Element;
+export {};

package/_dist/components/notifications/InlineMessage/InlineMessage.d.ts

@@ -0,0 +1,37 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './inline-message.css';
+/**
+ * The type of message to display.
+ */
+export type InlineMessageType = 'info' | 'success' | 'warning' | 'critical' | 'working';
+/**
+ * Labels for each message type.
+ */
+type TypeLabels = Record<InlineMessageType, string>;
+export interface InlineMessageProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * Message body.
+     */
+    message?: ReactNode;
+    /**
+     * Title text.
+     */
+    title: ReactNode;
+    /**
+     * Message type.
+     */
+    type: InlineMessageType;
+    /**
+     * Message type labels. Provide translation strings if needed.
+     */
+    typeLabels?: TypeLabels;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * InlineMessage UI component
+ */
+export declare const InlineMessage: ({ title, message, type, typeLabels, className, ...props }: InlineMessageProps) => React.JSX.Element;
+export {};

package/_dist/components/notifications/SectionMessage/SectionMessage.d.ts

@@ -0,0 +1,53 @@
+import React, { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
+import { Button } from '@components/buttons/Button/Button';
+import './section-message.css';
+export type SectionMessageType = 'info' | 'success' | 'warning' | 'critical' | 'discovery';
+type TypeLabels = Record<SectionMessageType, string>;
+export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Props for optional call to action button.
+     * Can include any Button props except for size and variant.
+     */
+    ctaButton?: ComponentPropsWithoutRef<typeof Button>;
+    /**
+     * Label for dismiss button. Provide a translation string if needed.
+     */
+    dismissLabel?: string;
+    /**
+     * Unique id of message.
+     */
+    id?: string;
+    /**
+     * Includes dismiss functionality.
+     */
+    isDismissible?: boolean;
+    /**
+     * Message text.
+     */
+    message: ReactNode;
+    /**
+     * Callback function when message is dismissed.
+     */
+    onDismiss?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;
+    /**
+     * Message title.
+     */
+    title?: string;
+    /**
+     * Message type.
+     */
+    type: SectionMessageType;
+    /**
+     * Message type labels. Provide translation strings if needed.
+     */
+    typeLabels?: TypeLabels;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * SectionMessage UI component
+ */
+export declare const SectionMessage: ({ ctaButton, dismissLabel, id, isDismissible, onDismiss, message, title, type, typeLabels, className, ...props }: SectionMessageProps) => React.JSX.Element;
+export {};

package/_dist/components/notifications/Toaster/Toast.d.ts

@@ -0,0 +1,46 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './toaster.css';
+declare const iconTypes: {
+    readonly info: "circleInfo";
+    readonly success: "check";
+    readonly warning: "triangleExclamation";
+    readonly critical: "diamondExclamation";
+};
+type IconType = keyof typeof iconTypes;
+declare const defaultTypeLabels: {
+    readonly info: "Information";
+    readonly success: "Success";
+    readonly warning: "Warning";
+    readonly critical: "Critical";
+    readonly working: "Working...";
+};
+/**
+ * Prop types for Toast
+ */
+interface ToastProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Toast message content.
+     */
+    children?: ReactNode;
+    /**
+     * ID of individual toast.
+     */
+    id?: string;
+    /**
+     * Type of toast to show.
+     */
+    type?: IconType | 'working';
+    /**
+     * Toast type labels. Provide translation strings if needed.
+     */
+    typeLabels?: Partial<typeof defaultTypeLabels>;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Toast UI component
+ */
+export declare const Toast: ({ children, id, type, typeLabels, className, }: ToastProps) => React.JSX.Element;
+export {};

package/_dist/components/notifications/Toaster/Toaster.d.ts

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import 'react-toastify/dist/ReactToastify.css';
+import './toaster.css';
+/**
+ * Prop types for Toast
+ */
+interface ToasterProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Duration in milliseconds before the toast will auto-close.
+     */
+    autoCloseDuration?: number;
+    /**
+     * Maximum number of toasts that can be displayed at once.
+     */
+    limit?: number;
+    /**
+     * Location toast objects will show in the UI.
+     */
+    position?: 'bottom-right' | 'top-right';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Toaster UI component
+ */
+export declare const Toaster: ({ autoCloseDuration, limit, position, className, }: ToasterProps) => React.JSX.Element;
+export {};

package/_dist/components/notifications/Toaster/useToast.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { cssTransition, toast as toastApi, ToastOptions } from 'react-toastify';
+export declare enum ToastType {
+    Critical = "critical",
+    Warning = "warning",
+    Working = "working",
+    Success = "success",
+    Info = "info"
+}
+export declare const useToast: () => [(type: ToastType, message: string | ReactElement, options?: ToastOptions) => string | number, typeof toastApi, ReturnType<typeof cssTransition>];

package/_dist/components/panels/ExpansionPanel/ExpansionPanel.d.ts

@@ -0,0 +1,32 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './expansion-panel.css';
+/**
+ * Prop types for ExpansionPanel
+ */
+interface ExpansionPanelProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The content of the expansion panel.
+     */
+    children?: ReactNode;
+    /**
+     * The ID of the expansion panel. If not provided, a unique ID will be generated.
+     */
+    id?: string;
+    /**
+     * Whether the expansion panel is open or not.
+     */
+    isOpen?: boolean;
+    /**
+     * The summary label of the expansion panel.
+     */
+    summary?: string | ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ExpansionPanel UI component
+ */
+export declare const ExpansionPanel: ({ children, id, isOpen, summary, className, ...props }: ExpansionPanelProps) => React.JSX.Element;
+export {};

package/_dist/components/panels/ExpansionPanelGroup/ExpansionPanelGroup.d.ts

@@ -0,0 +1,24 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './expansion-panel-group.css';
+/**
+ * Prop types for ExpansionPanelGroup
+ */
+interface ExpansionPanelGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The content of the expansion panel group. This should be a series of ExpansionPanel components.
+     */
+    children?: ReactNode;
+    /**
+     * The display type of the expansion panel group.
+     */
+    displayType?: 'standard' | 'no-border' | 'stacked';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ExpansionPanelGroup UI component
+ */
+export declare const ExpansionPanelGroup: ({ children, displayType, className, ...props }: ExpansionPanelGroupProps) => React.JSX.Element;
+export {};

package/_dist/components/panels/Panel/Panel.d.ts

@@ -0,0 +1,35 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './panel.css';
+import { GridGapOptions } from '@layouts/layout-types';
+type StatusType = 'info' | 'success' | 'warning' | 'critical' | 'neutral';
+export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Panel content.
+     */
+    children: ReactNode;
+    /**
+     * Should the panel show a status indicator.
+     */
+    hasStatusIndicator?: boolean;
+    /**
+     * Padding for the panel.
+     */
+    padding?: GridGapOptions;
+    /**
+     * Status type for panel. Only renders if `hasStatusIndicator` is true.
+     */
+    statusType?: StatusType;
+    /**
+     * Which variant of panel to render
+     */
+    variant?: 'default' | 'sunken' | 'raised' | 'overlay' | 'critical';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Panel UI component
+ */
+export declare const Panel: ({ children, hasStatusIndicator, padding, statusType, variant, className, ...props }: PanelProps) => React.JSX.Element;
+export {};