@pantheon-systems/pds-toolkit-react 1.0.0-dev.180 → 1.0.0-dev.182

package/_dist/components/Tabs/Tabs.d.ts

@@ -3,25 +3,32 @@ import { PDSIcon } from '@components/Icon/Icon';
 import './tabs.css';
 interface Tabs {
     /**
-     * Sets if tab disabled (optional)
+     * Is the tab disabled?
      */
     disabled?: boolean;
     /**
-     * Adds tab icon (optional)
+     * Sets optional tab icon.
      */
     icon?: PDSIcon;
+    /**
+     * Sets content inside tab
+     */
+    panelContent: ReactNode;
     /**
      * Sets tab label
      */
-    tabLabel: string;
+    tabLabel: string | ReactNode;
     /**
-     * Sets id for tab (optional)
+     * Sets id for tab.
      */
     tabId?: string;
     /**
-     * Sets content inside tab
+     * Sets optional tab tally.
      */
-    panelContent: ReactNode;
+    tally?: {
+        label: string | number;
+        type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
+    };
 }
 interface TabsProps extends ComponentPropsWithoutRef<'div'> {
     /**
@@ -40,10 +47,6 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
      * Sets currently selected tab using a zero-based index
      */
     selectedTab?: number;
-    /**
-     * Sets size of tab
-     */
-    size?: 'sm' | 'md';
     /**
      * Array of objects for tab data
      */
@@ -56,5 +59,5 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Tabs UI component
  */
-export declare const Tabs: ({ onActiveTabChange, ariaLabel, defaultSelected, selectedTab, size, tabs, className, ...props }: TabsProps) => React.JSX.Element;
+export declare const Tabs: ({ ariaLabel, defaultSelected, onActiveTabChange, selectedTab, tabs, className, ...props }: TabsProps) => React.JSX.Element;
 export {};

package/_dist/components/buttons/SegmentedButton/SegmentedButton.d.ts

@@ -18,15 +18,15 @@ interface OptionType {
  */
 export interface SegmentedButtonProps {
     /**
-     * Is the ToggleButton disabled?
+     * Is the SegmentedButton disabled?
      */
     disabled?: boolean;
     /**
-     * Unique ID for the ToggleButton
+     * Unique ID for the SegmentedButton.
      */
     id: string;
     /**
-     * Optional initial selected option value
+     * Optional initial selected option value.
      */
     initialSelection?: string;
     /**
@@ -35,7 +35,6 @@ export interface SegmentedButtonProps {
     label: string;
     /**
      * Callback function that will return the updated value from the instance when it changes.
-     * Function should have the shape of: `(value) => { <do stuff here> } `.
      */
     onChange?: (value: string) => void;
     /**

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

@@ -1,37 +1,77 @@
-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;
+import React, { ComponentPropsWithoutRef } 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;
+    /**
+     * Is the field disabled?
+     */
     disabled?: boolean;
-    fieldLabel: any;
-    id: any;
-    inputWidth: any;
-    message: any;
+    /**
+     * Label to be rendered above the input field. Describes the fields purpose. Optional.
+     */
+    fieldLabel?: string;
+    /**
+     * Input ID.
+     */
+    id: string;
+    /**
+     * 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;
+    /**
+     * Should the input accept multiple files?
+     */
     multiple?: boolean;
-    onFileChange: any;
+    /**
+     * 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 label be visible? If false, it will render for screen readers only.
+     */
     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>;
-    }
+    /**
+     * 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;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * FileUpload UI component
+ */
+export declare const FileUpload: ({ accept, disabled, fieldLabel, id, inputWidth, labelStrings, message, multiple, onClear, onFileChange, required, showLabel, validationMessage, validationStatus, className, ...props }: FileUploadProps) => React.JSX.Element;
+export {};

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

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, FocusEvent } from 'react';
+import React from 'react';
 import { ValidationStatus } from '../input-types';
 import './select.css';
 type LabelStrings = {
@@ -22,9 +22,9 @@ export type SelectOptionType = {
 /**
  * Prop types for Select
  */
-export interface SelectProps extends ComponentPropsWithoutRef<'div'> {
+export interface SelectProps {
     /**
-     * Optional default value for the field. Must match the value of one of the options.
+     * 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;
     /**
@@ -52,13 +52,13 @@ export interface SelectProps extends ComponentPropsWithoutRef<'div'> {
      */
     message?: string;
     /**
-     * onBlur event handler.
+     * onBlur event handler to provide the current value of the input.
      */
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (currentValue: string) => void;
     /**
-     * onFocus event handler.
+     * onFocus event handler to provide the current value of the input.
      */
-    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (currentValue: string) => void;
     /**
      * Callback function when an option is selected.
      */
@@ -83,6 +83,10 @@ export interface SelectProps extends ComponentPropsWithoutRef<'div'> {
      * 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
      */
@@ -91,5 +95,5 @@ export interface SelectProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Select UI component
  */
-export declare const Select: ({ defaultValue, disabled, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, validationMessage, validationStatus, className, ...props }: SelectProps) => React.JSX.Element;
+export declare const Select: ({ defaultValue, disabled, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, validationMessage, validationStatus, value, className, ...props }: SelectProps) => React.JSX.Element;
 export {};

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

@@ -12,15 +12,42 @@ 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, }: {
+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;
+    /**
+     * Additional class names.
+     */
     className?: string;
-}) => React.JSX.Element;
+}
+export declare const InputLabel: ({ id, label, showLabel, required, disabled, isLegend, isPseudoLabel, className, }: InputLabelProps) => React.JSX.Element;
 export declare const InputMessage: ({ id, message, hasValidationMessage, validationMessageHasDecorators, validationStatus, className, }: {
     id: string;
     message: string;

package/_dist/components/tiles/Tile/Tile.d.ts

@@ -1,23 +1,42 @@
-export function Tile({ displayType, headingLevel, headingText, imageSrc, linkContent, summary, className, ...props }: {
-    [x: string]: any;
-    displayType?: string;
-    headingLevel?: string;
-    headingText: any;
-    imageSrc: any;
-    linkContent: any;
-    summary: any;
-    className: any;
-}): React.JSX.Element;
-export namespace Tile {
-    namespace propTypes {
-        let displayType: PropTypes.Requireable<string>;
-        let headingLevel: PropTypes.Requireable<string>;
-        let headingText: PropTypes.Requireable<string>;
-        let imageSrc: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let linkContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let summary: PropTypes.Requireable<string>;
-        let className: PropTypes.Requireable<string>;
-    }
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { HeadingLevel } from '@libs/types/custom-types';
+import './../tiles-common.css';
+import './tile.css';
+export type TileDisplayType = 'border' | 'clean' | 'clean-static';
+/**
+ * Prop types for Tile
+ */
+export interface TileProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Display type.
+     */
+    displayType?: TileDisplayType;
+    /**
+     *  Heading level or `span`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Heading text.
+     */
+    headingText?: string;
+    /**
+     * Image source.
+     */
+    imageSrc?: string;
+    /**
+     * A link element using the router of your choice.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Summary paragraph.
+     */
+    summary?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * Tile UI component
+ */
+export declare const Tile: ({ displayType, headingLevel, headingText, imageSrc, linkContent, summary, className, ...props }: TileProps) => React.JSX.Element;

package/_dist/components/tiles/TileGrid/TileGrid.d.ts

@@ -1,38 +1,29 @@
-export function TileGrid({ displayType, headingLevel, tiles, className, ...props }: {
-    [x: string]: any;
-    displayType?: string;
-    headingLevel?: string;
-    tiles: any;
-    className: any;
-}): React.JSX.Element;
-export namespace TileGrid {
-    namespace propTypes {
-        let displayType: PropTypes.Requireable<string>;
-        let headingLevel: PropTypes.Requireable<string>;
-        let tiles: PropTypes.Requireable<PropTypes.InferProps<{
-            /**
-             * Tile heading
-             */
-            headingText: PropTypes.Requireable<string>;
-            /**
-             * Tile image source.
-             */
-            imageSrc: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            /**
-             * A link element using the router of your choice.
-             */
-            linkContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            /**
-             * Summary paragraph.
-             */
-            summary: PropTypes.Requireable<string>;
-            /**
-             * Additional class names.
-             */
-            className: PropTypes.Requireable<string>;
-        }>[]>;
-        let className: PropTypes.Requireable<string>;
-    }
+import React, { ComponentPropsWithoutRef } from 'react';
+import { TileDisplayType, TileProps } from '@components/tiles/Tile/Tile';
+import { HeadingLevel } from '@libs/types/custom-types';
+import './../tiles-common.css';
+/**
+ * Prop types for TileGrid
+ */
+export interface TileGridProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Display type.
+     */
+    displayType?: TileDisplayType;
+    /**
+     *  Heading level or `span`. All tiles in the grid will use this heading level.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Array of Tiles.
+     */
+    tiles: TileProps[];
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * TileGrid UI component
+ */
+export declare const TileGrid: ({ displayType, headingLevel, tiles, className, ...props }: TileGridProps) => React.JSX.Element;

package/_dist/css/component-css/pds-file-upload.css

@@ -1,5 +1,7 @@
-.pds-input-field--file-upload{align-items:center;border:.0625rem solid var(--pds-color-input-border-default);border-radius:.1875rem;display:flex;gap:.41rem;height:2.441rem;padding-inline:.41rem .25rem}.pds-file-upload::file-selector-button{padding:0;visibility:hidden;width:.1rem}.pds-file-upload:focus{outline:none}.pds-file-upload{color:var(--pds-color-text-default);font-size:1rem;text-align:left;width:100%}.pds-file-upload--has-value{padding-inline-start:0}.pds-file-upload__label{all:unset;align-items:center;background-color:var(
+.pds-file-upload__input-wrapper{align-items:center;background-color:var(--pds-color-input-background-default);border:.0625rem solid var(--pds-color-input-border-default);border-radius:.1875rem;box-sizing:border-box;display:flex;gap:.64rem;column-gap:.512rem;cursor:pointer;height:2.441rem;padding-inline:.512rem;position:relative;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:100%}.pds-file-upload__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:outline .2s ease-in-out 0s}.pds-file-upload__input::file-selector-button{padding:0;visibility:hidden;width:.1rem}.pds-file-upload__input{color:var(--pds-color-text-default);font-size:1rem;text-align:left;width:100%}.pds-file-upload__input:focus{outline:none}.pds-file-upload__input-label{all:unset;align-items:center;background-color:var(
 		--pds-color-input-file-upload-button-background-default
-	);border-radius:.1875rem;color:var(--pds-color-foreground-default);display:flex;font-family:Poppins,sans-serif;font-size:.833rem;font-weight:400;gap:.41rem;letter-spacing:0;line-height:1;padding:.41rem .512rem;padding-inline-start:.41rem;white-space:nowrap}.pds-file-upload__label:hover{background-color:var(
+	);border-radius:.1875rem;color:var(--pds-color-foreground-default);display:flex;font-family:Poppins,sans-serif;font-size:.833rem;font-weight:400;gap:.41rem;letter-spacing:0;line-height:1;padding:.41rem .512rem;white-space:nowrap}.pds-file-upload__input-label:hover{background-color:var(
 			--pds-color-input-file-upload-button-background-hover
-		)}.pds-input-wrapper.pds-input-wrapper--file-upload.pds-has-error .pds-input-field--file-upload,.pds-input-wrapper.pds-input-wrapper--file-upload.pds-has-success .pds-input-field--file-upload{padding-inline-start:.64rem}.pds-input-wrapper.pds-input-wrapper--file-upload.pds-has-error .pds-file-upload--has-value,.pds-input-wrapper.pds-input-wrapper--file-upload.pds-has-success .pds-file-upload--has-value{padding-inline-start:0}
+		)}.pds-file-upload.pds-is-disabled .pds-file-upload__input-label{cursor:not-allowed}.pds-file-upload.pds-is-disabled .pds-file-upload__input-label:hover{background-color:var(
+			--pds-color-input-file-upload-button-background-default
+		)}