@pantheon-systems/pds-toolkit-react 1.0.0-dev.21 → 1.0.0-dev.211

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

@@ -0,0 +1,106 @@
+import React, { ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
+import { ValidationStatus } from '../input-types';
+import './textarea.css';
+export type TranslationStringProps = {
+    clearButton: string;
+    counterOverLimit?: string;
+    searchShortcut: string;
+    visibilityStatus: string;
+    visibilityToggleHide: string;
+    visibilityToggleShow: string;
+};
+export interface TextareaProps {
+    /**
+     * Maximum character count for the character counter. Leave blank for no counter.
+     */
+    counterMaxLength?: number;
+    /**
+     * Initial value for the input field. Setting this prop automatically makes the input uncontrolled. Cannot be used in conjunction with the `value` prop.
+     */
+    defaultValue?: string;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * ID of the textarea.
+     */
+    id: string;
+    /**
+     * Should the textarea be resizable by the user?
+     */
+    isResizable?: boolean;
+    /**
+     * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Text label associated with the input field.
+     */
+    label: string;
+    /**
+     * Message or description used to help clarify the usage of the input.
+     */
+    message?: string | ReactNode;
+    /**
+     * onBlur event handler.
+     */
+    onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Function to help lift the state and retrieve the input's value.
+     * Should accept one argument, the input's value
+     */
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * onFocus event handler.
+     */
+    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Optional placeholder text to display when the input field is empty.
+     */
+    placeholder?: string;
+    /**
+     * Is the field read-only?
+     */
+    readonly?: boolean;
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Rows value to be given to the textarea type.
+     */
+    rows?: number;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Additional props for the `<textarea>` element.
+     */
+    textareaProps?: ComponentPropsWithoutRef<'textarea'>;
+    /**
+     * Translation strings for various labels or other visually-hidden text.
+     */
+    translationStrings?: TranslationStringProps;
+    /**
+     * Validation message for the textarea field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the textarea field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Value of the textarea field. Used to set the value of the textarea field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     */
+    value?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Textarea UI component
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

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,90 @@
+import React, { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';
+import { SelectOptionType, SelectOptionGroupType } from './Select/Select';
+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 | ReactNode;
+    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;
+export declare const isOptionGroup: (option: SelectOptionType | SelectOptionGroupType) => option is SelectOptionGroupType;
+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/navigation/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,23 @@
+import React, { ComponentPropsWithoutRef, ReactElement } from 'react';
+import './breadcrumb.css';
+/**
+ * Prop types for Breadcrumb
+ */
+export interface BreadcrumbProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Aria label for the breadcrumbs navigation.
+     */
+    ariaLabel?: string;
+    /**
+     * Array of breadcrumb items.
+     */
+    crumbs: ReactElement[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Breadcrumb UI component
+ */
+export declare const Breadcrumb: ({ ariaLabel, crumbs, className, ...props }: BreadcrumbProps) => React.JSX.Element;

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-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,39 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { SiteStatus, SiteType } from '@libs/types/custom-types';
+export type SiteOption = {
+    /**
+     * ID of the site.
+     */
+    id: string;
+    /**
+     * Machine name of the site.
+     */
+    machineName?: string;
+    /**
+     * Name of the site.
+     */
+    name: string;
+    /**
+     * Site active status.
+     */
+    status?: SiteStatus;
+    /**
+     * Site type.
+     */
+    type?: SiteType;
+};
+/** 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,43 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './nav-menu.css';
+/**
+ * Prop types for MenuItem
+ */
+export interface MenuItem {
+    id?: string;
+    label: string;
+    links?: MenuItem[];
+    linkContent?: React.ReactNode;
+    isActive?: boolean;
+    isSeparator?: boolean;
+}
+/**
+ * Prop types for NavMenu
+ */
+interface NavMenuProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for `nav` element.
+     */
+    ariaLabel: string;
+    /**
+     * Color scheme.
+     */
+    colorType?: 'default' | 'reverse';
+    /**
+     * Menu Items.
+     */
+    menuItems?: MenuItem[];
+    /**
+     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
+    mobileMenuMaxWidth?: number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * NavMenu UI component
+ */
+export declare const NavMenu: ({ ariaLabel, colorType, menuItems, mobileMenuMaxWidth, className, ...props }: NavMenuProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { MenuItem } from './NavMenu';
+/**
+ * Prop types for NavMenuDropdown
+ */
+interface NavMenuDropdownProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Dropdown items.
+     */
+    items?: MenuItem[];
+    /**
+     * Dropdown label.
+     */
+    label?: string;
+    /**
+     * Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
+    mobileMenuMaxWidth?: number;
+}
+/**
+ * NavMenuDropdown UI component
+ */
+export declare const NavMenuDropdown: ({ items, label, mobileMenuMaxWidth, }: NavMenuDropdownProps) => React.JSX.Element;
+export {};

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;