@pantheon-systems/pds-toolkit-react 1.0.0-dev.16 → 1.0.0-dev.161

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

@@ -0,0 +1,92 @@
+import React, { ComponentPropsWithoutRef, ChangeEvent, FocusEvent } from 'react';
+import { ValidationStatus } from '../input-types';
+import './checkbox.css';
+/**
+ * Prop types for Checkbox
+ */
+export interface CheckboxProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Checked state of the input. Used to set the checked status of the input field when controlled. Cannot be used in conjunction with the `defaultChecked` prop.
+     */
+    checked?: boolean;
+    /**
+     * Default checked state. Setting this prop automatically makes the input uncontrolled. Cannot be used with the checked prop.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the checkbox.
+     */
+    id: string;
+    /**
+     * Indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * 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;
+    /**
+     * Name attribute of the checkbox.
+     */
+    name?: string;
+    /**
+     * Indent level of the checkbox. Visual styles for creating nested checkboxes. Styles are only applied when the checkbox is an ancestor of a div with the class `pds-checkbox-group`.
+     */
+    nestingLevel?: 0 | 1 | 2;
+    /**
+     * onBlur event handler
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * onChange event handler
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * onFocus event handler
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Value attribute of the checkbox.
+     */
+    value?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Checkbox UI component
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,60 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { ValidationStatus } from '../input-types';
+import '../CheckboxGroup/checkbox-group.css';
+/**
+ * Prop types for CheckboxFieldset
+ */
+export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Individual checkboxes to be rendered within the group.
+     */
+    children: React.ReactNode;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Additional props for the `<fieldset>` element.
+     */
+    fieldsetProps?: ComponentPropsWithoutRef<'fieldset'>;
+    /**
+     * The ID of the checkbox group.
+     */
+    id: string;
+    /**
+     * Width of the field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Field label. Will be rendered as the fieldset legend.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the field.
+     */
+    message?: string;
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label (legend) be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CheckboxFieldset UI component
+ */
+export declare const CheckboxFieldset: ({ children, disabled, fieldsetProps, id, inputWidth, label, message, required, showLabel, validationMessage, validationStatus, className, ...props }: CheckboxGroupWrapperProps) => React.JSX.Element;

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

@@ -0,0 +1,76 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { ValidationStatus } from '../input-types';
+import './checkbox-group.css';
+export type CheckboxOption = {
+    checked?: boolean;
+    disabled?: boolean;
+    id?: string;
+    label: string;
+    name?: string;
+    value: string;
+};
+/**
+ * Prop types for CheckboxGroup
+ */
+export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Additional props for the `<fieldset>` element.
+     */
+    fieldsetProps?: ComponentPropsWithoutRef<'fieldset'>;
+    /**
+     * The ID of the checkbox group.
+     */
+    id: string;
+    /**
+     * Width of the field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Field label. Will be rendered as the fieldset legend.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the field.
+     */
+    message?: string;
+    /**
+     * onGroupBlur function. Called when all checkboxes have lost focus. Provides an array of checked values.
+     */
+    onGroupBlur?: (checkedOptions: string[]) => void;
+    /**
+     * onValueChange function. Called when the value of any checkbox changes. Provides an array of checked values.
+     */
+    onValueChange?: (updatedOptions: string[]) => void;
+    /**
+     * Array of checkbox options for group.
+     */
+    options: CheckboxOption[];
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label (legend) be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CheckboxGroup UI component
+ */
+export declare const CheckboxGroup: ({ disabled, fieldsetProps, id, inputWidth, label, message, onGroupBlur, onValueChange, options, required, showLabel, validationMessage, validationStatus, className, ...props }: CheckboxGroupProps) => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+/**
+ * Combobox UI component
+ */
+export const Combobox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

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

@@ -0,0 +1,37 @@
+export function FileUpload({ accept, chooseFileLabel, clearButtonLabel, disabled, fieldLabel, id, inputWidth, message, multiple, onFileChange, required, showLabel, validationFunction, className, ...props }: {
+    [x: string]: any;
+    accept: any;
+    chooseFileLabel?: string;
+    clearButtonLabel?: string;
+    disabled?: boolean;
+    fieldLabel: any;
+    id: any;
+    inputWidth: any;
+    message: any;
+    multiple?: boolean;
+    onFileChange: any;
+    required?: boolean;
+    showLabel?: boolean;
+    validationFunction: any;
+    className: any;
+}): React.JSX.Element;
+export namespace FileUpload {
+    namespace propTypes {
+        let accept: PropTypes.Requireable<string>;
+        let chooseFileLabel: PropTypes.Requireable<string>;
+        let clearButtonLabel: PropTypes.Requireable<string>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let fieldLabel: PropTypes.Requireable<string>;
+        let id: PropTypes.Validator<string>;
+        let inputWidth: PropTypes.Requireable<number>;
+        let message: PropTypes.Requireable<string>;
+        let multiple: PropTypes.Requireable<boolean>;
+        let onFileChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let required: PropTypes.Requireable<boolean>;
+        let showLabel: PropTypes.Requireable<boolean>;
+        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/InputFormatted/InputFormatted.d.ts

@@ -0,0 +1,35 @@
+export function InputFormatted({ disabled, formatting, hasClearButton, id, initialValue, label, message, onChange, placeholder, required, showLabel, validationFunction, className, ...props }: {
+    [x: string]: any;
+    disabled?: boolean;
+    formatting: any;
+    hasClearButton?: boolean;
+    id: any;
+    initialValue?: string;
+    label: any;
+    message: any;
+    onChange: any;
+    placeholder: any;
+    required?: boolean;
+    showLabel?: boolean;
+    validationFunction: any;
+    className: any;
+}): React.JSX.Element;
+export namespace InputFormatted {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let formatting: PropTypes.Validator<string>;
+        let id: PropTypes.Validator<string>;
+        let hasClearButton: PropTypes.Requireable<boolean>;
+        let initialValue: PropTypes.Requireable<string>;
+        let label: PropTypes.Validator<string>;
+        let message: PropTypes.Requireable<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let placeholder: PropTypes.Requireable<string>;
+        let required: PropTypes.Requireable<boolean>;
+        let showLabel: PropTypes.Requireable<boolean>;
+        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/InputGroup/InputGroup.d.ts

@@ -0,0 +1,19 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './input-group.css';
+/**
+ * Prop types for InputGroup
+ */
+export interface InputGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Input and button elements
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * InputGroup UI component
+ */
+export declare const InputGroup: ({ children, className, ...props }: InputGroupProps) => React.JSX.Element;

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

@@ -0,0 +1,33 @@
+export function InputObscured({ counterFunction, disabled, hasClearButton, id, initialValue, label, message, onChange, required, showLabel, validationFunction, className, ...props }: {
+    [x: string]: any;
+    counterFunction?: () => void;
+    disabled?: boolean;
+    hasClearButton?: boolean;
+    id: any;
+    initialValue?: string;
+    label: any;
+    message: any;
+    onChange: any;
+    required?: boolean;
+    showLabel?: boolean;
+    validationFunction: any;
+    className: any;
+}): React.JSX.Element;
+export namespace InputObscured {
+    namespace propTypes {
+        let counterFunction: PropTypes.Requireable<(...args: any[]) => any>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let hasClearButton: PropTypes.Requireable<boolean>;
+        let id: PropTypes.Validator<string>;
+        let initialValue: PropTypes.Requireable<string>;
+        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 validationFunction: PropTypes.Requireable<(...args: any[]) => any>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,75 @@
+export function InputText({ autoComplete, counterFunction, disabled, hasClearButton, hasSearchShortcut, id, initialValue, inputWidth, label, labelStrings, message, onChange, onFocus, placeholder, readonly, required, showLabel, specialFormatting, specialFormattingValidation, toggleVisibility, type, validationFunction, validationMessages, className, ...props }: {
+    [x: string]: any;
+    autoComplete?: string;
+    counterFunction?: () => void;
+    disabled?: boolean;
+    hasClearButton?: boolean;
+    hasSearchShortcut?: boolean;
+    id: any;
+    initialValue?: string;
+    inputWidth: any;
+    label: any;
+    labelStrings?: {
+        clearButton: string;
+        searchShortcut: string;
+        visibilityStatus: string;
+        visibilityToggleHide: string;
+        visibilityToggleShow: string;
+    };
+    message: any;
+    onChange: any;
+    onFocus: any;
+    placeholder: any;
+    readonly?: boolean;
+    required?: boolean;
+    showLabel?: boolean;
+    specialFormatting: any;
+    specialFormattingValidation?: boolean;
+    toggleVisibility?: boolean;
+    type?: string;
+    validationFunction: any;
+    validationMessages?: {
+        creditCardError: string;
+        phoneError: string;
+    };
+    className: any;
+}): React.JSX.Element;
+export namespace InputText {
+    namespace propTypes {
+        let autoComplete: PropTypes.Requireable<string>;
+        let counterFunction: PropTypes.Requireable<(...args: any[]) => any>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let hasClearButton: PropTypes.Requireable<boolean>;
+        let hasSearchShortcut: PropTypes.Requireable<boolean>;
+        let id: PropTypes.Validator<string>;
+        let initialValue: PropTypes.Requireable<string>;
+        let inputWidth: PropTypes.Requireable<number>;
+        let label: PropTypes.Validator<string>;
+        let labelStrings: PropTypes.Requireable<PropTypes.InferProps<{
+            clearButton: PropTypes.Requireable<string>;
+            searchShortcut: PropTypes.Requireable<string>;
+            visibilityStatus: PropTypes.Requireable<string>;
+            visibilityToggleHide: PropTypes.Requireable<string>;
+            visibilityToggleShow: PropTypes.Requireable<string>;
+        }>>;
+        let message: PropTypes.Requireable<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        let placeholder: PropTypes.Requireable<string>;
+        let readonly: PropTypes.Requireable<boolean>;
+        let required: PropTypes.Requireable<boolean>;
+        let showLabel: PropTypes.Requireable<boolean>;
+        let specialFormatting: PropTypes.Requireable<string>;
+        let specialFormattingValidation: PropTypes.Requireable<boolean>;
+        let toggleVisibility: PropTypes.Requireable<boolean>;
+        let type: PropTypes.Requireable<string>;
+        let validationFunction: PropTypes.Requireable<(...args: any[]) => any>;
+        let validationMessages: PropTypes.Requireable<PropTypes.InferProps<{
+            creditCardError: PropTypes.Requireable<string>;
+            phoneError: PropTypes.Requireable<string>;
+        }>>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,5 @@
+/**
+ * InputWrapper UI component
+ */
+export const InputWrapper: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

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

@@ -0,0 +1,46 @@
+export function RadioGroup({ disabled, id, initialSelection, inputWidth, label, message, onChange, options, required, className, ...props }: {
+    [x: string]: any;
+    disabled?: boolean;
+    id: any;
+    initialSelection: any;
+    inputWidth: any;
+    label: any;
+    message: any;
+    onChange: any;
+    options: any;
+    required?: boolean;
+    className: any;
+}): React.JSX.Element;
+export namespace RadioGroup {
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let id: PropTypes.Validator<string>;
+        let initialSelection: PropTypes.Requireable<string>;
+        let inputWidth: PropTypes.Requireable<number>;
+        let label: PropTypes.Validator<string>;
+        let message: PropTypes.Requireable<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let options: PropTypes.Requireable<PropTypes.InferProps<{
+            /**
+             * Is the option disabled?
+             */
+            disabled: PropTypes.Requireable<boolean>;
+            /**
+             * Option unique ID
+             */
+            id: PropTypes.Requireable<string>;
+            /**
+             * Option label
+             */
+            label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+            /**
+             * Option value
+             */
+            value: PropTypes.Requireable<string>;
+        }>[]>;
+        let required: PropTypes.Requireable<boolean>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,45 @@
+export function Select({ disabled, id, initialValue, inputWidth, label, message, onOptionSelect, options, required, selectOptionsLabel, showLabel, validationFunction, className, ...props }: {
+    [x: string]: any;
+    disabled?: boolean;
+    id: any;
+    initialValue: any;
+    inputWidth: any;
+    label: any;
+    message: any;
+    onOptionSelect: any;
+    options: any;
+    required?: boolean;
+    selectOptionsLabel?: string;
+    showLabel?: boolean;
+    validationFunction: any;
+    className: any;
+}): React.JSX.Element;
+export namespace Select {
+    let displayName: string;
+    namespace propTypes {
+        let disabled: PropTypes.Requireable<boolean>;
+        let id: PropTypes.Validator<string>;
+        let initialValue: PropTypes.Requireable<string>;
+        let inputWidth: PropTypes.Requireable<number>;
+        let label: PropTypes.Validator<string>;
+        let message: PropTypes.Requireable<string>;
+        let onOptionSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        let options: PropTypes.Validator<PropTypes.InferProps<{
+            /**
+             * Option label.
+             */
+            label: PropTypes.Validator<string>;
+            /**
+             * Option value. Will default to label if not provided.
+             */
+            value: PropTypes.Requireable<string>;
+        }>[]>;
+        let required: PropTypes.Requireable<boolean>;
+        let selectOptionsLabel: PropTypes.Requireable<string>;
+        let showLabel: PropTypes.Requireable<boolean>;
+        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/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 {};