@pantheon-systems/pds-toolkit-react 1.0.0-dev.17 → 1.0.0-dev.170

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

@@ -0,0 +1,74 @@
+import React, { ChangeEvent, ComponentPropsWithoutRef } from 'react';
+import './switch.css';
+type SwitchPlacement = 'right' | 'below';
+/**
+ * Prop types for Switch
+ */
+export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Is the field checked?
+     */
+    checked?: boolean;
+    /**
+     * Initial value for the input field. Only valid if the input is uncontrolled. Cannot be used in conjunction with the `checked` prop.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Input ID.
+     */
+    id: string;
+    /**
+     * Additional props for the `<input>` element.
+     */
+    inputProps?: ComponentPropsWithoutRef<'input'>;
+    /**
+     * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Label of the switch field.
+     */
+    label: string;
+    /**
+     * Message or description used to help clarify the usage of the input.
+     */
+    message?: string;
+    /**
+     * Status text for when switch is off.
+     */
+    offLabel?: string;
+    /**
+     * onChange event handler. Controlled inputs should use this to manage the input value. Uncontrolled inputs will manage their own state, but may still use this to access the event object.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Status text for when switch is on.
+     */
+    onLabel?: string;
+    /**
+     * Is this field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Show toggle status label next to switch. If false, icons will render and the text will still be available to screen readers.
+     */
+    showStatusLabel?: boolean;
+    /**
+     * Determines switch placement, default set to `right`.
+     */
+    switchPlacement?: SwitchPlacement;
+    /**
+     * Additional class names for input.
+     */
+    className?: string;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,127 @@
+import React, { ComponentPropsWithoutRef, ChangeEvent, FocusEvent } from 'react';
+import { ValidationStatus } from '../input-types';
+import './text-input.css';
+type TranslationStringProps = {
+    clearButton: string;
+    counterOverLimit?: string;
+    searchShortcut: string;
+    visibilityStatus: string;
+    visibilityToggleHide: string;
+    visibilityToggleShow: string;
+};
+type HtmlInputTypes = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
+/**
+ * Prop types for TextInput
+ */
+export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Auto complete attribute for the input field. The attribute value is either the keyword `off` or `on`, or an ordered list of space-separated tokens. Password fields are automatically off.
+     */
+    autoComplete?: string;
+    /**
+     * Maximum character count for the character counter. Leave blank for no counter. Not valid for type `password`.
+     */
+    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;
+    /**
+     * Does the input contain a clear button?
+     */
+    hasClearButton?: boolean;
+    /**
+     * Does the input contain the search shortcut?
+     * Only valid if the input type is `search`.
+     */
+    hasSearchShortcut?: boolean;
+    /**
+     * Input ID.
+     */
+    id: string;
+    /**
+     * Additional props for the `<input>` element.
+     */
+    inputProps?: ComponentPropsWithoutRef<'input'>;
+    /**
+     * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Input label.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the input field.
+     */
+    message?: string;
+    /**
+     * onBlur event handler.
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * onChange event handler. Controlled inputs should use this to manage the input value. Uncontrolled inputs will manage their own state, but may still use this to access the event object.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Function to clear the input field. Only necessary if the input is controlled. This functionality is built-in for uncontrolled inputs.
+     */
+    onClear?: () => void;
+    /**
+     * onFocus event handler.
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Optional placeholder text to display when the input field is empty.
+     */
+    placeholder?: string;
+    /**
+     * Is the field read-only?
+     */
+    readonly?: boolean;
+    /**
+     * Is this field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Show Toggle visibility control for input. Valid for type `password` only.
+     */
+    showVisibilityToggle?: boolean;
+    /**
+     * Translation strings for various labels or other visually-hidden text.
+     */
+    translationStrings?: TranslationStringProps;
+    /**
+     * Type of input field to use.
+     */
+    type: HtmlInputTypes;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Value of the input field. Used to set the value of the input field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     */
+    value?: string;
+    /**
+     * Additional class names for input.
+     */
+    className?: string;
+}
+/**
+ * TextInput UI component
+ */
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,39 @@
+export function Textarea({ counterFunction, disabled, id, initialValue, inputWidth, isResizable, label, message, onChange, placeholder, readonly, required, rows, validationFunction, className, ...props }: {
+    [x: string]: any;
+    counterFunction?: () => void;
+    disabled?: boolean;
+    id: any;
+    initialValue?: string;
+    inputWidth: any;
+    isResizable?: boolean;
+    label: any;
+    message: any;
+    onChange: any;
+    placeholder: any;
+    readonly?: boolean;
+    required?: boolean;
+    rows?: number;
+    validationFunction: any;
+    className: any;
+}): React.JSX.Element;
+export namespace Textarea {
+    namespace propTypes {
+        let counterFunction: PropTypes.Requireable<(...args: any[]) => any>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let id: PropTypes.Validator<string>;
+        let initialValue: PropTypes.Requireable<string>;
+        let isResizable: PropTypes.Requireable<boolean>;
+        let inputWidth: PropTypes.Requireable<number>;
+        let label: PropTypes.Validator<string>;
+        let message: PropTypes.Requireable<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let placeholder: PropTypes.Requireable<string>;
+        let readonly: PropTypes.Requireable<boolean>;
+        let required: PropTypes.Requireable<boolean>;
+        let rows: PropTypes.Requireable<number>;
+        let validationFunction: PropTypes.Requireable<(...args: any[]) => any>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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,61 @@
+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;
+export declare const InputLabel: ({ id, label, showLabel, required, disabled, isLegend, className, }: {
+    id: string;
+    label: string;
+    showLabel: boolean;
+    required: boolean;
+    disabled: boolean;
+    isLegend?: boolean;
+    className?: string;
+}) => 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/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, }: DashboardNavItem) => 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,69 @@
+export function DashboardSearch({ disabled, id, isLoading, label, labelStrings, loadingText, noResultsText, onFocus, onOptionSelect, placeholder, siteList, startingRightPosition, 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;
+    startingRightPosition?: 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 startingRightPosition: 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,33 @@
+export function Navbar({ children, colorType, containerWidth, hideBorder, hideLogo, logoDisplay, logoLink, logoSrc, logoSubBrand, className, ...props }: {
+    [x: string]: any;
+    children: any;
+    colorType?: string;
+    containerWidth?: string;
+    hideBorder: any;
+    hideLogo?: boolean;
+    logoDisplay?: string;
+    logoLink?: React.JSX.Element;
+    logoSrc: any;
+    logoSubBrand: any;
+    className: any;
+}): React.JSX.Element;
+export namespace Navbar {
+    namespace propTypes {
+        export let colorType: PropTypes.Requireable<string>;
+        export let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export { ContainerWidth as containerWidth };
+        export let hideBorder: PropTypes.Requireable<boolean>;
+        export let hideLogo: PropTypes.Requireable<boolean>;
+        export let logoDisplay: PropTypes.Requireable<string>;
+        export let logoLink: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export let logoSrc: PropTypes.Requireable<string>;
+        export let logoSubBrand: PropTypes.Requireable<PropTypes.InferProps<{
+            linkContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            text: PropTypes.Requireable<string>;
+        }>>;
+        export let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ContainerWidth } from '@libs/components/customPropTypes';

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;