@pantheon-systems/pds-toolkit-react 1.0.0-dev.99 → 1.0.0-dev.9998

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

@@ -0,0 +1,104 @@
+import React, { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ValidationStatus } from '../input-types';
+import './radio-group.css';
+export interface RadioOption {
+    /**
+     * Option is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Unique ID for the option
+     * @default ''
+     */
+    id?: string;
+    /**
+     * Option label
+     */
+    label: string | ReactNode;
+    /**
+     * Option value
+     */
+    value: string;
+}
+export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Optional default value
+     */
+    defaultValue?: string;
+    /**
+     * Additional props for the `<fieldset>` element.
+     */
+    fieldsetProps?: ComponentPropsWithoutRef<'fieldset'>;
+    /**
+     * is the radio group disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Unique ID for the radio group
+     */
+    id: string;
+    /**
+     * Input width in rem
+     */
+    inputWidth?: number;
+    /**
+     * Label for the radio group
+     */
+    label: string;
+    /**
+     * Input message
+     */
+    message?: string | ReactNode;
+    /**
+     * Callback function that will return the updated value from the instance when it changes.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => 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;
+    /**
+     * Callback function that will return the updated value from the instance when it changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Array of radio options
+     */
+    options: RadioOption[];
+    /**
+     * Is the radio group required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Show the label
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * Optional tooltip text to display additional information.
+     */
+    tooltipText?: string | null;
+    /**
+     * Validation message
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Value of the radio group. Used to set the value of the field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     */
+    value?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * RadioGroup UI component
+ */
+export declare const RadioGroup: ({ defaultValue, disabled, fieldsetProps, id, inputWidth, label, message, onBlur, onChange, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, value, className, ...props }: RadioGroupProps) => React.JSX.Element;

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

@@ -0,0 +1,122 @@
+import React, { ReactNode } from 'react';
+import { ValidationStatus } from '../input-types';
+import './select.css';
+type LabelStrings = {
+    selectOptionText: string;
+    triggerButton: string;
+};
+export type SelectOptionType = {
+    /**
+     * Option label.
+     */
+    label: string;
+    /**
+     * Option value.
+     */
+    value: string;
+    /**
+     * Option disabled.
+     */
+    disabled?: boolean;
+};
+export type SelectOptionGroupType = {
+    /**
+     * Group label.
+     */
+    groupLabel: string;
+    /**
+     * Options within this group.
+     */
+    options: SelectOptionType[];
+};
+export type SelectOptionsType = (SelectOptionType | SelectOptionGroupType)[];
+interface SelectOptionGroupProps {
+    label: string;
+    children: ReactNode;
+}
+/**
+ * Prop types for Select
+ */
+export interface SelectProps {
+    /**
+     * Optional default value for the field. Must match the value of one of the options. Cannot be used in conjunction with the `value` prop.
+     */
+    defaultValue?: string;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Input ID.
+     */
+    id: string;
+    /**
+     * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Field label.
+     */
+    label: string;
+    /**
+     * Translation strings for various labels or other visually-hidden text.
+     */
+    labelStrings?: LabelStrings;
+    /**
+     * Message or description used to help clarify the usage of the input.
+     */
+    message?: string | ReactNode;
+    /**
+     * onBlur event handler to provide the current value of the input.
+     */
+    onBlur?: (currentValue: string) => void;
+    /**
+     * onFocus event handler to provide the current value of the input.
+     */
+    onFocus?: (currentValue: string) => void;
+    /**
+     * Callback function when an option is selected.
+     */
+    onOptionSelect?: (option: SelectOptionType) => void;
+    /**
+     * Array of options for the select field.
+     */
+    options?: SelectOptionsType;
+    /**
+     * Is this field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Optional tooltip text to display additional information.
+     */
+    tooltipText?: string | null;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Value of the field. Must match the value of one of the options. Used to set the value of the field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     */
+    value?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SelectOptionGroup component
+ */
+export declare const SelectOptionGroup: ({ label, children, }: SelectOptionGroupProps) => React.JSX.Element;
+/**
+ * Select UI component
+ */
+export declare const Select: ({ defaultValue, disabled, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, tooltipText, validationMessage, validationStatus, value, className, ...props }: SelectProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,74 @@
+import React, { ChangeEvent, ComponentPropsWithoutRef, ReactNode } 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 | ReactNode;
+    /**
+     * 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,139 @@
+import React, { ComponentPropsWithoutRef, ChangeEvent, FocusEvent, ReactNode } 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;
+    /**
+     * Show a fixed "https://" prefix for URL inputs. Only valid if the input type is "url".
+     */
+    hasUrlPrefix?: 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 | ReactNode;
+    /**
+     * 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;
+    /**
+     * Icon to use when type is search.
+     */
+    searchIcon?: 'search' | 'filter';
+    /**
+     * 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;
+    /**
+     * Optional tooltip text to display additional information.
+     */
+    tooltipText?: string | null;
+    /**
+     * 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,110 @@
+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'>;
+    /**
+     * Optional tooltip text to display additional information.
+     */
+    tooltipText?: string | null;
+    /**
+     * 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,96 @@
+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 stripUrlProtocol: (value: string) => 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: ({ forInputGroup, id, message, hasValidationMessage, validationMessageHasDecorators, validationStatus, className, }: {
+    forInputGroup?: boolean;
+    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 {};