@pantheon-systems/pds-toolkit-react 1.0.0-dev.174 → 1.0.0-dev.176

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

@@ -1,45 +1,91 @@
-export function Select({ disabled, id, initialValue, inputWidth, label, message, onOptionSelect, options, required, selectOptionsLabel, showLabel, validationFunction, className, ...props }: {
-    [x: string]: any;
+import React, { ComponentPropsWithoutRef, FocusEvent } 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;
+};
+/**
+ * Prop types for Select
+ */
+export interface SelectProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Optional default value for the field. Must match the value of one of the options.
+     */
+    defaultValue?: string;
+    /**
+     * Is the field disabled?
+     */
     disabled?: boolean;
-    id: any;
-    initialValue: any;
-    inputWidth: any;
-    label: any;
-    message: any;
-    onOptionSelect: any;
-    options: any;
+    /**
+     * 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;
+    /**
+     * onBlur event handler.
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * onFocus event handler.
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function when an option is selected.
+     */
+    onOptionSelect?: (option: SelectOptionType) => void;
+    /**
+     * Array of options for the select field.
+     */
+    options?: SelectOptionType[];
+    /**
+     * Is this field required?
+     */
     required?: boolean;
-    selectOptionsLabel?: string;
+    /**
+     * 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 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>;
-    }
+    /**
+     * 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';
+/**
+ * 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 {};

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

@@ -10,7 +10,7 @@ a.pds-button,button.pds-button{--pds-button-color-background:var(
 		--pds-color-button-primary-background-active
 	);--pds-button-color-border:var(--pds-color-button-primary-border-active);--pds-button-color-foreground:var(
 		--pds-color-button-primary-foreground-active
-	)}a.pds-button:focus-visible,button.pds-button:focus-visible{outline:.125rem solid var(--pds-color-interactive-focus);outline-offset:.0625rem}a.pds-button.pds-button--sm,button.pds-button.pds-button--sm{font-size:.833rem;gap:.41rem;height:unset;max-height:1.953rem;padding:.41rem .512rem}a.pds-button.pds-button--sm .pds-button__loading-indicator,button.pds-button.pds-button--sm .pds-button__loading-indicator{--pds-spinner-size:0.8rem}a.pds-button.pds-button--lg,button.pds-button.pds-button--lg{font-size:1.2rem;height:unset;max-height:3.052rem;padding:1rem 1.25rem}a.pds-button.pds-button--lg .pds-button__loading-indicator,button.pds-button.pds-button--lg .pds-button__loading-indicator{--pds-spinner-size:1.25rem}a.pds-button.pds-button--secondary,button.pds-button.pds-button--secondary{--pds-button-color-background:var(
+	)}a.pds-button:focus-visible,button.pds-button:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus);outline-offset:.0625rem}a.pds-button.pds-button--sm,button.pds-button.pds-button--sm{font-size:.833rem;gap:.41rem;height:unset;max-height:1.953rem;padding:.41rem .512rem}a.pds-button.pds-button--sm .pds-button__loading-indicator,button.pds-button.pds-button--sm .pds-button__loading-indicator{--pds-spinner-size:0.8rem}a.pds-button.pds-button--lg,button.pds-button.pds-button--lg{font-size:1.2rem;height:unset;max-height:3.052rem;padding:1rem 1.25rem}a.pds-button.pds-button--lg .pds-button__loading-indicator,button.pds-button.pds-button--lg .pds-button__loading-indicator{--pds-spinner-size:1.25rem}a.pds-button.pds-button--secondary,button.pds-button.pds-button--secondary{--pds-button-color-background:var(
 		--pds-color-button-secondary-background-default
 	);--pds-button-color-border:var(--pds-color-button-secondary-border-default);--pds-button-color-foreground:var(
 		--pds-color-button-secondary-foreground-default

package/_dist/css/component-css/pds-dashboard-search.css

@@ -1 +1 @@
-.pds-dashboard-search{--dashboard-search-height:2.441rem;height:var(--dashboard-search-height);margin-inline-end:-.64rem;position:absolute;transition:width .375s ease;z-index:400}.pds-dashboard-search--inner{align-content:stretch;display:flex}.pds-dashboard-search__combobox{left:0;position:absolute;right:0}.pds-dashboard-search__search-toggle{align-items:center;background-color:transparent;border:.0625rem solid transparent;border-radius:.1875rem;color:var(--pds-color-text-default);cursor:pointer;display:flex;height:var(--dashboard-search-height);padding-inline:.64rem}.pds-dashboard-search__search-toggle:hover{color:var(--pds-color-interactive-link-hover)}.pds-dashboard-search__search-toggle-icon{pointer-events:none}.pds-dashboard-search__option-display{justify-content:space-between;width:100%}.pds-dashboard-search__option-display,.pds-dashboard-search__option-inner{align-items:center;column-gap:.8rem;display:flex}.pds-dashboard-search__option-icon{align-items:center;color:var(--pds-color-text-default-secondary);display:flex}.pds-dashboard-search__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-dashboard-search--isMobile{border-bottom:.0625rem solid var(--pds-color-border-default);left:50%;margin-inline-start:-50vw;min-height:3.815rem;position:relative;width:100vw}.pds-dashboard-search--isMobile .pds-dashboard-search__combobox{margin-inline:auto;width:calc(100% - 2.5rem)}.pds-dashboard-search--mobile-inner{padding-block:.64rem}
+.pds-dashboard-search{--dashboard-search-height:2.441rem;height:var(--dashboard-search-height);margin-inline-end:-.64rem;position:absolute;transition:width .375s ease;z-index:400}.pds-dashboard-search--inner{align-content:stretch;display:flex}.pds-dashboard-search__combobox{left:0;position:absolute;right:0}.pds-dashboard-search__search-toggle{align-items:center;background-color:transparent;border:.0625rem solid transparent;border-radius:.1875rem;color:var(--pds-color-text-default);cursor:pointer;display:flex;height:var(--dashboard-search-height);padding-inline:.64rem}.pds-dashboard-search__search-toggle:hover{color:var(--pds-color-interactive-link-hover)}.pds-dashboard-search__search-toggle:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus);transition:outline .2s ease-in-out 0s}.pds-dashboard-search__search-toggle-icon{pointer-events:none}.pds-dashboard-search__option-display{justify-content:space-between;width:100%}.pds-dashboard-search__option-display,.pds-dashboard-search__option-inner{align-items:center;column-gap:.8rem;display:flex}.pds-dashboard-search__option-icon{align-items:center;color:var(--pds-color-text-default-secondary);display:flex}.pds-dashboard-search__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-dashboard-search--isMobile{border-bottom:.0625rem solid var(--pds-color-border-default);left:50%;margin-inline-start:-50vw;min-height:3.815rem;position:relative;width:100vw}.pds-dashboard-search--isMobile .pds-dashboard-search__combobox{margin-inline:auto;width:calc(100% - 2.5rem)}.pds-dashboard-search--mobile-inner{padding-block:.64rem}