@povio/ui 2.2.9-rc.4 → 2.2.9-rc.5
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/DateTime/DatePicker/DatePicker.d.ts +2 -1
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +2 -1
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts +2 -1
- package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts +2 -1
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +3 -2
- package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts +2 -0
- package/dist/components/inputs/Selection/shared/select.context.d.ts +1 -0
- package/dist/components/inputs/Selection/shared/select.context.js +19 -1
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ import { Ref, FocusEvent } from 'react';
|
|
|
3
3
|
import { FieldValues } from 'react-hook-form';
|
|
4
4
|
import { DatePickerStateOptions } from 'react-stately';
|
|
5
5
|
import { DatePickerInputHandle } from '../shared/DatePickerInput';
|
|
6
|
+
import { DatePickerTodayIcon } from '../shared/datePicker.types';
|
|
6
7
|
import { FormFieldProps } from '../../FormField/FormField';
|
|
7
8
|
import { ControlProps } from '../../shared/form.types';
|
|
8
9
|
import { InputVariantProps } from '../../shared/input.cva';
|
|
@@ -11,7 +12,7 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
|
|
|
11
12
|
disableDropdown?: boolean;
|
|
12
13
|
isClearable?: boolean;
|
|
13
14
|
className?: string;
|
|
14
|
-
todayIcon?:
|
|
15
|
+
todayIcon?: DatePickerTodayIcon;
|
|
15
16
|
isDirty?: boolean;
|
|
16
17
|
disableManualEntry?: boolean;
|
|
17
18
|
placeholder?: string;
|
|
@@ -4,6 +4,7 @@ import { DateValue } from 'react-aria';
|
|
|
4
4
|
import { FieldValues } from 'react-hook-form';
|
|
5
5
|
import { DateRangePickerStateOptions } from 'react-stately';
|
|
6
6
|
import { DatePickerInputHandle } from '../shared/DatePickerInput';
|
|
7
|
+
import { DatePickerTodayIcon } from '../shared/datePicker.types';
|
|
7
8
|
import { FormFieldProps } from '../../FormField/FormField';
|
|
8
9
|
import { ControlProps } from '../../shared/form.types';
|
|
9
10
|
import { InputVariantProps } from '../../shared/input.cva';
|
|
@@ -13,7 +14,7 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
|
|
|
13
14
|
isClearable?: boolean;
|
|
14
15
|
hideSidebar?: boolean;
|
|
15
16
|
className?: string;
|
|
16
|
-
todayIcon?:
|
|
17
|
+
todayIcon?: DatePickerTodayIcon;
|
|
17
18
|
isDirty?: boolean;
|
|
18
19
|
disableManualEntry?: boolean;
|
|
19
20
|
placeholder?: string;
|
|
@@ -3,6 +3,7 @@ import { DateValue } from 'react-aria';
|
|
|
3
3
|
import { FieldValues } from 'react-hook-form';
|
|
4
4
|
import { DatePickerStateOptions } from 'react-stately';
|
|
5
5
|
import { DatePickerInputHandle } from '../shared/DatePickerInput';
|
|
6
|
+
import { DatePickerTodayIcon } from '../shared/datePicker.types';
|
|
6
7
|
import { FormFieldProps } from '../../FormField/FormField';
|
|
7
8
|
import { ControlProps } from '../../shared/form.types';
|
|
8
9
|
import { InputVariantProps } from '../../shared/input.cva';
|
|
@@ -11,7 +12,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
|
|
|
11
12
|
disableDropdown?: boolean;
|
|
12
13
|
isTimeOptional?: boolean;
|
|
13
14
|
isClearable?: boolean;
|
|
14
|
-
todayIcon?:
|
|
15
|
+
todayIcon?: DatePickerTodayIcon;
|
|
15
16
|
isDirty?: boolean;
|
|
16
17
|
disableManualEntry?: boolean;
|
|
17
18
|
placeholder?: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Ref } from 'react';
|
|
2
2
|
import { DatePickerAria } from 'react-aria';
|
|
3
|
+
import { DatePickerTodayIcon } from './datePicker.types';
|
|
3
4
|
import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
|
|
4
5
|
import { InputVariantProps } from '../../shared/input.cva';
|
|
5
6
|
export interface DatePickerInputHandle {
|
|
@@ -18,7 +19,7 @@ interface DatePickerInputProps extends InputVariantProps {
|
|
|
18
19
|
isDateTime?: boolean;
|
|
19
20
|
isClearable?: boolean;
|
|
20
21
|
headerProps?: FormFieldHeaderProps;
|
|
21
|
-
todayIcon?:
|
|
22
|
+
todayIcon?: DatePickerTodayIcon;
|
|
22
23
|
isDirty?: boolean;
|
|
23
24
|
isRequired?: boolean;
|
|
24
25
|
disableManualEntry?: boolean;
|
|
@@ -70,6 +70,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
|
|
|
70
70
|
endFieldProps?.onBlur?.(null);
|
|
71
71
|
};
|
|
72
72
|
const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
|
|
73
|
+
const todayIconComponent = todayIcon === true ? TodayIcon : todayIcon || null;
|
|
73
74
|
return /* @__PURE__ */ jsxs("div", {
|
|
74
75
|
ref: containerRef,
|
|
75
76
|
className: clsx(inputBaseCva({
|
|
@@ -108,9 +109,9 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
|
|
|
108
109
|
className: "absolute inset-0 z-0",
|
|
109
110
|
isDisabled
|
|
110
111
|
}),
|
|
111
|
-
|
|
112
|
+
todayIconComponent && /* @__PURE__ */ jsx(IconButton, {
|
|
112
113
|
label: "",
|
|
113
|
-
icon:
|
|
114
|
+
icon: todayIconComponent,
|
|
114
115
|
size: "none",
|
|
115
116
|
onPress: onToday,
|
|
116
117
|
className: "relative z-1"
|
|
@@ -84,7 +84,7 @@ var SelectContext;
|
|
|
84
84
|
else updateValue(value);
|
|
85
85
|
}, [props.value]);
|
|
86
86
|
useEffect(() => {
|
|
87
|
-
if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
|
|
87
|
+
if (!isMultiple && props.value !== null && props.value !== void 0 && fieldState.value !== null && fieldState.value !== void 0 && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
|
|
88
88
|
}, [allListItems]);
|
|
89
89
|
const handleInputChange = useCallback((inputValue) => {
|
|
90
90
|
const newFieldState = {
|
|
@@ -144,6 +144,22 @@ var SelectContext;
|
|
|
144
144
|
fieldState.value,
|
|
145
145
|
onChange
|
|
146
146
|
]);
|
|
147
|
+
const onBlur = useCallback(() => {
|
|
148
|
+
if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
|
|
149
|
+
const newFieldState = {
|
|
150
|
+
...fieldState,
|
|
151
|
+
inputValue: "",
|
|
152
|
+
searchValue: ""
|
|
153
|
+
};
|
|
154
|
+
setFieldState(newFieldState);
|
|
155
|
+
emitStateChanges(newFieldState);
|
|
156
|
+
setShowAll(true);
|
|
157
|
+
}
|
|
158
|
+
}, [
|
|
159
|
+
props.isSearchable,
|
|
160
|
+
isMultiple,
|
|
161
|
+
fieldState
|
|
162
|
+
]);
|
|
147
163
|
const value = useMemo(() => ({
|
|
148
164
|
fieldState,
|
|
149
165
|
isOpen,
|
|
@@ -154,6 +170,7 @@ var SelectContext;
|
|
|
154
170
|
onClear,
|
|
155
171
|
onSelectAll,
|
|
156
172
|
onRemove,
|
|
173
|
+
onBlur,
|
|
157
174
|
listItems,
|
|
158
175
|
selectableListItems,
|
|
159
176
|
selectedItems,
|
|
@@ -171,6 +188,7 @@ var SelectContext;
|
|
|
171
188
|
onClear,
|
|
172
189
|
onSelectAll,
|
|
173
190
|
onRemove,
|
|
191
|
+
onBlur,
|
|
174
192
|
listItems,
|
|
175
193
|
selectableListItems,
|
|
176
194
|
selectedIds,
|