@pantheon-systems/pds-toolkit-react 1.0.0-dev.27 → 1.0.0-dev.270

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,9 @@
+import React, { ReactElement } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import { NavigationItem } from '@components/navigation/navigation-types';
+export declare const isActiveItem: (item: NavigationItem) => boolean;
+export declare const isActiveTrail: (item: NavigationItem) => boolean;
+export declare const getActiveLink: (items: NavigationItem[]) => ReactElement | null;
+export declare const getLinkContentString: (linkContent: ReactElement | string) => string;
+export declare const processNavLinkContent: (linkContent: ReactElement | string, links?: NavigationItem[]) => ReactElement | string;
+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'> {
+    /**
+     * Title text.
+     */
+    title: ReactNode;
+    /**
+     * Secondary text.
+     */
+    secondaryText?: 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, secondaryText, type, typeLabels, className, ...props }: InlineMessageProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+import React, { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
+import './section-message.css';
+export type SectionMessageType = 'info' | 'success' | 'warning' | 'critical' | 'discovery';
+type TypeLabels = Record<SectionMessageType, string>;
+export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * 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: ({ 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 {};

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

@@ -0,0 +1,28 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './panel-list.css';
+export type PanelListBackground = 'default' | 'secondary' | 'transparent';
+/**
+ * Prop types for PanelList
+ */
+export interface PanelListProps extends ComponentPropsWithoutRef<'ul'> {
+    /**
+     * Background color for the panel list.
+     */
+    background?: PanelListBackground;
+    /**
+     * Children components. These should be PanelRow components.
+     */
+    children?: ReactNode;
+    /**
+     * Whether to have an outside border. There will always be a border between rows.
+     */
+    hasBorder?: boolean;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * PanelList UI component
+ */
+export declare const PanelList: ({ background, children, hasBorder, className, ...props }: PanelListProps) => React.JSX.Element;

package/_dist/components/panels/PanelList/PanelRow.d.ts

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './panel-list.css';
+/**
+ * Prop types for PanelRow
+ */
+export interface PanelRowProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Child elements to be assigned to named slots.
+     */
+    children: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Whether the panel row is expandable.
+     */
+    isExpandable?: boolean;
+    /**
+     * Aria-label for the expand button.
+     */
+    expandButtonAriaLabel?: string;
+}
+/**
+ * PanelRow UI component
+ */
+export declare const PanelRow: ({ children, className, isExpandable, expandButtonAriaLabel, ...props }: PanelRowProps) => React.JSX.Element;