@pantheon-systems/pds-toolkit-react 1.0.0-dev.18 → 1.0.0-dev.180

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

@@ -0,0 +1,69 @@
+export function DashboardSearch({ disabled, id, isLoading, label, labelStrings, loadingText, noResultsText, onFocus, onOptionSelect, placeholder, siteList, horizontalOffset, className, ...props }: {
+    [x: string]: any;
+    disabled?: boolean;
+    id: any;
+    isLoading?: boolean;
+    label?: string;
+    labelStrings?: {
+        clearButton: string;
+        inputInstructions: string;
+        openSearchButton: string;
+    };
+    loadingText?: string;
+    noResultsText?: string;
+    onFocus: any;
+    onOptionSelect: any;
+    placeholder?: string;
+    siteList: any;
+    horizontalOffset?: number;
+    className: any;
+}): React.JSX.Element;
+export namespace DashboardSearch {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let id: PropTypes.Requireable<string>;
+        let isLoading: PropTypes.Requireable<boolean>;
+        let label: PropTypes.Requireable<string>;
+        let labelStrings: PropTypes.Requireable<PropTypes.InferProps<{
+            /**
+             * Clear button label
+             */
+            clearButton: PropTypes.Requireable<string>;
+            /**
+             * Input instructions
+             */
+            inputInstructions: PropTypes.Requireable<string>;
+            /**
+             * Open search button label
+             */
+            openSearchButton: PropTypes.Requireable<string>;
+        }>>;
+        let loadingText: PropTypes.Requireable<string>;
+        let noResultsText: PropTypes.Requireable<string>;
+        let onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        let onOptionSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        let placeholder: PropTypes.Requireable<string>;
+        let siteList: PropTypes.Requireable<PropTypes.InferProps<{
+            /**
+             * Site ID
+             */
+            id: PropTypes.Requireable<string>;
+            /**
+             * Site name.
+             */
+            name: PropTypes.Requireable<string>;
+            /**
+             * Site status
+             */
+            status: PropTypes.Requireable<string>;
+            /**
+             * Site type
+             */
+            type: PropTypes.Requireable<string>;
+        }>[]>;
+        let horizontalOffset: PropTypes.Requireable<number>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/_dist/components/navigation/DashboardSearch/SiteOptionDisplay.d.ts

@@ -0,0 +1,10 @@
+export function SiteOptionDisplay({ option }: {
+    option: any;
+}): React.JSX.Element;
+export namespace SiteOptionDisplay {
+    namespace propTypes {
+        let option: PropTypes.Requireable<object>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,28 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './dropdown-menu.css';
+/**
+ * Prop types for DropdownMenu
+ */
+export interface DropdownMenuProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Heading text. If a string is passed, it will be rendered as a heading. If a link is passed, it will be rendered as a link.
+     */
+    headingText?: string | JSX.Element;
+    /**
+     * Menu items to render.
+     */
+    menuItems: NavigationItem[];
+    /**
+     * Text to display in the mobile menu trigger button when no active link is found.
+     */
+    selectTextFallback: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * DropdownMenu UI component
+ */
+export declare const DropdownMenu: ({ headingText, menuItems, selectTextFallback, className, ...props }: DropdownMenuProps) => React.JSX.Element;

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

@@ -0,0 +1,19 @@
+export function NavMenu({ ariaLabel, colorType, menuItems, mobileMenuMaxWidth, className, ...props }: {
+    [x: string]: any;
+    ariaLabel?: string;
+    colorType?: string;
+    menuItems: any;
+    mobileMenuMaxWidth?: number;
+    className: any;
+}): React.JSX.Element;
+export namespace NavMenu {
+    namespace propTypes {
+        let ariaLabel: PropTypes.Validator<string>;
+        let colorType: PropTypes.Requireable<string>;
+        let menuItems: PropTypes.Requireable<any[]>;
+        let mobileMenuMaxWidth: PropTypes.Requireable<number>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/_dist/components/navigation/NavMenu/NavMenuDropdown.d.ts

@@ -0,0 +1,14 @@
+export function NavMenuDropdown({ items, label, mobileMenuMaxWidth }: {
+    items: any;
+    label: any;
+    mobileMenuMaxWidth?: number;
+}): React.JSX.Element;
+export namespace NavMenuDropdown {
+    namespace propTypes {
+        let items: PropTypes.Requireable<any[]>;
+        let label: PropTypes.Requireable<string>;
+        let mobileMenuMaxWidth: PropTypes.Requireable<number>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,60 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PantheonLogoDisplayType } from '@components/PantheonLogo/PantheonLogo';
+import { ContainerWidth } from '@libs/types/custom-types';
+import './navbar.css';
+/**
+ * Prop types for Navbar
+ */
+export interface NavbarProps extends ComponentPropsWithoutRef<'header'> {
+    /**
+     * Navbar content.
+     */
+    children?: ReactNode;
+    /**
+     * Color type of the navbar.
+     */
+    colorType?: 'default' | 'reverse' | 'reverse-transparent' | 'transparent';
+    /**
+     * PDS container width.
+     */
+    containerWidth?: ContainerWidth;
+    /**
+     * Hide the border at the bottom of the navbar.
+     */
+    hideBorder?: boolean;
+    /**
+     * Hide the logo if it will be provided elsewhere in the layout. The logo will still be rendered in the mobile view.
+     */
+    hideLogo?: boolean;
+    /**
+     * How should the Pantheon logo be displayed.
+     */
+    logoDisplayType?: PantheonLogoDisplayType;
+    /**
+     * Where should the logo link to? A fully-formed link element.
+     */
+    logoLinkContent?: ReactNode;
+    /**
+     * Logo image source. If provided, the Pantheon logo will not be rendered.
+     */
+    logoSrc?: string;
+    /**
+     * Accepts a fully-formed link or a string (if a static site name is desired). Only necessary if logoDisplayType is `sub-brand`.
+     */
+    logoSubBrand?: ReactNode | string;
+    /**
+     * Translation strings for accessibility.
+     */
+    translationStrings?: {
+        closeMobileNav: string;
+        openMobileNav: string;
+    };
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Navbar UI component
+ */
+export declare const Navbar: ({ children, colorType, containerWidth, hideBorder, hideLogo, logoDisplayType, logoLinkContent, logoSrc, logoSubBrand, translationStrings, className, ...props }: NavbarProps) => React.JSX.Element;

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

@@ -0,0 +1,47 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './side-nav.css';
+/**
+ * Prop types for SideNav
+ */
+export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Whether the menu should be rendered as a mobile menu when the viewport is at or below the mobileMenuMaxWidth.
+     */
+    hasMobileMenu?: boolean;
+    /**
+     * Heading text. If a link is passed, it will be rendered as a link.
+     */
+    headingText?: string | JSX.Element;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Menu items to render.
+     */
+    menuItems: NavigationItem[];
+    /**
+     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
+    mobileMenuMaxWidth?: number;
+    /**
+     * Text to display in the mobile menu trigger button when no active link is found.
+     */
+    mobileMenuSelectTextFallback?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SideNav UI component
+ */
+export declare const SideNav: ({ ariaLabel, hasMobileMenu, headingText, labels, menuItems, mobileMenuMaxWidth, mobileMenuSelectTextFallback, className, ...props }: SideNavProps) => React.JSX.Element;

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

@@ -0,0 +1,47 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './side-nav-compact.css';
+/**
+ * Prop types for SideNavCompact
+ */
+export interface SideNavCompactProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Whether the menu should be rendered as a mobile menu when the viewport is at or below the mobileMenuMaxWidth.
+     */
+    hasMobileMenu?: boolean;
+    /**
+     * Heading text. If a link is passed, it will be rendered as a link.
+     */
+    headingText?: string | JSX.Element;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Menu items to render.
+     */
+    menuItems: NavigationItem[];
+    /**
+     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
+    mobileMenuMaxWidth?: number;
+    /**
+     * Text to display in the mobile menu trigger button when no active link is found.
+     */
+    mobileMenuSelectTextFallback?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SideNavCompact UI component
+ */
+export declare const SideNavCompact: ({ ariaLabel, hasMobileMenu, headingText, labels, menuItems, mobileMenuMaxWidth, mobileMenuSelectTextFallback, className, ...props }: SideNavCompactProps) => 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/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/UserMenu/user-menu-sample-content.d.ts

@@ -0,0 +1,2 @@
+import { UserMenuItem } from './UserMenu';
+export declare const userMenuItems: UserMenuItem[];

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

@@ -0,0 +1,58 @@
+export function WorkspaceSelector({ ariaLabel, createWorkspaceLink, filterPlaceholder, filterLabel, menuHeading, minFilterItems, noResultsText, withinNavbar, workspaceList, className, ...props }: {
+    [x: string]: any;
+    ariaLabel?: string;
+    createWorkspaceLink: any;
+    filterPlaceholder?: string;
+    filterLabel?: string;
+    menuHeading?: string;
+    minFilterItems?: number;
+    noResultsText?: string;
+    withinNavbar?: boolean;
+    workspaceList: any;
+    className: any;
+}): React.JSX.Element;
+export namespace WorkspaceSelector {
+    namespace propTypes {
+        let ariaLabel: PropTypes.Requireable<string>;
+        let createWorkspaceLink: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let filterPlaceholder: PropTypes.Requireable<string>;
+        let filterLabel: PropTypes.Requireable<string>;
+        let menuHeading: PropTypes.Requireable<string>;
+        let minFilterItems: PropTypes.Requireable<number>;
+        let noResultsText: PropTypes.Requireable<string>;
+        let withinNavbar: PropTypes.Requireable<boolean>;
+        let workspaceList: PropTypes.Requireable<PropTypes.InferProps<{
+            /**
+             * Name of the workspace.
+             */
+            displayName: PropTypes.Requireable<string>;
+            /**
+             * Image src for the workspace.
+             */
+            imageSrc: PropTypes.Requireable<string>;
+            /**
+             * Is this the currently selected workspace?
+             */
+            isActive: PropTypes.Requireable<boolean>;
+            /**
+             * This user does not have access to this workspace.
+             */
+            isUnprivileged: PropTypes.Requireable<boolean>;
+            /**
+             * Account plan tier.
+             */
+            planTier: PropTypes.Requireable<string>;
+            /**
+             * Id of the workspace.
+             */
+            workspaceId: PropTypes.Requireable<string>;
+            /**
+             * Link to the workspace. A link element via the router of your choice.
+             */
+            workspaceLink: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        }>[]>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,39 @@
+/// <reference types="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: JSX.Element | string;
+    /**
+     * Submenu items.
+     */
+    links?: NavigationItem[];
+};
+export type SingleLevelNavigationItem = {
+    /**
+     * 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: JSX.Element;
+};
+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: JSX.Element;
+    /**
+     * Nesting level of the item.
+     */
+    level: 'top-level' | 'second-level' | 'third-level';
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+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[]) => JSX.Element | null;
+export declare const getLinkContentString: (linkContent: JSX.Element | string) => string;
+export declare const processNavLinkContent: (linkContent: JSX.Element | string, links?: NavigationItem[]) => JSX.Element | string;

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.
+ */
+type MessageType = 'info' | 'success' | 'warning' | 'critical' | 'working';
+/**
+ * Labels for each message type.
+ */
+type TypeLabels = Record<MessageType, string>;
+export interface InlineMessageProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Title text.
+     */
+    title: string;
+    /**
+     * Secondary text.
+     */
+    secondaryText?: ReactNode;
+    /**
+     * Message type.
+     */
+    type: MessageType;
+    /**
+     * 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';
+type MessageType = 'info' | 'success' | 'warning' | 'critical' | 'discovery';
+type TypeLabels = Record<MessageType, 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: MessageType;
+    /**
+     * 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,30 @@
+export function Toast({ children, id, type, typeLabels, className, }: {
+    children: any;
+    id: any;
+    type?: string;
+    typeLabels?: {
+        info: string;
+        success: string;
+        warning: string;
+        critical: string;
+        working: string;
+    };
+    className: any;
+}): React.JSX.Element;
+export namespace Toast {
+    namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let id: PropTypes.Requireable<string>;
+        let type: PropTypes.Requireable<string>;
+        let typeLabels: PropTypes.Requireable<PropTypes.InferProps<{
+            info: PropTypes.Requireable<string>;
+            success: PropTypes.Requireable<string>;
+            warning: PropTypes.Requireable<string>;
+            critical: PropTypes.Requireable<string>;
+            working: PropTypes.Requireable<string>;
+        }>>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,16 @@
+export function Toaster({ autoCloseDuration, limit, position, className, }: {
+    autoCloseDuration?: number;
+    limit?: number;
+    position?: string;
+    className: any;
+}): React.JSX.Element;
+export namespace Toaster {
+    namespace propTypes {
+        let autoCloseDuration: PropTypes.Requireable<number>;
+        let limit: PropTypes.Requireable<number>;
+        let position: PropTypes.Requireable<string>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,2 @@
+export function useToast(): (((type: any, message: any, options?: {}) => import("react-toastify").Id) | (({ children, position, preventExitTransition, done, nodeRef, isIn }: import("react-toastify").ToastTransitionProps) => React.JSX.Element))[];
+import React from 'react';