@aivenio/aquarium 4.2.0 → 4.3.0
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/src/atoms/DatePicker/DatePicker.d.ts +80 -29
- package/dist/src/atoms/DatePicker/DatePicker.js +44 -3
- package/dist/src/molecules/DatePicker/DatePicker.d.ts +8 -2
- package/dist/src/molecules/DatePicker/DatePicker.js +9 -8
- package/dist/src/molecules/DatePicker/DateRangePicker.d.ts +12 -2
- package/dist/src/molecules/DatePicker/DateRangePicker.js +9 -8
- package/dist/src/molecules/Spacing/Spacing.d.ts +1 -1
- package/dist/src/molecules/Spacing/Spacing.js +1 -1
- package/dist/styles.css +6 -0
- package/dist/system.cjs +61 -10
- package/dist/system.mjs +71 -17
- package/dist/tsconfig.module.tsbuildinfo +1 -1
- package/dist/types/tailwindGenerated.d.ts +1 -1
- package/package.json +1 -1
@@ -1,50 +1,87 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { type DatePickerProps as AriaDatePickerProps, type DateRangePickerProps as AriaDateRangePickerProps, type DateValue as AriaDateValue } from 'react-aria-components';
|
3
3
|
export declare const datePickerCalendarStyles: import("tailwind-variants").TVReturnType<{
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
errorMessage?: import("tailwind-merge").ClassNameValue;
|
4
|
+
isPresetActive: {
|
5
|
+
true: {
|
6
|
+
preset: string;
|
8
7
|
};
|
9
|
-
|
10
|
-
|
11
|
-
[x: string]: {
|
12
|
-
[x: string]: import("tailwind-merge").ClassNameValue | {
|
13
|
-
dialog?: import("tailwind-merge").ClassNameValue;
|
14
|
-
errorMessage?: import("tailwind-merge").ClassNameValue;
|
8
|
+
false: {
|
9
|
+
preset: string;
|
15
10
|
};
|
16
11
|
};
|
17
|
-
}
|
12
|
+
}, {
|
18
13
|
dialog: string;
|
14
|
+
calendar: string;
|
19
15
|
errorMessage: string;
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
16
|
+
presets: string;
|
17
|
+
preset: string;
|
18
|
+
}, undefined, import("tailwind-variants/dist/config").TVConfig<{
|
19
|
+
isPresetActive: {
|
20
|
+
true: {
|
21
|
+
preset: string;
|
22
|
+
};
|
23
|
+
false: {
|
24
|
+
preset: string;
|
25
|
+
};
|
26
|
+
};
|
27
|
+
}, {
|
28
|
+
isPresetActive: {
|
29
|
+
true: {
|
30
|
+
preset: string;
|
31
|
+
};
|
32
|
+
false: {
|
33
|
+
preset: string;
|
25
34
|
};
|
26
35
|
};
|
27
|
-
}
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
36
|
+
}>, {
|
37
|
+
isPresetActive: {
|
38
|
+
true: {
|
39
|
+
preset: string;
|
40
|
+
};
|
41
|
+
false: {
|
42
|
+
preset: string;
|
32
43
|
};
|
33
44
|
};
|
34
|
-
}
|
45
|
+
}, {
|
35
46
|
dialog: string;
|
47
|
+
calendar: string;
|
36
48
|
errorMessage: string;
|
37
|
-
|
49
|
+
presets: string;
|
50
|
+
preset: string;
|
51
|
+
}, import("tailwind-variants").TVReturnType<{
|
52
|
+
isPresetActive: {
|
53
|
+
true: {
|
54
|
+
preset: string;
|
55
|
+
};
|
56
|
+
false: {
|
57
|
+
preset: string;
|
58
|
+
};
|
59
|
+
};
|
60
|
+
}, {
|
38
61
|
dialog: string;
|
62
|
+
calendar: string;
|
39
63
|
errorMessage: string;
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
64
|
+
presets: string;
|
65
|
+
preset: string;
|
66
|
+
}, undefined, import("tailwind-variants/dist/config").TVConfig<{
|
67
|
+
isPresetActive: {
|
68
|
+
true: {
|
69
|
+
preset: string;
|
70
|
+
};
|
71
|
+
false: {
|
72
|
+
preset: string;
|
73
|
+
};
|
74
|
+
};
|
75
|
+
}, {
|
76
|
+
isPresetActive: {
|
77
|
+
true: {
|
78
|
+
preset: string;
|
79
|
+
};
|
80
|
+
false: {
|
81
|
+
preset: string;
|
45
82
|
};
|
46
83
|
};
|
47
|
-
}
|
84
|
+
}>, unknown, unknown, undefined>>;
|
48
85
|
export type DatePickerProps<T extends AriaDateValue> = AriaDatePickerProps<T> & {
|
49
86
|
variant: 'date' | 'datetime';
|
50
87
|
};
|
@@ -53,3 +90,17 @@ export type DateRangePickerProps<T extends AriaDateValue> = AriaDateRangePickerP
|
|
53
90
|
variant: 'date' | 'datetime';
|
54
91
|
};
|
55
92
|
export declare const DateRangePicker: <T extends AriaDateValue>({ variant, ...props }: DateRangePickerProps<T>) => React.JSX.Element;
|
93
|
+
export declare const Presets: ({ children }: React.PropsWithChildren) => React.JSX.Element;
|
94
|
+
export type PresetProps = {
|
95
|
+
value: AriaDateValue;
|
96
|
+
label: React.ReactNode;
|
97
|
+
};
|
98
|
+
export declare const Preset: ({ value, label }: PresetProps) => React.JSX.Element;
|
99
|
+
export type RangePresetProps = {
|
100
|
+
value: {
|
101
|
+
start: AriaDateValue;
|
102
|
+
end: AriaDateValue;
|
103
|
+
};
|
104
|
+
label: React.ReactNode;
|
105
|
+
};
|
106
|
+
export declare const RangePreset: ({ value, label }: RangePresetProps) => React.JSX.Element;
|
@@ -10,12 +10,25 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
10
10
|
return t;
|
11
11
|
};
|
12
12
|
import React from 'react';
|
13
|
-
import { DatePicker as AriaDatePicker, DateRangePicker as AriaDateRangePicker, } from 'react-aria-components';
|
13
|
+
import { Button as AriaButton, DatePicker as AriaDatePicker, DatePickerStateContext as AriaDatePickerStateContext, DateRangePicker as AriaDateRangePicker, DateRangePickerStateContext as AriaDateRangePickerStateContext, } from 'react-aria-components';
|
14
14
|
import { tv } from 'tailwind-variants';
|
15
15
|
export const datePickerCalendarStyles = tv({
|
16
16
|
slots: {
|
17
|
-
dialog: '
|
17
|
+
dialog: 'flex',
|
18
|
+
calendar: '[[data-placement]>&]:px-5 [[data-placement]>&]:py-6 max-h-[inherit]',
|
18
19
|
errorMessage: 'typography-caption text-danger-default max-w-[300px]',
|
20
|
+
presets: 'bg-muted py-6 px-5 flex flex-col min-w-[150px] max-w-[300px] self-stretch',
|
21
|
+
preset: 'hover:text-primary-active p-3 text-left hover:underline',
|
22
|
+
},
|
23
|
+
variants: {
|
24
|
+
isPresetActive: {
|
25
|
+
true: {
|
26
|
+
preset: 'text-primary-active typography-small-strong',
|
27
|
+
},
|
28
|
+
false: {
|
29
|
+
preset: 'typography-small',
|
30
|
+
},
|
31
|
+
},
|
19
32
|
},
|
20
33
|
});
|
21
34
|
export const DatePicker = (_a) => {
|
@@ -36,4 +49,32 @@ export const DateRangePicker = (_a) => {
|
|
36
49
|
// This will display the time component in the picker by default in <DateTimePicker>.
|
37
50
|
granularity: (_e = props.granularity) !== null && _e !== void 0 ? _e : (variant === 'datetime' && !hasSomeValue ? 'minute' : undefined) })));
|
38
51
|
};
|
39
|
-
|
52
|
+
export const Presets = ({ children }) => {
|
53
|
+
const { presets } = datePickerCalendarStyles();
|
54
|
+
return React.createElement("div", { className: presets() }, children);
|
55
|
+
};
|
56
|
+
export const Preset = ({ value, label }) => {
|
57
|
+
var _a;
|
58
|
+
const { preset } = datePickerCalendarStyles();
|
59
|
+
const context = React.useContext(AriaDatePickerStateContext);
|
60
|
+
const handlePress = () => {
|
61
|
+
context === null || context === void 0 ? void 0 : context.setValue(value);
|
62
|
+
context === null || context === void 0 ? void 0 : context.close();
|
63
|
+
};
|
64
|
+
const isActive = (context === null || context === void 0 ? void 0 : context.value) !== undefined && ((_a = context.value) === null || _a === void 0 ? void 0 : _a.toString()) === value.toString();
|
65
|
+
return (React.createElement(AriaButton, { onPress: handlePress, className: preset({ isPresetActive: isActive }) }, label));
|
66
|
+
};
|
67
|
+
export const RangePreset = ({ value, label }) => {
|
68
|
+
var _a, _b;
|
69
|
+
const { preset } = datePickerCalendarStyles();
|
70
|
+
const context = React.useContext(AriaDateRangePickerStateContext);
|
71
|
+
const handlePress = () => {
|
72
|
+
context === null || context === void 0 ? void 0 : context.setValue(value);
|
73
|
+
context === null || context === void 0 ? void 0 : context.close();
|
74
|
+
};
|
75
|
+
const isActive = (context === null || context === void 0 ? void 0 : context.value) !== undefined &&
|
76
|
+
((_a = context.value.start) === null || _a === void 0 ? void 0 : _a.toString()) === value.start.toString() &&
|
77
|
+
((_b = context.value.end) === null || _b === void 0 ? void 0 : _b.toString()) === value.end.toString();
|
78
|
+
return (React.createElement(AriaButton, { onPress: handlePress, className: preset({ isPresetActive: isActive }) }, label));
|
79
|
+
};
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0ZVBpY2tlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9EYXRlUGlja2VyL0RhdGVQaWNrZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFDTCxNQUFNLElBQUksVUFBVSxFQUNwQixVQUFVLElBQUksY0FBYyxFQUU1QixzQkFBc0IsSUFBSSwwQkFBMEIsRUFDcEQsZUFBZSxJQUFJLG1CQUFtQixFQUV0QywyQkFBMkIsSUFBSSwrQkFBK0IsR0FFL0QsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFFdkMsTUFBTSxDQUFDLE1BQU0sd0JBQXdCLEdBQUcsRUFBRSxDQUFDO0lBQ3pDLEtBQUssRUFBRTtRQUNMLE1BQU0sRUFBRSxNQUFNO1FBQ2QsUUFBUSxFQUFFLHFFQUFxRTtRQUMvRSxZQUFZLEVBQUUsc0RBQXNEO1FBQ3BFLE9BQU8sRUFBRSwyRUFBMkU7UUFDcEYsTUFBTSxFQUFFLHlEQUF5RDtLQUNsRTtJQUNELFFBQVEsRUFBRTtRQUNSLGNBQWMsRUFBRTtZQUNkLElBQUksRUFBRTtnQkFDSixNQUFNLEVBQUUsNkNBQTZDO2FBQ3REO1lBQ0QsS0FBSyxFQUFFO2dCQUNMLE1BQU0sRUFBRSxrQkFBa0I7YUFDM0I7U0FDRjtLQUNGO0NBQ0YsQ0FBQyxDQUFDO0FBSUgsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLENBQTBCLEVBQXlDLEVBQUUsRUFBRTs7UUFBN0MsRUFBRSxPQUFPLE9BQWdDLEVBQTNCLEtBQUssY0FBbkIsV0FBcUIsQ0FBRjtJQUNyRSxNQUFNLFlBQVksR0FBRyxNQUFBLE1BQUEsS0FBSyxDQUFDLEtBQUssbUNBQUksS0FBSyxDQUFDLFlBQVksbUNBQUksS0FBSyxDQUFDLGdCQUFnQixDQUFDO0lBRWpGLE9BQU8sQ0FD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
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { type DatePickerProps as AriaDatePickerProps, type DateValue } from 'react-aria-components';
|
3
|
+
import { type PresetProps } from '../../../src/atoms/DatePicker/DatePicker';
|
3
4
|
import { type LabelControlProps } from '../../../src/utils/form/Label/Label';
|
4
5
|
import type { Granularity } from '@react-types/datepicker';
|
5
6
|
export type DatePickerBaseProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'isRequired' | 'pageBehavior' | 'slot' | 'style' | 'validate' | 'validationBehavior'> & {
|
@@ -11,18 +12,23 @@ export type DatePickerBaseProps<T extends DateValue> = Omit<AriaDatePickerProps<
|
|
11
12
|
* @default true
|
12
13
|
*/
|
13
14
|
clearSelectionEnabled?: boolean;
|
15
|
+
/**
|
16
|
+
* Optional array of preset values to display in the calendar.
|
17
|
+
*/
|
18
|
+
presets?: PresetProps[];
|
14
19
|
};
|
15
20
|
type DatePickerCalendarProps = {
|
16
21
|
variant: 'date' | 'datetime';
|
17
22
|
granularity?: Granularity;
|
18
23
|
errorMessage?: string;
|
24
|
+
presets?: PresetProps[];
|
19
25
|
};
|
20
26
|
type DatePickerFieldProps = {
|
21
27
|
clearSelectionEnabled?: boolean;
|
22
28
|
disabled?: boolean;
|
23
29
|
};
|
24
30
|
export declare const DatePickerBase: {
|
25
|
-
<T extends DateValue>({ disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled, children, ...props }: React.PropsWithChildren<DatePickerBaseProps<T>>): React.JSX.Element;
|
31
|
+
<T extends DateValue>({ disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled, presets, children, ...props }: React.PropsWithChildren<DatePickerBaseProps<T>>): React.JSX.Element;
|
26
32
|
Calendar: {
|
27
33
|
(props: Partial<DatePickerCalendarProps>): React.JSX.Element;
|
28
34
|
displayName: string;
|
@@ -34,7 +40,7 @@ export declare const DatePickerBase: {
|
|
34
40
|
displayName: string;
|
35
41
|
};
|
36
42
|
export declare const DateTimePickerBase: {
|
37
|
-
<T extends DateValue>({ disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled, children, ...props }: React.PropsWithChildren<DatePickerBaseProps<T>>): React.JSX.Element;
|
43
|
+
<T extends DateValue>({ disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled, presets, children, ...props }: React.PropsWithChildren<DatePickerBaseProps<T>>): React.JSX.Element;
|
38
44
|
Calendar: {
|
39
45
|
(props: Partial<DatePickerCalendarProps>): React.JSX.Element;
|
40
46
|
displayName: string;
|
@@ -19,7 +19,7 @@ import { Spacing } from '../../../src/molecules/Spacing/Spacing';
|
|
19
19
|
import { TimeField } from '../../../src/molecules/TimeField/TimeField';
|
20
20
|
import { DateInput } from '../../../src/atoms/DateField/DateField';
|
21
21
|
import { Calendar } from '../../../src/atoms/DatePicker/Calendar';
|
22
|
-
import { DatePicker as DatePickerAtom, datePickerCalendarStyles } from '../../../src/atoms/DatePicker/DatePicker';
|
22
|
+
import { DatePicker as DatePickerAtom, datePickerCalendarStyles, Preset, Presets, } from '../../../src/atoms/DatePicker/DatePicker';
|
23
23
|
import { CalendarButton, ClearInputButton } from '../../../src/atoms/DatePicker/DatePickerButton';
|
24
24
|
import { Dialog } from '../../../src/atoms/Dialog/Dialog';
|
25
25
|
import { FieldGroup } from '../../../src/atoms/Field/Field';
|
@@ -47,12 +47,13 @@ const CalendarTimeField = (_a) => {
|
|
47
47
|
const DatePickerCalendarPropsContext = React.createContext(null);
|
48
48
|
const DatePickerCalendar = (props) => {
|
49
49
|
const ctx = React.useContext(DatePickerCalendarPropsContext);
|
50
|
-
const { variant, granularity, errorMessage } = mergeProps(ctx, props);
|
51
|
-
const { dialog, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
|
50
|
+
const { variant, granularity, errorMessage, presets = [] } = mergeProps(ctx, props);
|
51
|
+
const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
|
52
52
|
return (React.createElement(Popover, { offset: 0 },
|
53
53
|
React.createElement(Dialog, { className: dialog() },
|
54
|
-
React.createElement(
|
55
|
-
|
54
|
+
presets.length > 0 && (React.createElement(Presets, null, presets.map((props) => (React.createElement(Preset, Object.assign({ key: props.value.toString() }, props)))))),
|
55
|
+
React.createElement(Spacing, { gap: "3", className: tw('p-5') },
|
56
|
+
React.createElement(Calendar, { className: calendar() }),
|
56
57
|
variant === 'datetime' && React.createElement(CalendarTimeField, { granularity: granularity }),
|
57
58
|
errorMessage && (React.createElement(Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))))));
|
58
59
|
};
|
@@ -67,11 +68,11 @@ const DatePickerField = ({ clearSelectionEnabled = true, disabled = false }) =>
|
|
67
68
|
DatePickerField.displayName = 'DatePicker.Field';
|
68
69
|
const createDatePickerBase = (variant) => {
|
69
70
|
const datePicker = (_a) => {
|
70
|
-
var { disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled = true, children } = _a, props = __rest(_a, ["disabled", "valid", "shouldCloseOnSelect", "errorMessage", "clearSelectionEnabled", "children"]);
|
71
|
+
var { disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled = true, presets, children } = _a, props = __rest(_a, ["disabled", "valid", "shouldCloseOnSelect", "errorMessage", "clearSelectionEnabled", "presets", "children"]);
|
71
72
|
const content = children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
|
72
73
|
React.createElement(DatePickerField, { clearSelectionEnabled: clearSelectionEnabled, disabled: disabled }),
|
73
74
|
React.createElement(DatePickerCalendar, null)));
|
74
|
-
return (React.createElement(DatePickerCalendarPropsContext.Provider, { value: { variant, granularity: props.granularity, errorMessage } },
|
75
|
+
return (React.createElement(DatePickerCalendarPropsContext.Provider, { value: { variant, granularity: props.granularity, errorMessage, presets } },
|
75
76
|
React.createElement(DatePickerAtom, Object.assign({}, props, { variant: variant, isDisabled: disabled, isInvalid: valid === false }), content)));
|
76
77
|
};
|
77
78
|
datePicker.Calendar = DatePickerCalendar;
|
@@ -104,4 +105,4 @@ const createDatePicker = (variant) => {
|
|
104
105
|
};
|
105
106
|
export const DatePicker = createDatePicker('date');
|
106
107
|
export const DateTimePicker = createDatePicker('datetime');
|
107
|
-
//# sourceMappingURL=data:application/json;base64,
|
108
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0ZVBpY2tlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvRGF0ZVBpY2tlci9EYXRlUGlja2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBRUwsc0JBQXNCLEVBRXRCLElBQUksR0FDTCxNQUFNLHVCQUF1QixDQUFDO0FBQy9CLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUM3QyxPQUFPLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFFakMsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzVDLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFFOUQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQzFELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUN6RCxPQUFPLEVBQ0wsVUFBVSxJQUFJLGNBQWMsRUFDNUIsd0JBQXdCLEVBQ3hCLE1BQU0sRUFFTixPQUFPLEdBQ1IsTUFBTSxpQ0FBaUMsQ0FBQztBQUN6QyxPQUFPLEVBQUUsY0FBYyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDekYsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ2pELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFcEQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFlBQVksRUFBMEIs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
|
@@ -1,24 +1,34 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { type DateRangePickerProps as AriaDateRangePickerProps, type DateValue } from 'react-aria-components';
|
3
|
+
import { type RangePresetProps } from '../../../src/atoms/DatePicker/DatePicker';
|
3
4
|
import { type LabelControlProps } from '../../../src/utils/form/Label/Label';
|
4
5
|
import type { Granularity } from '@react-types/datepicker';
|
5
6
|
export type DateRangePickerBaseProps<T extends DateValue> = Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'isRequired' | 'pageBehavior' | 'slot' | 'style' | 'validate' | 'validationBehavior'> & {
|
6
7
|
disabled?: boolean;
|
7
8
|
valid?: boolean;
|
8
9
|
errorMessage?: string;
|
10
|
+
/**
|
11
|
+
* If true, users can use "x" button to clear the selection.
|
12
|
+
* @default true
|
13
|
+
*/
|
9
14
|
clearSelectionEnabled?: boolean;
|
15
|
+
/**
|
16
|
+
* Optional array of preset values to display in the calendar.
|
17
|
+
*/
|
18
|
+
presets?: RangePresetProps[];
|
10
19
|
};
|
11
20
|
type DateRangePickerCalendarProps = {
|
12
21
|
variant: 'date' | 'datetime';
|
13
22
|
granularity?: Granularity;
|
14
23
|
errorMessage?: string;
|
24
|
+
presets?: RangePresetProps[];
|
15
25
|
};
|
16
26
|
type DateRangePickerFieldProps = {
|
17
27
|
clearSelectionEnabled?: boolean;
|
18
28
|
disabled?: boolean;
|
19
29
|
};
|
20
30
|
export declare const DateRangePickerBase: {
|
21
|
-
<T extends DateValue>({ disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled, children, ...props }: React.PropsWithChildren<DateRangePickerBaseProps<T>>): React.JSX.Element;
|
31
|
+
<T extends DateValue>({ disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled, presets, children, ...props }: React.PropsWithChildren<DateRangePickerBaseProps<T>>): React.JSX.Element;
|
22
32
|
Calendar: {
|
23
33
|
(props: Partial<DateRangePickerCalendarProps>): React.JSX.Element;
|
24
34
|
displayName: string;
|
@@ -30,7 +40,7 @@ export declare const DateRangePickerBase: {
|
|
30
40
|
displayName: string;
|
31
41
|
};
|
32
42
|
export declare const DateTimeRangePickerBase: {
|
33
|
-
<T extends DateValue>({ disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled, children, ...props }: React.PropsWithChildren<DateRangePickerBaseProps<T>>): React.JSX.Element;
|
43
|
+
<T extends DateValue>({ disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled, presets, children, ...props }: React.PropsWithChildren<DateRangePickerBaseProps<T>>): React.JSX.Element;
|
34
44
|
Calendar: {
|
35
45
|
(props: Partial<DateRangePickerCalendarProps>): React.JSX.Element;
|
36
46
|
displayName: string;
|
@@ -18,7 +18,7 @@ import { Box } from '../../../src/molecules/Box/Box';
|
|
18
18
|
import { Spacing } from '../../../src/molecules/Spacing/Spacing';
|
19
19
|
import { TimeField } from '../../../src/molecules/TimeField/TimeField';
|
20
20
|
import { DateInput } from '../../../src/atoms/DateField/DateField';
|
21
|
-
import { datePickerCalendarStyles, DateRangePicker as DateRangePickerAtom } from '../../../src/atoms/DatePicker/DatePicker';
|
21
|
+
import { datePickerCalendarStyles, DateRangePicker as DateRangePickerAtom, Presets, RangePreset, } from '../../../src/atoms/DatePicker/DatePicker';
|
22
22
|
import { CalendarButton, ClearInputButton } from '../../../src/atoms/DatePicker/DatePickerButton';
|
23
23
|
import { RangeCalendar } from '../../../src/atoms/DatePicker/RangeCalendar';
|
24
24
|
import { Dialog } from '../../../src/atoms/Dialog/Dialog';
|
@@ -48,12 +48,13 @@ const RangeCalendarTimeField = (_a) => {
|
|
48
48
|
const DateRangePickerCalendarPropsContext = React.createContext(null);
|
49
49
|
const DateRangePickerCalendar = (props) => {
|
50
50
|
const ctx = React.useContext(DateRangePickerCalendarPropsContext);
|
51
|
-
const { variant, granularity, errorMessage } = mergeProps(ctx, props);
|
52
|
-
const { dialog, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
|
51
|
+
const { variant, granularity, errorMessage, presets = [] } = mergeProps(ctx, props);
|
52
|
+
const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
|
53
53
|
return (React.createElement(Popover, { offset: 0 },
|
54
54
|
React.createElement(Dialog, { className: dialog() },
|
55
|
-
React.createElement(
|
56
|
-
|
55
|
+
presets.length > 0 && (React.createElement(Presets, null, presets.map((props) => (React.createElement(RangePreset, Object.assign({ key: `${props.value.start.toString()}-${props.value.end.toString()}` }, props)))))),
|
56
|
+
React.createElement(Spacing, { gap: "3", className: tw('p-5') },
|
57
|
+
React.createElement(RangeCalendar, { className: calendar() }),
|
57
58
|
variant === 'datetime' && (React.createElement(Box.Flex, { gap: "6" },
|
58
59
|
React.createElement("div", { className: tw('flex-1') },
|
59
60
|
React.createElement(RangeCalendarTimeField, { granularity: granularity, part: "start" })),
|
@@ -74,11 +75,11 @@ const DateRangePickerField = ({ clearSelectionEnabled = true, disabled = false }
|
|
74
75
|
DateRangePickerField.displayName = 'DateRangePicker.Field';
|
75
76
|
const createDateRangePickerBase = (variant) => {
|
76
77
|
const dateRangePicker = (_a) => {
|
77
|
-
var { disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled = true, children } = _a, props = __rest(_a, ["disabled", "valid", "shouldCloseOnSelect", "errorMessage", "clearSelectionEnabled", "children"]);
|
78
|
+
var { disabled, valid, shouldCloseOnSelect, errorMessage, clearSelectionEnabled = true, presets, children } = _a, props = __rest(_a, ["disabled", "valid", "shouldCloseOnSelect", "errorMessage", "clearSelectionEnabled", "presets", "children"]);
|
78
79
|
const content = children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
|
79
80
|
React.createElement(DateRangePickerField, { clearSelectionEnabled: clearSelectionEnabled, disabled: disabled }),
|
80
81
|
React.createElement(DateRangePickerCalendar, { variant: variant, granularity: props.granularity, errorMessage: errorMessage })));
|
81
|
-
return (React.createElement(DateRangePickerCalendarPropsContext.Provider, { value: { variant, granularity: props.granularity, errorMessage } },
|
82
|
+
return (React.createElement(DateRangePickerCalendarPropsContext.Provider, { value: { variant, granularity: props.granularity, errorMessage, presets } },
|
82
83
|
React.createElement(DateRangePickerAtom, Object.assign({}, props, { variant: variant, isDisabled: disabled, isInvalid: valid === false }), content)));
|
83
84
|
};
|
84
85
|
dateRangePicker.Calendar = DateRangePickerCalendar;
|
@@ -111,4 +112,4 @@ const createDateRangePicker = (variant) => {
|
|
111
112
|
};
|
112
113
|
export const DateRangePicker = createDateRangePicker('date');
|
113
114
|
export const DateTimeRangePicker = createDateRangePicker('datetime');
|
114
|
-
//# sourceMappingURL=data:application/json;base64,
|
115
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0ZVJhbmdlUGlja2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL21vbGVjdWxlcy9EYXRlUGlja2VyL0RhdGVSYW5nZVBpY2tlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUVMLDJCQUEyQixFQUUzQixJQUFJLEdBQ0wsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDN0MsT0FBTyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBRWpDLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDeEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBRTlELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUMxRCxPQUFPLEVBQ0wsd0JBQXdCLEVBQ3hCLGVBQWUsSUFBSSxtQkFBbUIsRUFDdEMsT0FBTyxFQUNQLFdBQVcsR0FFWixNQUFNLGlDQUFpQyxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxjQUFjLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUN6RixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDbkUsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ2pELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFcEQsT0FBTyxFQUFFLG9CQUFvQixFQUFF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
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { type BoxProps } from '../../../src/molecules/Box/Box';
|
3
3
|
import type twTheme from '../../../tailwind.theme.json';
|
4
|
-
export type SpacingProps = Pick<BoxProps, 'alignContent' | 'alignItems' | 'alignSelf' | 'justifyContent' | 'style'> & {
|
4
|
+
export type SpacingProps = Pick<BoxProps, 'alignContent' | 'alignItems' | 'alignSelf' | 'className' | 'justifyContent' | 'style'> & {
|
5
5
|
/**
|
6
6
|
* Gap between children elements.
|
7
7
|
*/
|
@@ -15,4 +15,4 @@ export const Spacing = (_a) => {
|
|
15
15
|
var { gap, row } = _a, rest = __rest(_a, ["gap", "row"]);
|
16
16
|
return React.createElement(Box, Object.assign({}, rest, { display: "flex", flexDirection: row ? 'row' : 'column', gap: gap }));
|
17
17
|
};
|
18
|
-
//# sourceMappingURL=data:application/json;base64,
|
18
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2luZy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU3BhY2luZy9TcGFjaW5nLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsR0FBRyxFQUFpQixNQUFNLHVCQUF1QixDQUFDO0FBa0IzRCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQTZELENBQUMsRUFBcUIsRUFBRSxFQUFFO1FBQXpCLEVBQUUsR0FBRyxFQUFFLEdBQUcsT0FBVyxFQUFOLElBQUksY0FBbkIsY0FBcUIsQ0FBRjtJQUNuRyxPQUFPLG9CQUFDLEdBQUcsb0JBQUssSUFBSSxJQUFFLE9BQU8sRUFBQyxNQUFNLEVBQUMsYUFBYSxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxRQUFRLEVBQUUsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDO0FBQzNGLENBQUMsQ0FBQyJ9
|
package/dist/styles.css
CHANGED
@@ -1412,6 +1412,9 @@ input[type='number'].no-arrows {
|
|
1412
1412
|
.min-w-0{
|
1413
1413
|
min-width: 0px;
|
1414
1414
|
}
|
1415
|
+
.min-w-\[150px\]{
|
1416
|
+
min-width: 150px;
|
1417
|
+
}
|
1415
1418
|
.min-w-\[200px\]{
|
1416
1419
|
min-width: 200px;
|
1417
1420
|
}
|
@@ -1705,6 +1708,9 @@ input[type='number'].no-arrows {
|
|
1705
1708
|
.self-center{
|
1706
1709
|
align-self: center;
|
1707
1710
|
}
|
1711
|
+
.self-stretch{
|
1712
|
+
align-self: stretch;
|
1713
|
+
}
|
1708
1714
|
.justify-self-center{
|
1709
1715
|
justify-self: center;
|
1710
1716
|
}
|
package/dist/system.cjs
CHANGED
@@ -12388,8 +12388,21 @@ var import_react_aria_components9 = require("react-aria-components");
|
|
12388
12388
|
var import_tailwind_variants11 = require("tailwind-variants");
|
12389
12389
|
var datePickerCalendarStyles = (0, import_tailwind_variants11.tv)({
|
12390
12390
|
slots: {
|
12391
|
-
dialog: "
|
12392
|
-
|
12391
|
+
dialog: "flex",
|
12392
|
+
calendar: "[[data-placement]>&]:px-5 [[data-placement]>&]:py-6 max-h-[inherit]",
|
12393
|
+
errorMessage: "typography-caption text-danger-default max-w-[300px]",
|
12394
|
+
presets: "bg-muted py-6 px-5 flex flex-col min-w-[150px] max-w-[300px] self-stretch",
|
12395
|
+
preset: "hover:text-primary-active p-3 text-left hover:underline"
|
12396
|
+
},
|
12397
|
+
variants: {
|
12398
|
+
isPresetActive: {
|
12399
|
+
true: {
|
12400
|
+
preset: "text-primary-active typography-small-strong"
|
12401
|
+
},
|
12402
|
+
false: {
|
12403
|
+
preset: "typography-small"
|
12404
|
+
}
|
12405
|
+
}
|
12393
12406
|
}
|
12394
12407
|
});
|
12395
12408
|
var DatePicker = ({ variant, ...props }) => {
|
@@ -12414,6 +12427,30 @@ var DateRangePicker = ({ variant, ...props }) => {
|
|
12414
12427
|
}
|
12415
12428
|
);
|
12416
12429
|
};
|
12430
|
+
var Presets = ({ children }) => {
|
12431
|
+
const { presets } = datePickerCalendarStyles();
|
12432
|
+
return /* @__PURE__ */ import_react93.default.createElement("div", { className: presets() }, children);
|
12433
|
+
};
|
12434
|
+
var Preset = ({ value, label }) => {
|
12435
|
+
const { preset } = datePickerCalendarStyles();
|
12436
|
+
const context2 = import_react93.default.useContext(import_react_aria_components9.DatePickerStateContext);
|
12437
|
+
const handlePress = () => {
|
12438
|
+
context2?.setValue(value);
|
12439
|
+
context2?.close();
|
12440
|
+
};
|
12441
|
+
const isActive = context2?.value !== void 0 && context2.value?.toString() === value.toString();
|
12442
|
+
return /* @__PURE__ */ import_react93.default.createElement(import_react_aria_components9.Button, { onPress: handlePress, className: preset({ isPresetActive: isActive }) }, label);
|
12443
|
+
};
|
12444
|
+
var RangePreset = ({ value, label }) => {
|
12445
|
+
const { preset } = datePickerCalendarStyles();
|
12446
|
+
const context2 = import_react93.default.useContext(import_react_aria_components9.DateRangePickerStateContext);
|
12447
|
+
const handlePress = () => {
|
12448
|
+
context2?.setValue(value);
|
12449
|
+
context2?.close();
|
12450
|
+
};
|
12451
|
+
const isActive = context2?.value !== void 0 && context2.value.start?.toString() === value.start.toString() && context2.value.end?.toString() === value.end.toString();
|
12452
|
+
return /* @__PURE__ */ import_react93.default.createElement(import_react_aria_components9.Button, { onPress: handlePress, className: preset({ isPresetActive: isActive }) }, label);
|
12453
|
+
};
|
12417
12454
|
|
12418
12455
|
// src/atoms/Dialog/Dialog.tsx
|
12419
12456
|
var import_react94 = __toESM(require("react"));
|
@@ -14943,9 +14980,9 @@ var CalendarTimeField = ({ granularity, labelText = "Time", ...props }) => {
|
|
14943
14980
|
var DatePickerCalendarPropsContext = import_react95.default.createContext(null);
|
14944
14981
|
var DatePickerCalendar = (props) => {
|
14945
14982
|
const ctx = import_react95.default.useContext(DatePickerCalendarPropsContext);
|
14946
|
-
const { variant, granularity, errorMessage } = (0, import_utils24.mergeProps)(ctx, props);
|
14947
|
-
const { dialog, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
|
14948
|
-
return /* @__PURE__ */ import_react95.default.createElement(Popover, { offset: 0 }, /* @__PURE__ */ import_react95.default.createElement(Dialog, { className: dialog() }, /* @__PURE__ */ import_react95.default.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ import_react95.default.createElement(Calendar,
|
14983
|
+
const { variant, granularity, errorMessage, presets = [] } = (0, import_utils24.mergeProps)(ctx, props);
|
14984
|
+
const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
|
14985
|
+
return /* @__PURE__ */ import_react95.default.createElement(Popover, { offset: 0 }, /* @__PURE__ */ import_react95.default.createElement(Dialog, { className: dialog() }, presets.length > 0 && /* @__PURE__ */ import_react95.default.createElement(Presets, null, presets.map((props2) => /* @__PURE__ */ import_react95.default.createElement(Preset, { key: props2.value.toString(), ...props2 }))), /* @__PURE__ */ import_react95.default.createElement(Spacing, { gap: "3", className: tw("p-5") }, /* @__PURE__ */ import_react95.default.createElement(Calendar, { className: calendar() }), variant === "datetime" && /* @__PURE__ */ import_react95.default.createElement(CalendarTimeField, { granularity }), errorMessage && /* @__PURE__ */ import_react95.default.createElement(import_react_aria_components11.Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
|
14949
14986
|
};
|
14950
14987
|
DatePickerCalendar.displayName = "DatePicker.Calendar";
|
14951
14988
|
var DatePickerField = ({ clearSelectionEnabled = true, disabled = false }) => {
|
@@ -14959,11 +14996,18 @@ var createDatePickerBase = (variant) => {
|
|
14959
14996
|
shouldCloseOnSelect,
|
14960
14997
|
errorMessage,
|
14961
14998
|
clearSelectionEnabled = true,
|
14999
|
+
presets,
|
14962
15000
|
children,
|
14963
15001
|
...props
|
14964
15002
|
}) => {
|
14965
15003
|
const content = children ?? /* @__PURE__ */ import_react95.default.createElement(import_react95.default.Fragment, null, /* @__PURE__ */ import_react95.default.createElement(DatePickerField, { clearSelectionEnabled, disabled }), /* @__PURE__ */ import_react95.default.createElement(DatePickerCalendar, null));
|
14966
|
-
return /* @__PURE__ */ import_react95.default.createElement(
|
15004
|
+
return /* @__PURE__ */ import_react95.default.createElement(
|
15005
|
+
DatePickerCalendarPropsContext.Provider,
|
15006
|
+
{
|
15007
|
+
value: { variant, granularity: props.granularity, errorMessage, presets }
|
15008
|
+
},
|
15009
|
+
/* @__PURE__ */ import_react95.default.createElement(DatePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content)
|
15010
|
+
);
|
14967
15011
|
};
|
14968
15012
|
datePicker.Calendar = DatePickerCalendar;
|
14969
15013
|
datePicker.Field = DatePickerField;
|
@@ -15085,9 +15129,9 @@ var RangeCalendarTimeField = ({ granularity, part, ...props }) => {
|
|
15085
15129
|
var DateRangePickerCalendarPropsContext = import_react97.default.createContext(null);
|
15086
15130
|
var DateRangePickerCalendar = (props) => {
|
15087
15131
|
const ctx = import_react97.default.useContext(DateRangePickerCalendarPropsContext);
|
15088
|
-
const { variant, granularity, errorMessage } = (0, import_utils26.mergeProps)(ctx, props);
|
15089
|
-
const { dialog, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
|
15090
|
-
return /* @__PURE__ */ import_react97.default.createElement(Popover, { offset: 0 }, /* @__PURE__ */ import_react97.default.createElement(Dialog, { className: dialog() }, /* @__PURE__ */ import_react97.default.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ import_react97.default.createElement(RangeCalendar,
|
15132
|
+
const { variant, granularity, errorMessage, presets = [] } = (0, import_utils26.mergeProps)(ctx, props);
|
15133
|
+
const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
|
15134
|
+
return /* @__PURE__ */ import_react97.default.createElement(Popover, { offset: 0 }, /* @__PURE__ */ import_react97.default.createElement(Dialog, { className: dialog() }, presets.length > 0 && /* @__PURE__ */ import_react97.default.createElement(Presets, null, presets.map((props2) => /* @__PURE__ */ import_react97.default.createElement(RangePreset, { key: `${props2.value.start.toString()}-${props2.value.end.toString()}`, ...props2 }))), /* @__PURE__ */ import_react97.default.createElement(Spacing, { gap: "3", className: tw("p-5") }, /* @__PURE__ */ import_react97.default.createElement(RangeCalendar, { className: calendar() }), variant === "datetime" && /* @__PURE__ */ import_react97.default.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ import_react97.default.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ import_react97.default.createElement(RangeCalendarTimeField, { granularity, part: "start" })), /* @__PURE__ */ import_react97.default.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ import_react97.default.createElement(RangeCalendarTimeField, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ import_react97.default.createElement(import_react_aria_components13.Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
|
15091
15135
|
};
|
15092
15136
|
DateRangePickerCalendar.displayName = "DateRangePicker.Calendar";
|
15093
15137
|
var DateRangePickerField = ({ clearSelectionEnabled = true, disabled = false }) => {
|
@@ -15101,11 +15145,18 @@ var createDateRangePickerBase = (variant) => {
|
|
15101
15145
|
shouldCloseOnSelect,
|
15102
15146
|
errorMessage,
|
15103
15147
|
clearSelectionEnabled = true,
|
15148
|
+
presets,
|
15104
15149
|
children,
|
15105
15150
|
...props
|
15106
15151
|
}) => {
|
15107
15152
|
const content = children ?? /* @__PURE__ */ import_react97.default.createElement(import_react97.default.Fragment, null, /* @__PURE__ */ import_react97.default.createElement(DateRangePickerField, { clearSelectionEnabled, disabled }), /* @__PURE__ */ import_react97.default.createElement(DateRangePickerCalendar, { variant, granularity: props.granularity, errorMessage }));
|
15108
|
-
return /* @__PURE__ */ import_react97.default.createElement(
|
15153
|
+
return /* @__PURE__ */ import_react97.default.createElement(
|
15154
|
+
DateRangePickerCalendarPropsContext.Provider,
|
15155
|
+
{
|
15156
|
+
value: { variant, granularity: props.granularity, errorMessage, presets }
|
15157
|
+
},
|
15158
|
+
/* @__PURE__ */ import_react97.default.createElement(DateRangePicker, { ...props, variant, isDisabled: disabled, isInvalid: valid === false }, content)
|
15159
|
+
);
|
15109
15160
|
};
|
15110
15161
|
dateRangePicker.Calendar = DateRangePickerCalendar;
|
15111
15162
|
dateRangePicker.Field = DateRangePickerField;
|