@pantheon-systems/pds-toolkit-react 1.0.0-dev.23 → 1.0.0-dev.230

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

@@ -0,0 +1,94 @@
+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;
+    /**
+     * Optional tooltip text to display additional information.
+     */
+    tooltipText?: string;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+export declare const InputLabel: ({ id, label, showLabel, required, disabled, isLegend, isPseudoLabel, tooltipText, 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' | 'filter';
+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;

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;