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

package/_dist/components/icons/PaymentIcon/PaymentIcon.d.ts

@@ -0,0 +1,21 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './payment-icon.css';
+type PaymentType = 'visa' | 'mastercard' | 'amex' | 'discover' | 'generic';
+/**
+ * Prop types for PaymentIcon
+ */
+export interface PaymentIconProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The type of payment icon to display.
+     */
+    paymentType: PaymentType;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * PaymentIcon UI component
+ */
+export declare const PaymentIcon: ({ paymentType, className, ...props }: PaymentIconProps) => React.JSX.Element;
+export {};

package/_dist/components/icons/PaymentIcon/svgData.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const svgData: {
+    amex: React.JSX.Element;
+    discover: React.JSX.Element;
+    generic: React.JSX.Element;
+    mastercard: React.JSX.Element;
+    visa: React.JSX.Element;
+};

package/_dist/components/icons/PlatformIcon/PlatformIcon.d.ts

@@ -0,0 +1,12 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './platform-icon.css';
+type PlatformType = 'drupal' | 'drupal7' | 'front-end-sites' | 'gatsby' | 'gatsby-wp' | 'import-custom' | 'next' | 'next-drupal' | 'next-wp' | 'wordpress';
+interface PlatformIconProps extends ComponentPropsWithoutRef<'div'> {
+    platformType: PlatformType;
+    className?: string;
+}
+/**
+ * PlatformIcon UI component
+ */
+export declare const PlatformIcon: ({ platformType, className, ...props }: PlatformIconProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,96 @@
+import React, { ComponentPropsWithoutRef, ChangeEvent, FocusEvent, ReactNode } 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 | ReactNode;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the input field.
+     */
+    message?: string | ReactNode;
+    /**
+     * 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;
+    /**
+     * Size of the label and checkbox. Defaults to 'M'.
+     */
+    size?: 'S' | 'M';
+    /**
+     * 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,64 @@
+import React, { ComponentPropsWithoutRef, ReactNode } 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 | ReactNode;
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label (legend) 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;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CheckboxFieldset UI component
+ */
+export declare const CheckboxFieldset: ({ children, disabled, fieldsetProps, id, inputWidth, label, message, required, showLabel, tooltipText, validationMessage, validationStatus, className, ...props }: CheckboxGroupWrapperProps) => React.JSX.Element;

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

@@ -0,0 +1,80 @@
+import React, { ComponentPropsWithoutRef, ReactNode } 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 | ReactNode;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CheckboxGroup UI component
+ */
+export declare const CheckboxGroup: ({ disabled, fieldsetProps, id, inputWidth, label, message, onGroupBlur, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, className, ...props }: CheckboxGroupProps) => React.JSX.Element;

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

@@ -0,0 +1,138 @@
+import React, { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
+import { ValidationStatus } from '../input-types';
+import './combobox.css';
+type LabelStrings = {
+    clearButton?: string;
+    inputInstructions?: string;
+    searchShortcut?: string;
+    triggerButton?: string;
+};
+export type ComboboxOption = {
+    label: string;
+    optionDisplay?: ReactNode;
+    searchIndex?: string[];
+    value: string;
+    [otherOptions: string]: unknown;
+};
+/**
+ * Prop types for Combobox
+ */
+export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Optional default value for the field.
+     */
+    defaultValue?: string;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Should the combobox have a clear button?
+     */
+    hasClearButton?: boolean;
+    /**
+     * Should the combobox have a dropdown trigger?
+     */
+    hasDropdownTrigger?: boolean;
+    /**
+     * Should the combobox have a search icon?
+     */
+    hasSearchIcon?: boolean;
+    /**
+     * Should the combobox have a search shortcut?
+     */
+    hasSearchShortcut?: boolean;
+    /**
+     * ID of the combobox
+     */
+    id: string;
+    /**
+     * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Are the options in the process of being loaded?
+     */
+    isLoading?: boolean;
+    /**
+     * Text to display when options are still loading.
+     */
+    loadingText?: string;
+    /**
+     * 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;
+    /**
+     * Text to display when there are no results.
+     */
+    noResultsText?: string;
+    /**
+     * onChange event handler.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * onBlur event handler.
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback when the input is cleared.
+     */
+    onClear?: () => void;
+    /**
+     * onFocus event handler.
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback when an option is selected. Returns the selected option object.
+     */
+    onOptionSelect?: (option: ComboboxOption) => void;
+    /**
+     * Array of options to display in the dropdown.
+     */
+    options?: ComboboxOption[];
+    /**
+     * Optional placeholder text to display when the input field is empty.
+     */
+    placeholder?: string;
+    /**
+     * 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;
+    /**
+     * Value attribute of input
+     */
+    value?: string;
+    /**
+     * 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;
+}
+/**
+ * Combobox UI component
+ */
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

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

@@ -0,0 +1,83 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './combobox-multiselect.css';
+type LabelStrings = {
+    inputInstructions?: string;
+    triggerButton?: string;
+};
+interface OptionProps {
+    id: string;
+    label: string;
+    isAlreadySelected?: boolean;
+}
+type DivProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
+/**
+ * Prop types for ComboboxMultiselect
+ */
+export interface ComboboxMultiselectProps extends DivProps {
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * ID of the combobox multiselect
+     */
+    id: string;
+    /**
+     * Initially selected options
+     */
+    initialSelectedItems?: OptionProps[];
+    /**
+     * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Are the options in the process of being loaded?
+     */
+    isLoading?: boolean;
+    /**
+     * Text to display when options are still loading.
+     */
+    loadingText?: string;
+    /**
+     * Label for the combobox multiselect
+     */
+    label?: string;
+    /**
+     * Translation strings for various labels or other visually-hidden text.
+     */
+    labelStrings?: LabelStrings;
+    /**
+     * Text to display when there are no results.
+     */
+    noResultsText?: string;
+    /**
+     * Callback function to run when the selected items change
+     */
+    onChange?: (selectedItems: OptionProps[]) => void;
+    /**
+     * Array of all available options to select from
+     */
+    options?: OptionProps[];
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Is this field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+export declare const getFilteredOptions: (options: OptionProps[], selectedItems: OptionProps[], inputValue: string) => OptionProps[];
+/**
+ * ComboboxMultiselect UI component
+ */
+export declare const ComboboxMultiselect: ({ disabled, id, initialSelectedItems, inputWidth, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showLabel, className, ...props }: ComboboxMultiselectProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,93 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ValidationStatus } from '../input-types';
+import './file-upload.css';
+type LabelStrings = {
+    chooseFile: string;
+    clearButton: string;
+};
+/**
+ * Prop types for FileUpload
+ */
+export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * File types the input should accept. Leave null for all file types.
+     */
+    accept?: string;
+    /**
+     * Default value for the input field as a string that represents the path to a file.
+     */
+    defaultValue?: string;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Label to be rendered above the input field. Describes the fields purpose. Optional.
+     */
+    fieldLabel?: string;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Should the input accept multiple files?
+     */
+    multiple?: boolean;
+    /**
+     * Callback function that will run when the clear button is clicked.
+     */
+    onClear?: () => void;
+    /**
+     * Callback function that will run when the file input changes.
+     */
+    onFileChange?: (files: FileList) => void;
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Should the full path of the file be displayed for the default value?
+     */
+    showFullPath?: 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;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * FileUpload UI component
+ */
+export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

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