@pantheon-systems/pds-toolkit-react 1.0.0-dev.153 → 1.0.0-dev.154

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

@@ -1,40 +1,60 @@
-export function Tabs({ ariaLabel, defaultSelected, size, tabs, className, ...props }: {
-    [x: string]: any;
-    ariaLabel: any;
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '@components/Icon/Icon';
+import './tabs.css';
+interface Tabs {
+    /**
+     * Sets if tab disabled (optional)
+     */
+    disabled?: boolean;
+    /**
+     * Adds tab icon (optional)
+     */
+    icon?: PDSIcon;
+    /**
+     * Sets tab label
+     */
+    tabLabel: string;
+    /**
+     * Sets id for tab (optional)
+     */
+    tabId?: string;
+    /**
+     * Sets content inside tab
+     */
+    panelContent: ReactNode;
+}
+interface TabsProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Function to call when the active tab changes
+     */
+    onActiveTabChange?: (activeTabIndex: number) => void;
+    /**
+     * Sets tabset aria label
+     */
+    ariaLabel: string;
+    /**
+     * Sets default selected tab using a zero-based index, defaults to 0
+     */
     defaultSelected?: number;
-    size?: string;
-    tabs: any;
-    className: any;
-}): React.JSX.Element;
-export namespace Tabs {
-    namespace propTypes {
-        let ariaLabel: PropTypes.Validator<string>;
-        let defaultSelected: PropTypes.Requireable<number>;
-        let size: PropTypes.Requireable<string>;
-        let tabs: PropTypes.Requireable<PropTypes.InferProps<{
-            /**
-             * Sets if tab disabled (optional)
-             */
-            disabled: PropTypes.Requireable<boolean>;
-            /**
-             * Adds tab icon (optional)
-             */
-            icon: PropTypes.Requireable<string>;
-            /**
-             * Sets tab label
-             */
-            tabLabel: PropTypes.Validator<string>;
-            /**
-             * Sets id for tab (optional)
-             */
-            tabId: PropTypes.Requireable<string>;
-            /**
-             * Sets content inside tab
-             */
-            panelContent: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        }>[]>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * Sets currently selected tab using a zero-based index
+     */
+    selectedTab?: number;
+    /**
+     * Sets size of tab
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Array of objects for tab data
+     */
+    tabs: Tabs[];
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * Tabs UI component
+ */
+export declare const Tabs: ({ onActiveTabChange, ariaLabel, defaultSelected, selectedTab, size, tabs, className, ...props }: TabsProps) => React.JSX.Element;
+export {};

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

@@ -19,28 +19,32 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
      */
     hasTooltip?: boolean;
     /**
-     * Which icon to render
+     * Which icon to render.
      */
     iconName: PDSIcon;
     /**
-     * Click event handler callback
+     * Which icon to render second. If this is set, the button will be animated.
+     */
+    icon2Name?: PDSIcon;
+    /**
+     * Click event handler callback.
      */
     onClick?: () => void;
     /**
-     * Which size of button to render
+     * Which size of button to render.
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Which variant of button to render
+     * Which variant of button to render.
      */
     variant?: 'standard' | 'critical';
     /**
-     * Additional class names
+     * Additional class names.
      */
     className?: string;
 }
 /**
  * IconButton UI component
  */
-export declare const IconButton: ({ ariaLabel, buttonType, disabled, hasTooltip, iconName, onClick, size, variant, className, ...props }: IconButtonProps) => React.JSX.Element;
+export declare const IconButton: ({ ariaLabel, buttonType, disabled, hasTooltip, iconName, icon2Name, onClick, size, variant, className, ...props }: IconButtonProps) => React.JSX.Element;
 export {};

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

@@ -1,5 +1,88 @@
+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;
+    /**
+     * 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 const Checkbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+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

@@ -1,44 +1,76 @@
-export function CheckboxGroup({ disabled, id, inputWidth, label, message, onChange, options, required, className, ...props }: {
-    [x: string]: any;
+import React, { ComponentPropsWithoutRef } from 'react';
+import { ValidationStatus } from '../input-types';
+import './checkbox-group.css';
+export type CheckboxOption = {
+    checked?: boolean;
     disabled?: boolean;
-    id: any;
-    inputWidth: any;
-    label: any;
-    message: any;
-    onChange: any;
-    options: any;
+    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;
-    className: any;
-}): React.JSX.Element;
-export namespace CheckboxGroup {
-    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 options: PropTypes.Requireable<PropTypes.InferProps<{
-            /**
-             * Label of the checkbox.
-             */
-            label: PropTypes.Validator<string>;
-            /**
-             * Value attribute of the checkbox.
-             */
-            value: PropTypes.Validator<string>;
-            /**
-             * Is the checkbox checked initially?
-             */
-            checked: PropTypes.Requireable<boolean>;
-            /**
-             * Is the checkbox disabled?
-             */
-            disabled: PropTypes.Requireable<boolean>;
-        }>[]>;
-        let required: PropTypes.Requireable<boolean>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * 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;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * 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/InputGroup/InputGroup.d.ts

@@ -1,13 +1,19 @@
-export function InputGroup({ children, className, ...props }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-}): React.JSX.Element;
-export namespace InputGroup {
-    namespace propTypes {
-        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        let className: PropTypes.Requireable<string>;
-    }
+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;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * InputGroup UI component
+ */
+export declare const InputGroup: ({ children, className, ...props }: InputGroupProps) => React.JSX.Element;

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

@@ -9,10 +9,6 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
      * Is the field checked?
      */
     checked?: boolean;
-    /**
-     * Additional class names for input.
-     */
-    className?: string;
     /**
      * Initial value for the input field. Only valid if the input is uncontrolled. Cannot be used in conjunction with the `checked` prop.
      */
@@ -69,6 +65,10 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
      * 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

@@ -1,4 +1,5 @@
 import React, { ComponentPropsWithoutRef, ChangeEvent, FocusEvent } from 'react';
+import { ValidationStatus } from '../input-types';
 import './text-input.css';
 type TranslationStringProps = {
     clearButton: string;
@@ -9,7 +10,6 @@ type TranslationStringProps = {
     visibilityToggleShow: string;
 };
 type HtmlInputTypes = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
-type ValidationStatus = 'success' | 'error';
 /**
  * Prop types for TextInput
  */
@@ -23,7 +23,7 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
      */
     counterMaxLength?: number;
     /**
-     * Initial value for the input field. Only valid if the input is uncontrolled. Cannot be used in conjunction with the `value` prop.
+     * 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;
     /**

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

@@ -0,0 +1 @@
+export type ValidationStatus = 'success' | 'error';

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

@@ -8,19 +8,21 @@ export declare const inputCommonClasses: {
     success: string;
     readonly: 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;
+    required: boolean;
+    disabled: boolean;
     isLegend?: boolean;
     className?: string;
 }) => React.JSX.Element;
-export declare const InputMessage: ({ id, message, hasValidationMessage, validationStatus, className, }: {
+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;

package/_dist/css/component-css/pds-checkbox-group.css

@@ -1 +1 @@
-.pds-checkbox-group__options{display:flex;flex-direction:column;list-style-type:none;margin-block:0;padding-inline-start:0;row-gap:.41rem}.pds-checkbox-group__checkbox{align-items:baseline;display:flex}
+.pds-checkbox-group__options{display:flex;flex-direction:column;margin-block-end:.512rem;margin-inline-start:.125rem;row-gap:.8rem}

package/_dist/css/component-css/pds-checkbox.css

@@ -1 +1 @@
-.pds-checkbox{--pds-checkbox-input-size:1rem;align-items:start;column-gap:.512rem;display:grid;grid-template-columns:var(--pds-checkbox-input-size) auto}.pds-checkbox input[type=checkbox]{appearance:none;background-color:transparent;background-position:50%;background-repeat:no-repeat;background-size:.64rem;border-color:var(--pds-color-input-border-default);border-radius:.1875rem;border-style:solid;border-width:.125rem;height:var(--pds-checkbox-input-size);position:relative;top:.0625rem;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:var(--pds-checkbox-input-size)}.pds-checkbox input[type=checkbox]:disabled{border-color:var(--pds-color-input-border-default);cursor:not-allowed;opacity:50%}.pds-checkbox input[type=checkbox]:focus-visible{border-color:var(--pds-color-interactive-focus);outline:none}.pds-checkbox>label{font-size:1rem;font-weight:400;margin-block-end:0}.pds-checkbox input[type=checkbox]:checked,.pds-checkbox input[type=checkbox]:indeterminate{background-color:var(--pds-color-interactive-focus);border-color:var(--pds-color-interactive-focus);transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s}.pds-checkbox input[type=checkbox]:checked{background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="%23fff"><path d="m46.219 12-2.157 2.156-24 24L18 40.313l-2.156-2.157-12-12L1.688 24 6 19.781l2.063 2.157L18 31.78 39.844 9.938 42 7.78z"/></svg>')}.pds-checkbox input[type=checkbox]:indeterminate{background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="%23fff"><path d="M40.5 27H8v-5h32.5z"/></svg>')}
+.pds-checkbox{--pds-checkbox-input-size:1rem;--pds-checkbox-input-gap:0.512rem}.pds-checkbox__input-wrapper{display:flex}.pds-checkbox input[type=checkbox]{appearance:none}.pds-checkbox__label{align-items:start;column-gap:var(--pds-checkbox-input-gap);display:grid;grid-template-columns:var(--pds-checkbox-input-size) auto}.pds-checkbox__label-text{color:var(--pds-color-text-default);font-size:1rem;font-weight:400;margin-block-end:0}.pds-checkbox__box{align-items:center;background-color:var(--pds-color-input-background);border:.125rem solid var(--pds-color-input-border-default);border-radius:.1875rem;box-sizing:border-box;display:flex;height:var(--pds-checkbox-input-size);padding:.0625rem;position:relative;top:.09375rem;width:var(--pds-checkbox-input-size)}.pds-checkbox__box--checked,.pds-checkbox__box--indeterminate{background-color:var(--pds-color-input-checked-background);border-color:var(--pds-color-input-checked-background)}.pds-checkbox__icon{color:var(--pds-color-input-checked-foreground)}.pds-checkbox:hover .pds-checkbox__box{cursor:pointer}.pds-checkbox:focus-within .pds-checkbox__box{outline:.0625rem solid var(--pds-color-interactive-focus);outline-offset:.0625rem}.pds-checkbox.pds-is-disabled .pds-checkbox__label{cursor:not-allowed;opacity:50%}.pds-checkbox .pds-input-label__required{margin-inline-start:.125rem}div.pds-checkbox-group .pds-checkbox--indent-1{margin-inline-start:calc(var(--pds-checkbox-input-size)*2 - var(--pds-checkbox-input-gap))}div.pds-checkbox-group .pds-checkbox--indent-2{margin-inline-start:calc(var(--pds-checkbox-input-size)*4 - var(--pds-checkbox-input-gap)*2)}

package/_dist/css/component-css/pds-icon-button.css

@@ -14,4 +14,4 @@ button.pds-icon-button{--pds-button-size:2.441rem;--pds-button-color-foreground:
 		--pds-color-icon-button-critical-background-active
 	);--pds-button-color-foreground:var(
 		--pds-color-icon-button-critical-foreground-default
-	)}button.pds-icon-button--sm{--pds-button-size:1.953rem}button.pds-icon-button--lg{--pds-button-size:3.052rem}.pds-icon-button__tooltip .pds-tooltip__container{padding:.328rem .512rem}
+	)}button.pds-icon-button--sm{--pds-button-size:1.953rem}button.pds-icon-button--lg{--pds-button-size:3.052rem}.pds-icon-button__tooltip .pds-tooltip__container{padding:.328rem .512rem}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}