@pantheon-systems/pds-toolkit-react 1.0.0-alpha.12 → 1.0.0-alpha.13
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.
- package/_dist/components/inputs/Checkbox/Checkbox.d.ts +1 -1
- package/_dist/components/inputs/CheckboxFieldset/CheckboxFieldset.d.ts +1 -1
- package/_dist/components/inputs/CheckboxGroup/CheckboxGroup.d.ts +1 -1
- package/_dist/components/inputs/Combobox/Combobox.d.ts +1 -1
- package/_dist/components/inputs/ComboboxMultiselect/ComboboxMultiselect.d.ts +1 -1
- package/_dist/components/inputs/Datepicker/Datepicker.d.ts +96 -0
- package/_dist/components/inputs/FileUpload/FileUpload.d.ts +1 -1
- package/_dist/components/inputs/RadioGroup/RadioGroup.d.ts +1 -1
- package/_dist/components/inputs/Select/Select.d.ts +1 -1
- package/_dist/components/inputs/Switch/Switch.d.ts +1 -1
- package/_dist/components/inputs/TextInput/TextInput.d.ts +1 -1
- package/_dist/components/inputs/Textarea/Textarea.d.ts +1 -1
- package/_dist/components/inputs/input-utilities.d.ts +1 -1
- package/_dist/css/component-css/pds-datepicker.css +3 -0
- package/_dist/css/component-css/pds-index.css +4 -2
- package/_dist/css/component-css/pds-popover.css +1 -1
- package/_dist/css/pds-components.css +4 -2
- package/_dist/css/pds-core.css +1 -1
- package/_dist/index.css +1 -1
- package/_dist/index.d.ts +1 -0
- package/_dist/index.js +3521 -3236
- package/_dist/index.js.map +1 -1
- package/package.json +3 -1
|
@@ -30,7 +30,7 @@ export interface CheckboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
30
30
|
*/
|
|
31
31
|
inputProps?: ComponentPropsWithoutRef<'input'>;
|
|
32
32
|
/**
|
|
33
|
-
*
|
|
33
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
34
34
|
*/
|
|
35
35
|
inputWidth?: number;
|
|
36
36
|
/**
|
|
@@ -22,7 +22,7 @@ export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div
|
|
|
22
22
|
*/
|
|
23
23
|
id: string;
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
25
|
+
* Max-width of the field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
26
26
|
*/
|
|
27
27
|
inputWidth?: number;
|
|
28
28
|
/**
|
|
@@ -26,7 +26,7 @@ export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
26
26
|
*/
|
|
27
27
|
id: string;
|
|
28
28
|
/**
|
|
29
|
-
*
|
|
29
|
+
* Max-width of the field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
30
30
|
*/
|
|
31
31
|
inputWidth?: number;
|
|
32
32
|
/**
|
|
@@ -47,7 +47,7 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
47
47
|
*/
|
|
48
48
|
id: string;
|
|
49
49
|
/**
|
|
50
|
-
*
|
|
50
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
51
51
|
*/
|
|
52
52
|
inputWidth?: number;
|
|
53
53
|
/**
|
|
@@ -27,7 +27,7 @@ export interface ComboboxMultiselectProps extends DivProps {
|
|
|
27
27
|
*/
|
|
28
28
|
initialSelectedItems?: OptionProps[];
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
30
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
31
31
|
*/
|
|
32
32
|
inputWidth?: number;
|
|
33
33
|
/**
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { DateRange } from 'react-day-picker';
|
|
3
|
+
import { Locale } from 'date-fns';
|
|
4
|
+
import 'react-day-picker/dist/style.css';
|
|
5
|
+
import './datepicker.css';
|
|
6
|
+
type PresetType = 'today' | 'current-week' | 'current-month' | 'last-week' | 'last-month';
|
|
7
|
+
export interface CustomPresetConfig {
|
|
8
|
+
label: string;
|
|
9
|
+
type?: PresetType;
|
|
10
|
+
days?: number;
|
|
11
|
+
custom?: () => DateRange;
|
|
12
|
+
}
|
|
13
|
+
export interface DatepickerTranslationStrings {
|
|
14
|
+
clearButton?: string;
|
|
15
|
+
doneButton?: string;
|
|
16
|
+
noDateSelected?: string;
|
|
17
|
+
noDateRangeSelected?: string;
|
|
18
|
+
selectedDate?: string;
|
|
19
|
+
selectedStartDate?: string;
|
|
20
|
+
pleaseSelectEndDate?: string;
|
|
21
|
+
selectedDateRange?: string;
|
|
22
|
+
to?: string;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Prop types for Datepicker.
|
|
26
|
+
*/
|
|
27
|
+
type DatepickerHTMLProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
|
|
28
|
+
export interface DatepickerProps extends DatepickerHTMLProps {
|
|
29
|
+
/**
|
|
30
|
+
* Is the field disabled?
|
|
31
|
+
*/
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Has date range selection. If false, single date selection is used.
|
|
35
|
+
*/
|
|
36
|
+
hasDateRange?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Input ID.
|
|
39
|
+
*/
|
|
40
|
+
id: string;
|
|
41
|
+
/**
|
|
42
|
+
* Max-width of the input field. Accepts a number in pixels.
|
|
43
|
+
* Numbers below 160 will display at 160px.
|
|
44
|
+
* Leave blank for width: 100%.
|
|
45
|
+
*/
|
|
46
|
+
inputWidth?: number;
|
|
47
|
+
/**
|
|
48
|
+
* Input label.
|
|
49
|
+
*/
|
|
50
|
+
label: string;
|
|
51
|
+
/**
|
|
52
|
+
* Locale from date-fns for internationalization.
|
|
53
|
+
*/
|
|
54
|
+
locale?: Locale;
|
|
55
|
+
/**
|
|
56
|
+
* onChange handler
|
|
57
|
+
*/
|
|
58
|
+
onChange?: (value: DateRange | Date | undefined) => void;
|
|
59
|
+
/**
|
|
60
|
+
* Placeholder text for the trigger button.
|
|
61
|
+
*/
|
|
62
|
+
placeholder?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Optional preset date ranges (only available when hasDateRange is true).
|
|
65
|
+
*/
|
|
66
|
+
presets?: CustomPresetConfig[];
|
|
67
|
+
/**
|
|
68
|
+
* Is this field required?
|
|
69
|
+
*/
|
|
70
|
+
required?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Should the label be visible? If false, it will render for screen readers only.
|
|
73
|
+
*/
|
|
74
|
+
showLabel?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Optional tooltip text to display additional information.
|
|
77
|
+
*/
|
|
78
|
+
tooltipText?: string | null;
|
|
79
|
+
/**
|
|
80
|
+
* Translation strings for labels.
|
|
81
|
+
*/
|
|
82
|
+
translationStrings?: DatepickerTranslationStrings;
|
|
83
|
+
/**
|
|
84
|
+
* Selected date or date range.
|
|
85
|
+
*/
|
|
86
|
+
value?: DateRange | Date;
|
|
87
|
+
/**
|
|
88
|
+
* Additional class names.
|
|
89
|
+
*/
|
|
90
|
+
className?: string;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Datepicker UI component.
|
|
94
|
+
*/
|
|
95
|
+
export declare const Datepicker: ({ disabled, hasDateRange, id, inputWidth, label, locale, onChange, placeholder, presets, required, showLabel, tooltipText, translationStrings, value, className, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
96
|
+
export {};
|
|
@@ -34,7 +34,7 @@ export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
34
34
|
*/
|
|
35
35
|
inputProps?: ComponentPropsWithoutRef<'input'>;
|
|
36
36
|
/**
|
|
37
|
-
*
|
|
37
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
38
38
|
*/
|
|
39
39
|
inputWidth?: number;
|
|
40
40
|
/**
|
|
@@ -51,7 +51,7 @@ export interface SelectProps {
|
|
|
51
51
|
*/
|
|
52
52
|
id: string;
|
|
53
53
|
/**
|
|
54
|
-
*
|
|
54
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
55
55
|
*/
|
|
56
56
|
inputWidth?: number;
|
|
57
57
|
/**
|
|
@@ -26,7 +26,7 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
26
26
|
*/
|
|
27
27
|
inputProps?: ComponentPropsWithoutRef<'input'>;
|
|
28
28
|
/**
|
|
29
|
-
*
|
|
29
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
30
30
|
*/
|
|
31
31
|
inputWidth?: number;
|
|
32
32
|
/**
|
|
@@ -52,7 +52,7 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
52
52
|
*/
|
|
53
53
|
inputProps?: ComponentPropsWithoutRef<'input'>;
|
|
54
54
|
/**
|
|
55
|
-
*
|
|
55
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
56
56
|
*/
|
|
57
57
|
inputWidth?: number;
|
|
58
58
|
/**
|
|
@@ -31,7 +31,7 @@ export interface TextareaProps {
|
|
|
31
31
|
*/
|
|
32
32
|
isResizable?: boolean;
|
|
33
33
|
/**
|
|
34
|
-
*
|
|
34
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
35
35
|
*/
|
|
36
36
|
inputWidth?: number;
|
|
37
37
|
/**
|
|
@@ -10,7 +10,7 @@ export declare const inputCommonClasses: {
|
|
|
10
10
|
readonly: string;
|
|
11
11
|
};
|
|
12
12
|
export declare const getInputWidthStyle: (inputWidth: number) => {
|
|
13
|
-
|
|
13
|
+
maxWidth: string;
|
|
14
14
|
};
|
|
15
15
|
export declare const stripUrlProtocol: (value: string) => string;
|
|
16
16
|
export declare const RequiredIcon: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
.pds-datepicker{color:var(--pds-color-fg-default);font-family:Poppins,sans-serif}.pds-datepicker__input-wrapper{column-gap:.8rem;row-gap:.512rem;width:100%}.pds-datepicker__input-wrapper,.pds-datepicker__presets{align-items:center;display:flex}.pds-datepicker__presets .pds-segmented-button__label-text{font-weight:400}.pds-datepicker__presets .pds-segmented-button.pds-is-disabled .pds-segmented-button__option label{border-color:var(--pds-color-border-input);opacity:1}.pds-datepicker__presets .pds-segmented-button.pds-is-disabled .pds-segmented-button__label-text{color:var(--pds-color-fg-default);opacity:.5}.pds-datepicker__trigger{align-items:center;background:var(--pds-color-bg-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;box-sizing:border-box;color:var(--pds-color-fg-default);cursor:pointer;display:flex;font-size:1rem;gap:.8rem;height:var(--pds-spacing-input-height);justify-content:space-between;min-width:10rem;padding:.64rem;width:100%}.pds-datepicker__trigger:disabled{cursor:not-allowed}.pds-datepicker__trigger:focus{border-color:var(--pds-color-interactive-focus);outline:none;transition:outline .2s ease-in-out 0s}.pds-datepicker__trigger-text{align-items:center;display:flex;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.pds-datepicker__trigger-text--placeholder{color:var(--pds-color-fg-default-secondary)}.pds-datepicker__trigger-icon{color:var(--pds-color-fg-default);flex-shrink:0;margin-block-start:-1px}.pds-datepicker__separator{padding-inline:.64rem}.pds-datepicker__popover{background-color:var(--pds-color-bg-default);border-radius:.375rem;box-shadow:var(--pds-elevation-overlay);overflow:hidden;z-index:var(--pds-z-index-overlay)}.pds-datepicker__calendar{background-color:var(--pds-color-bg-default);padding:.8rem}.pds-datepicker__actions{display:flex;gap:.64rem;justify-content:flex-end;padding:0 1rem 1rem 0}.pds-datepicker__actions button.pds-button.pds-button--sm{font-size:.7497rem;font-weight:500;padding:.4rem .5625rem}.pds-datepicker{--day-size:2rem}.pds-datepicker .rdp-root{--rdp-accent-color:var(--pds-color-datepicker-accent-foreground);--rdp-range_middle-background-color:var(
|
|
2
|
+
--pds-color-datepicker-range-background
|
|
3
|
+
);--rdp-today-color:var(--pds-color-fg-default);--rdp-day-height:var(--day-size);--rdp-day-width:var(--day-size);--rdp-day_button-height:var(--day-size);--rdp-day_button-width:var(--day-size)}.pds-datepicker .rdp-month_caption{margin-block-end:.512rem}.pds-datepicker .rdp-caption_label{color:var(--pds-color-fg-default-secondary);font-size:1rem;font-weight:400}.pds-datepicker .rdp-weekday{color:var(--pds-color-fg-default-secondary);font-size:.833rem;font-weight:400;opacity:1}.pds-datepicker .rdp-week{border:.25rem solid var(--pds-color-bg-default)}.pds-datepicker .rdp-day{padding-inline:.125rem}.pds-datepicker .rdp-day_button{font-size:.833rem;font-weight:400}.pds-datepicker .rdp-day_button:focus{outline:1px solid var(--pds-color-interactive-focus)}.pds-datepicker .rdp-selected:not(.rdp-range_middle) .rdp-day_button{background-color:var(--pds-color-datepicker-selected-background);border-radius:50%;color:var(--pds-color-datepicker-selected-foreground)}.pds-datepicker .rdp-today .rdp-day_button{border:1px solid var(--pds-color-fg-default-secondary);border-radius:50%;height:calc(var(--day-size) - 1px);width:calc(var(--day-size) - 1px)}.pds-datepicker .rdp-button_next,.pds-datepicker .rdp-button_previous{color:var(--pds-color-fg-default-secondary)}.pds-datepicker .rdp-button_next:hover,.pds-datepicker .rdp-button_previous:hover{color:var(--pds-color-segmented-button-foreground-hover)}.pds-datepicker .rdp-button_next:focus-visible,.pds-datepicker .rdp-button_previous:focus-visible{border-radius:.1875rem;outline:1px solid var(--pds-color-interactive-focus)}@media (max-width:640px){.pds-datepicker__input-wrapper{align-items:stretch;flex-direction:column}.pds-datepicker__presets{width:100%}.pds-datepicker__presets .pds-segmented-button{display:block;margin-inline:-.0125rem;min-width:0;width:100%}.pds-datepicker__presets .pds-segmented-button__options{display:flex;width:100%}.pds-datepicker__presets .pds-segmented-button__option{flex:1;min-width:0}.pds-datepicker__presets .pds-segmented-button__option label{justify-content:center;overflow:hidden;text-overflow:ellipsis;width:100%}.pds-datepicker__presets .pds-segmented-button__option:not(:first-child) label{border-left:0}.pds-datepicker__presets .pds-segmented-button__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-datepicker .rdp-root .rdp-months{flex-direction:column}}
|