@pantheon-systems/pds-toolkit-react 1.0.0-dev.173 → 1.0.0-dev.175

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/_dist/components/cards/CardSelectGroup/CardSelectGroup.d.ts +55 -37
  2. package/_dist/components/inputs/Select/Select.d.ts +87 -41
  3. package/_dist/components/inputs/Textarea/Textarea.d.ts +101 -33
  4. package/_dist/css/component-css/pds-button.css +1 -1
  5. package/_dist/css/component-css/pds-dashboard-search.css +1 -1
  6. package/_dist/css/component-css/pds-index.css +7 -7
  7. package/_dist/css/component-css/pds-input-group.css +1 -1
  8. package/_dist/css/component-css/pds-input-utilities.css +1 -1
  9. package/_dist/css/component-css/pds-inputs-common-deprecated.css +1 -1
  10. package/_dist/css/component-css/pds-modal.css +1 -1
  11. package/_dist/css/component-css/pds-select.css +1 -1
  12. package/_dist/css/component-css/pds-side-nav-compact.css +1 -1
  13. package/_dist/css/component-css/pds-side-nav.css +1 -1
  14. package/_dist/css/component-css/pds-site-footer.css +1 -1
  15. package/_dist/css/component-css/pds-textarea.css +1 -1
  16. package/_dist/css/component-css/pds-workspace-selector.css +1 -1
  17. package/_dist/css/pds-components.css +7 -7
  18. package/_dist/css/pds-core.css +2 -2
  19. package/_dist/index.css +1 -1
  20. package/_dist/index.d.ts +5 -3
  21. package/_dist/index.js +3241 -3400
  22. package/_dist/index.js.map +1 -1
  23. package/package.json +1 -1
package/_dist/components/cards/CardSelectGroup/CardSelectGroup.d.ts CHANGED
@@ -1,38 +1,56 @@
1
- export function CardSelectGroup({ id, initialSelection, label, labelDisplay, layout, onChange, options, className, ...props }: {
2
- [x: string]: any;
3
- id: any;
4
- initialSelection: any;
5
- label: any;
6
- labelDisplay?: string;
7
- layout?: string;
8
- onChange: any;
9
- options: any;
10
- className: any;
11
- }): React.JSX.Element;
12
- export namespace CardSelectGroup {
13
- namespace propTypes {
14
- let id: PropTypes.Validator<string>;
15
- let initialSelection: PropTypes.Requireable<string>;
16
- let label: PropTypes.Validator<string>;
17
- let labelDisplay: PropTypes.Requireable<string>;
18
- let layout: PropTypes.Requireable<string>;
19
- let onChange: PropTypes.Requireable<(...args: any[]) => any>;
20
- let options: PropTypes.Requireable<PropTypes.InferProps<{
21
- /**
22
- * Option label
23
- */
24
- label: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
25
- /**
26
- * Option description
27
- */
28
- description: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
29
- /**
30
- * Option value
31
- */
32
- value: PropTypes.Validator<string>;
33
- }>[]>;
34
- let className: PropTypes.Requireable<string>;
35
- }
1
+ import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import './card-select-group.css';
3
+ interface CardOptions {
4
+ /**
5
+ * Option label
6
+ */
7
+ label: string | ReactNode;
8
+ /**
9
+ * Option description
10
+ */
11
+ description?: string | ReactNode;
12
+ /**
13
+ * Option value
14
+ */
15
+ value: string;
36
16
  }
37
- import React from 'react';
38
- import PropTypes from 'prop-types';
17
+ interface CardSelectGroupProps extends Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
18
+ /**
19
+ * Unique ID for the card select group
20
+ */
21
+ id: string;
22
+ /**
23
+ * Optional initial selected option value
24
+ */
25
+ initialSelection?: string;
26
+ /**
27
+ * Label for the card select group
28
+ */
29
+ label: string;
30
+ /**
31
+ * Display of the component label. `hidden` visually hides the label but keeps it accessible to screen readers.
32
+ */
33
+ labelDisplay?: 'left' | 'center' | 'hidden';
34
+ /**
35
+ * Column layout of the cards at breakpoints medium and above.
36
+ */
37
+ layout?: 'auto' | 'twoAcross' | 'threeAcross';
38
+ /**
39
+ * Callback function that will return the updated value from the instance when it changes.
40
+ * Function should have the shape of: `(value) => { <do stuff here> } `.
41
+ */
42
+ onChange?: (value: string) => void;
43
+ /**
44
+ * Array of card options
45
+ */
46
+ options?: CardOptions[];
47
+ /**
48
+ * Additional class names
49
+ */
50
+ className?: string;
51
+ }
52
+ /**
53
+ * CardSelectGroup UI component
54
+ */
55
+ export declare const CardSelectGroup: ({ id, initialSelection, label, labelDisplay, layout, onChange, options, className, ...props }: CardSelectGroupProps) => React.JSX.Element;
56
+ export {};
package/_dist/components/inputs/Select/Select.d.ts CHANGED
@@ -1,45 +1,91 @@
1
- export function Select({ disabled, id, initialValue, inputWidth, label, message, onOptionSelect, options, required, selectOptionsLabel, showLabel, validationFunction, className, ...props }: {
2
- [x: string]: any;
1
+ import React, { ComponentPropsWithoutRef, FocusEvent } from 'react';
2
+ import { ValidationStatus } from '../input-types';
3
+ import './select.css';
4
+ type LabelStrings = {
5
+ selectOptionText: string;
6
+ triggerButton: string;
7
+ };
8
+ export type SelectOptionType = {
9
+ /**
10
+ * Option label.
11
+ */
12
+ label: string;
13
+ /**
14
+ * Option value.
15
+ */
16
+ value: string;
17
+ };
18
+ /**
19
+ * Prop types for Select
20
+ */
21
+ export interface SelectProps extends ComponentPropsWithoutRef<'div'> {
22
+ /**
23
+ * Optional default value for the field. Must match the value of one of the options.
24
+ */
25
+ defaultValue?: string;
26
+ /**
27
+ * Is the field disabled?
28
+ */
3
29
  disabled?: boolean;
4
- id: any;
5
- initialValue: any;
6
- inputWidth: any;
7
- label: any;
8
- message: any;
9
- onOptionSelect: any;
10
- options: any;
30
+ /**
31
+ * Input ID.
32
+ */
33
+ id: string;
34
+ /**
35
+ * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
36
+ */
37
+ inputWidth?: number;
38
+ /**
39
+ * Field label.
40
+ */
41
+ label: string;
42
+ /**
43
+ * Translation strings for various labels or other visually-hidden text.
44
+ */
45
+ labelStrings?: LabelStrings;
46
+ /**
47
+ * Message or description used to help clarify the usage of the input.
48
+ */
49
+ message?: string;
50
+ /**
51
+ * onBlur event handler.
52
+ */
53
+ onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
54
+ /**
55
+ * onFocus event handler.
56
+ */
57
+ onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
58
+ /**
59
+ * Callback function when an option is selected.
60
+ */
61
+ onOptionSelect?: (option: SelectOptionType) => void;
62
+ /**
63
+ * Array of options for the select field.
64
+ */
65
+ options?: SelectOptionType[];
66
+ /**
67
+ * Is this field required?
68
+ */
11
69
  required?: boolean;
12
- selectOptionsLabel?: string;
70
+ /**
71
+ * Should the label be visible? If false, it will render for screen readers only.
72
+ */
13
73
  showLabel?: boolean;
14
- validationFunction: any;
15
- className: any;
16
- }): React.JSX.Element;
17
- export namespace Select {
18
- let displayName: string;
19
- namespace propTypes {
20
- let disabled: PropTypes.Requireable<boolean>;
21
- let id: PropTypes.Validator<string>;
22
- let initialValue: PropTypes.Requireable<string>;
23
- let inputWidth: PropTypes.Requireable<number>;
24
- let label: PropTypes.Validator<string>;
25
- let message: PropTypes.Requireable<string>;
26
- let onOptionSelect: PropTypes.Requireable<(...args: any[]) => any>;
27
- let options: PropTypes.Validator<PropTypes.InferProps<{
28
- /**
29
- * Option label.
30
- */
31
- label: PropTypes.Validator<string>;
32
- /**
33
- * Option value. Will default to label if not provided.
34
- */
35
- value: PropTypes.Requireable<string>;
36
- }>[]>;
37
- let required: PropTypes.Requireable<boolean>;
38
- let selectOptionsLabel: PropTypes.Requireable<string>;
39
- let showLabel: PropTypes.Requireable<boolean>;
40
- let validationFunction: PropTypes.Requireable<(...args: any[]) => any>;
41
- let className: PropTypes.Requireable<string>;
42
- }
74
+ /**
75
+ * Validation message for the input field based on the validation status.
76
+ */
77
+ validationMessage?: string;
78
+ /**
79
+ * Validation status of the input field.
80
+ */
81
+ validationStatus?: ValidationStatus;
82
+ /**
83
+ * Additional class names
84
+ */
85
+ className?: string;
43
86
  }
44
- import React from 'react';
45
- import PropTypes from 'prop-types';
87
+ /**
88
+ * Select UI component
89
+ */
90
+ 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;
91
+ export {};
package/_dist/components/inputs/Textarea/Textarea.d.ts CHANGED
@@ -1,39 +1,107 @@
1
- export function Textarea({ counterFunction, disabled, id, initialValue, inputWidth, isResizable, label, message, onChange, placeholder, readonly, required, rows, validationFunction, className, ...props }: {
2
- [x: string]: any;
3
- counterFunction?: () => void;
1
+ import React, { ComponentPropsWithoutRef, FocusEvent } from 'react';
2
+ import { ValidationStatus } from '../input-types';
3
+ import './textarea.css';
4
+ type TranslationStringProps = {
5
+ clearButton: string;
6
+ counterOverLimit?: string;
7
+ searchShortcut: string;
8
+ visibilityStatus: string;
9
+ visibilityToggleHide: string;
10
+ visibilityToggleShow: string;
11
+ };
12
+ interface TextareaProps {
13
+ /**
14
+ * Maximum character count for the character counter. Leave blank for no counter.
15
+ */
16
+ counterMaxLength?: number;
17
+ /**
18
+ * Initial value for the input field. Setting this prop automatically makes the input uncontrolled. Cannot be used in conjunction with the `value` prop.
19
+ */
20
+ defaultValue?: string;
21
+ /**
22
+ * Is the field disabled?
23
+ */
4
24
  disabled?: boolean;
5
- id: any;
6
- initialValue?: string;
7
- inputWidth: any;
25
+ /**
26
+ * ID of the textarea.
27
+ */
28
+ id: string;
29
+ /**
30
+ * Should the textarea be resizable by the user?
31
+ */
8
32
  isResizable?: boolean;
9
- label: any;
10
- message: any;
11
- onChange: any;
12
- placeholder: any;
33
+ /**
34
+ * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
35
+ */
36
+ inputWidth?: number;
37
+ /**
38
+ * Text label associated with the input field.
39
+ */
40
+ label: string;
41
+ /**
42
+ * Message or description used to help clarify the usage of the input.
43
+ */
44
+ message?: string;
45
+ /**
46
+ * onBlur event handler.
47
+ */
48
+ onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
49
+ /**
50
+ * Function to help lift the state and retrieve the input's value.
51
+ * Should accept one argument, the input's value
52
+ */
53
+ onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
54
+ /**
55
+ * onFocus event handler.
56
+ */
57
+ onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
58
+ /**
59
+ * Optional placeholder text to display when the input field is empty.
60
+ */
61
+ placeholder?: string;
62
+ /**
63
+ * Is the field read-only?
64
+ */
13
65
  readonly?: boolean;
66
+ /**
67
+ * Is the field required?
68
+ */
14
69
  required?: boolean;
70
+ /**
71
+ * Rows value to be given to the textarea type.
72
+ */
15
73
  rows?: number;
16
- validationFunction: any;
17
- className: any;
18
- }): React.JSX.Element;
19
- export namespace Textarea {
20
- namespace propTypes {
21
- let counterFunction: PropTypes.Requireable<(...args: any[]) => any>;
22
- let disabled: PropTypes.Requireable<boolean>;
23
- let id: PropTypes.Validator<string>;
24
- let initialValue: PropTypes.Requireable<string>;
25
- let isResizable: PropTypes.Requireable<boolean>;
26
- let inputWidth: PropTypes.Requireable<number>;
27
- let label: PropTypes.Validator<string>;
28
- let message: PropTypes.Requireable<string>;
29
- let onChange: PropTypes.Requireable<(...args: any[]) => any>;
30
- let placeholder: PropTypes.Requireable<string>;
31
- let readonly: PropTypes.Requireable<boolean>;
32
- let required: PropTypes.Requireable<boolean>;
33
- let rows: PropTypes.Requireable<number>;
34
- let validationFunction: PropTypes.Requireable<(...args: any[]) => any>;
35
- let className: PropTypes.Requireable<string>;
36
- }
74
+ /**
75
+ * Should the label be visible? If false, it will render for screen readers only.
76
+ */
77
+ showLabel?: boolean;
78
+ /**
79
+ * Additional props for the `<textarea>` element.
80
+ */
81
+ textareaProps?: ComponentPropsWithoutRef<'textarea'>;
82
+ /**
83
+ * Translation strings for various labels or other visually-hidden text.
84
+ */
85
+ translationStrings?: TranslationStringProps;
86
+ /**
87
+ * Validation message for the textarea field based on the validation status.
88
+ */
89
+ validationMessage?: string;
90
+ /**
91
+ * Validation status of the textarea field.
92
+ */
93
+ validationStatus?: ValidationStatus;
94
+ /**
95
+ * 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.
96
+ */
97
+ value?: string;
98
+ /**
99
+ * Additional class names
100
+ */
101
+ className?: string;
37
102
  }
38
- import React from 'react';
39
- import PropTypes from 'prop-types';
103
+ /**
104
+ * Textarea UI component
105
+ */
106
+ export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
107
+ export {};
package/_dist/css/component-css/pds-button.css CHANGED
@@ -10,7 +10,7 @@ a.pds-button,button.pds-button{--pds-button-color-background:var(
10
10
  --pds-color-button-primary-background-active
11
11
  );--pds-button-color-border:var(--pds-color-button-primary-border-active);--pds-button-color-foreground:var(
12
12
  --pds-color-button-primary-foreground-active
13
- )}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(
13
+ )}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(
14
14
  --pds-color-button-secondary-background-default
15
15
  );--pds-button-color-border:var(--pds-color-button-secondary-border-default);--pds-button-color-foreground:var(
16
16
  --pds-color-button-secondary-foreground-default
package/_dist/css/component-css/pds-dashboard-search.css CHANGED
@@ -1 +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}
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: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}