@pantheon-systems/pds-toolkit-react 1.0.0-dev.19 → 1.0.0-dev.190

package/_dist/components/inputs/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,33 @@
+export function ToggleSwitch({ disabled, id, inputWidth, label, message, onChange, required, showLabel, showStatusLabel, statusOnLabel, statusOffLabel, className, ...props }: {
+    [x: string]: any;
+    disabled?: boolean;
+    id: any;
+    inputWidth: any;
+    label: any;
+    message: any;
+    onChange: any;
+    required?: boolean;
+    showLabel?: boolean;
+    showStatusLabel?: boolean;
+    statusOnLabel?: string;
+    statusOffLabel?: string;
+    className: any;
+}): React.JSX.Element;
+export namespace ToggleSwitch {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let id: PropTypes.Validator<string>;
+        let inputWidth: PropTypes.Requireable<number>;
+        let label: PropTypes.Validator<string>;
+        let message: PropTypes.Requireable<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let required: PropTypes.Requireable<boolean>;
+        let showLabel: PropTypes.Requireable<boolean>;
+        let showStatusLabel: PropTypes.Requireable<boolean>;
+        let statusOffLabel: PropTypes.Requireable<string>;
+        let statusOnLabel: PropTypes.Requireable<string>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/_dist/components/inputs/input-types.d.ts

@@ -0,0 +1 @@
+export type ValidationStatus = 'success' | 'error';

package/_dist/components/inputs/input-utilities.d.ts

@@ -0,0 +1,88 @@
+import React, { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';
+import './input-utilities.css';
+export declare const inputCommonClasses: {
+    base: string;
+    disabled: string;
+    required: string;
+    error: string;
+    success: string;
+    readonly: string;
+};
+export declare const getInputWidthStyle: (inputWidth: number) => {
+    width: string;
+};
+export declare const RequiredIcon: () => React.JSX.Element;
+interface InputLabelProps {
+    /**
+     * Input ID.
+     */
+    id: string;
+    /**
+     * Label text.
+     */
+    label: string;
+    /**
+     * Should the label be visible?
+     */
+    showLabel: boolean;
+    /**
+     * Is the field required?
+     */
+    required: boolean;
+    /**
+     * Is the field disabled?
+     */
+    disabled: boolean;
+    /**
+     * Is the label a legend? Should be used when the input is a fieldset.
+     */
+    isLegend?: boolean;
+    /**
+     * Not a true `label`, but a description of the field.
+     * Used for inputs that have their label built into the element itself.
+     */
+    isPseudoLabel?: boolean;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+export declare const InputLabel: ({ id, label, showLabel, required, disabled, isLegend, isPseudoLabel, className, }: InputLabelProps) => React.JSX.Element;
+export declare const InputMessage: ({ id, message, hasValidationMessage, validationMessageHasDecorators, validationStatus, className, }: {
+    id: string;
+    message: string;
+    hasValidationMessage: boolean;
+    validationMessageHasDecorators?: boolean;
+    validationStatus: string;
+    className?: string;
+}) => React.JSX.Element;
+type DecoratorVariants = 'search' | 'error' | 'success';
+export declare const InputDecorator: ({ variant }: {
+    variant: DecoratorVariants;
+}) => React.JSX.Element;
+export declare const SearchShortcut: ({ inputId, shortcutLabel, }: {
+    inputId: string;
+    shortcutLabel: string;
+}) => React.JSX.Element;
+export declare const ClearButton: ({ id, clearLabel, handleClearInput, }: {
+    id: string;
+    clearLabel: string;
+    handleClearInput: MouseEventHandler<HTMLButtonElement>;
+}) => React.JSX.Element;
+export declare const CharacterCounter: ({ id, currentLength, maxLength, overLimitMessage, }: {
+    id: string;
+    currentLength: number;
+    maxLength: number;
+    overLimitMessage: string;
+}) => React.JSX.Element;
+export declare const HiddenLabel: ({ label, ...props }: {
+    [x: string]: any;
+    label: any;
+}) => React.JSX.Element;
+interface SelectOptionProps extends ComponentPropsWithoutRef<'li'> {
+    children?: ReactNode;
+    isActive?: boolean;
+    className?: string;
+}
+export declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps & React.RefAttributes<HTMLLIElement>>;
+export {};

package/_dist/components/inputs/inputs-common.d.ts

@@ -0,0 +1,40 @@
+export namespace cssClassesList {
+    let error: string;
+    let success: string;
+    let required: string;
+    let disabled: string;
+}
+export function ClearButton({ id, label, handleClearInput }: {
+    id: any;
+    label: any;
+    handleClearInput: any;
+}): React.JSX.Element;
+export namespace ClearButton {
+    namespace propTypes {
+        let id: PropTypes.Validator<string>;
+        let label: PropTypes.Validator<string>;
+        let handleClearInput: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+export function Decorator({ type }: {
+    type: any;
+}): React.JSX.Element;
+export namespace Decorator {
+    export namespace propTypes_1 {
+        let type: PropTypes.Validator<string>;
+    }
+    export { propTypes_1 as propTypes };
+}
+export function SearchShortcut({ label }: {
+    label: any;
+}): React.JSX.Element;
+export namespace SearchShortcut {
+    export namespace propTypes_2 {
+        let label_1: PropTypes.Validator<string>;
+        export { label_1 as label };
+    }
+    export { propTypes_2 as propTypes };
+}
+export const SelectOption: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,35 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { DashboardNavItemProps } from './DashboardNavItem';
+import './dashboard-nav.css';
+/**
+ * Prop types for DashboardNav
+ */
+export interface DashboardNavProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Menu items to render.
+     */
+    menuItems: DashboardNavItemProps[];
+    /**
+     * Text to display in the mobile menu trigger button when no active link is found.
+     */
+    mobileMenuSelectTextFallback?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * DashboardNav UI component
+ */
+export declare const DashboardNav: ({ ariaLabel, labels, menuItems, mobileMenuSelectTextFallback, className, ...props }: DashboardNavProps) => React.JSX.Element;

package/_dist/components/navigation/DashboardNav/DashboardNavItem.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import { PDSIcon } from '@components/Icon/Icon';
+import './dashboard-nav.css';
+export type DashboardNavItemProps = NavigationItem & {
+    /**
+     * Icon to display next to the link content.
+     */
+    icon?: PDSIcon;
+    /**
+     * Flag indicating whether the sidebar is expanded.
+     */
+    isSidebarExpanded: boolean;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+};
+/**
+ * DashboardNavItem UI component
+ */
+export declare const DashboardNavItem: ({ icon, isActive, isSidebarExpanded, labels, linkContent, links, }: DashboardNavItemProps) => React.JSX.Element;

package/_dist/components/navigation/DashboardNav/dashboard-nav-sample-content.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export declare const dashboardNavSampleMenuItems: ({
+    icon: string;
+    linkContent: React.JSX.Element;
+    links?: undefined;
+    isActive?: undefined;
+} | {
+    icon: string;
+    linkContent: string;
+    links: {
+        linkContent: React.JSX.Element;
+    }[];
+    isActive?: undefined;
+} | {
+    icon: string;
+    linkContent: React.JSX.Element;
+    isActive: boolean;
+    links?: undefined;
+})[];
+export declare const dashboardNavSampleMenuItemsRR: ({
+    icon: string;
+    linkContent: React.JSX.Element;
+    links?: undefined;
+} | {
+    icon: string;
+    linkContent: React.JSX.Element;
+    links: {
+        linkContent: React.JSX.Element;
+    }[];
+})[];

package/_dist/components/navigation/DashboardNav/dashboard-nav-utilities.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PDSIcon } from '@components/Icon/Icon';
+import { NavigationItem } from '@components/navigation/navigation-types';
+export declare const processDashboardNavLinkContent: (baseClass: string, linkContent: JSX.Element | string, links?: NavigationItem[], icon?: PDSIcon) => JSX.Element;

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

@@ -0,0 +1,70 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { SiteOption } from './SiteOptionDisplay';
+import './dashboard-search.css';
+type LabelStrings = {
+    clearButton?: string;
+    inputInstructions?: string;
+    openSearchButton?: string;
+};
+/**
+ * Prop types for DashboardSearch
+ */
+export interface DashboardSearchProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Is the search input disabled?
+     */
+    disabled?: boolean;
+    /**
+     * ID for the component.
+     */
+    id?: string;
+    /**
+     * Is the site data still loading?
+     */
+    isLoading?: boolean;
+    /**
+     * Label for the input. Will be rendered as an aria-label.
+     */
+    label?: string;
+    /**
+     * Translation strings for various labels or other visually-hidden text.
+     */
+    labelStrings?: LabelStrings;
+    /**
+     * Text to display when site options are still loading.
+     */
+    loadingText?: string;
+    /**
+     * Text to display when no results are found.
+     */
+    noResultsText?: string;
+    /**
+     * Optional callback function when the search input field is focused.
+     */
+    onFocus?: () => void;
+    /**
+     * Callback when an option is selected. Returns the selected option object.
+     */
+    onOptionSelect?: (option: SiteOption) => void;
+    /**
+     * Optional placeholder text to display when the input field is empty.
+     */
+    placeholder?: string;
+    /**
+     * Array of sites to search through.
+     */
+    siteList?: SiteOption[];
+    /**
+     * Offset for the starting right position for the search input in rems.
+     */
+    horizontalOffset?: number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * DashboardSearch UI component
+ */
+export declare const DashboardSearch: ({ disabled, id, isLoading, label, labelStrings, loadingText, noResultsText, onFocus, onOptionSelect, placeholder, siteList, horizontalOffset, className, ...props }: DashboardSearchProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,35 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { SiteStatus } from '@libs/types/custom-types';
+export type SiteOption = {
+    /**
+     * Machine name of the site.
+     */
+    machineName?: string;
+    /**
+     * Name of the site.
+     */
+    name: string;
+    /**
+     * Site active status.
+     */
+    status?: SiteStatus;
+    /**
+     * Site type.
+     */
+    type?: 'drupal' | 'wordpress' | 'gatsby' | 'nextjs';
+};
+/** Site option display props. */
+export interface SiteOptionDisplayProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Site option to display.
+     */
+    option: SiteOption;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * UI component to display site options.
+ */
+export declare const SiteOptionDisplay: ({ option, className, ...props }: SiteOptionDisplayProps) => React.JSX.Element;

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/TabMenu/TabMenu.d.ts

@@ -0,0 +1,43 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { PDSIcon } from '@components/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;