@rovula/ui 0.0.41 → 0.0.43
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/cjs/bundle.js +1 -1
- package/dist/cjs/bundle.js.map +1 -1
- package/dist/cjs/types/components/DatePicker/DatePicker.d.ts +3 -1
- package/dist/cjs/types/components/DatePicker/DatePicker.stories.d.ts +8 -0
- package/dist/components/DatePicker/DatePicker.js +4 -4
- package/dist/esm/bundle.js +1 -1
- package/dist/esm/bundle.js.map +1 -1
- package/dist/esm/types/components/DatePicker/DatePicker.d.ts +3 -1
- package/dist/esm/types/components/DatePicker/DatePicker.stories.d.ts +8 -0
- package/dist/index.d.ts +6 -5
- package/package.json +1 -1
- package/src/components/DatePicker/DatePicker.tsx +5 -3
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import React, { FC } from "react";
|
|
1
|
+
import React, { ComponentPropsWithoutRef, FC } from "react";
|
|
2
2
|
import { Calendar } from "../Calendar";
|
|
3
|
+
import { PopoverContent } from "../Popover/Popover";
|
|
3
4
|
import { Modifiers } from "react-day-picker";
|
|
4
5
|
import { InputProps } from "../TextInput/TextInput";
|
|
5
6
|
type DatePickerProps = {
|
|
6
7
|
date: Date | undefined;
|
|
7
8
|
onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;
|
|
8
9
|
textInputProps?: Partial<InputProps>;
|
|
10
|
+
popoverContentProps?: ComponentPropsWithoutRef<typeof PopoverContent>;
|
|
9
11
|
} & React.ComponentPropsWithoutRef<typeof Calendar>;
|
|
10
12
|
declare const DatePicker: FC<DatePickerProps>;
|
|
11
13
|
export default DatePicker;
|
|
@@ -5,6 +5,7 @@ declare const meta: {
|
|
|
5
5
|
date: Date | undefined;
|
|
6
6
|
onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined;
|
|
7
7
|
textInputProps?: Partial<import("../..").InputProps> | undefined;
|
|
8
|
+
popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
|
|
8
9
|
} & import("react-day-picker").DayPickerProps>;
|
|
9
10
|
tags: string[];
|
|
10
11
|
parameters: {
|
|
@@ -14,6 +15,7 @@ declare const meta: {
|
|
|
14
15
|
date: Date | undefined;
|
|
15
16
|
onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void);
|
|
16
17
|
textInputProps?: Partial<import("../..").InputProps> | undefined;
|
|
18
|
+
popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
|
|
17
19
|
mode: "single";
|
|
18
20
|
required?: false | undefined;
|
|
19
21
|
className?: string | undefined;
|
|
@@ -116,6 +118,7 @@ declare const meta: {
|
|
|
116
118
|
date: Date | undefined;
|
|
117
119
|
onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: Date, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined);
|
|
118
120
|
textInputProps?: Partial<import("../..").InputProps> | undefined;
|
|
121
|
+
popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
|
|
119
122
|
mode: "single";
|
|
120
123
|
required: true;
|
|
121
124
|
className?: string | undefined;
|
|
@@ -218,6 +221,7 @@ declare const meta: {
|
|
|
218
221
|
date: Date | undefined;
|
|
219
222
|
onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: Date[] | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void);
|
|
220
223
|
textInputProps?: Partial<import("../..").InputProps> | undefined;
|
|
224
|
+
popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
|
|
221
225
|
mode: "multiple";
|
|
222
226
|
required?: false | undefined;
|
|
223
227
|
className?: string | undefined;
|
|
@@ -322,6 +326,7 @@ declare const meta: {
|
|
|
322
326
|
date: Date | undefined;
|
|
323
327
|
onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: Date[], triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void);
|
|
324
328
|
textInputProps?: Partial<import("../..").InputProps> | undefined;
|
|
329
|
+
popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
|
|
325
330
|
mode: "multiple";
|
|
326
331
|
required: true;
|
|
327
332
|
className?: string | undefined;
|
|
@@ -426,6 +431,7 @@ declare const meta: {
|
|
|
426
431
|
date: Date | undefined;
|
|
427
432
|
onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: import("react-day-picker").DateRange | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined);
|
|
428
433
|
textInputProps?: Partial<import("../..").InputProps> | undefined;
|
|
434
|
+
popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
|
|
429
435
|
mode: "range";
|
|
430
436
|
required?: false | undefined;
|
|
431
437
|
className?: string | undefined;
|
|
@@ -531,6 +537,7 @@ declare const meta: {
|
|
|
531
537
|
date: Date | undefined;
|
|
532
538
|
onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: import("react-day-picker").DateRange, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void);
|
|
533
539
|
textInputProps?: Partial<import("../..").InputProps> | undefined;
|
|
540
|
+
popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
|
|
534
541
|
mode: "range";
|
|
535
542
|
required: true;
|
|
536
543
|
className?: string | undefined;
|
|
@@ -636,6 +643,7 @@ declare const meta: {
|
|
|
636
643
|
date: Date | undefined;
|
|
637
644
|
onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined;
|
|
638
645
|
textInputProps?: Partial<import("../..").InputProps> | undefined;
|
|
646
|
+
popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
|
|
639
647
|
mode?: undefined;
|
|
640
648
|
required?: undefined;
|
|
641
649
|
className?: string | undefined;
|
|
@@ -18,12 +18,12 @@ import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
|
|
|
18
18
|
import { TextInput } from "../TextInput/TextInput";
|
|
19
19
|
import { format } from "date-fns/format";
|
|
20
20
|
const DatePicker = (_a) => {
|
|
21
|
-
var { date, onSelect, textInputProps } = _a, props = __rest(_a, ["date", "onSelect", "textInputProps"]);
|
|
21
|
+
var { date, onSelect, textInputProps, popoverContentProps } = _a, props = __rest(_a, ["date", "onSelect", "textInputProps", "popoverContentProps"]);
|
|
22
22
|
const [isOpen, setIsOpen] = useState(false);
|
|
23
|
-
return (_jsx("div", { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, Object.assign({ fullwidth: true, id: "2" // TODO
|
|
24
|
-
, readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit", className: "cursor-pointer" }) }, textInputProps)) }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, Object.assign({ defaultMonth: date }, props, { mode: "single", selected: date, onSelect: (...value) => {
|
|
23
|
+
return (_jsx("div", { children: _jsxs(Popover, { modal: true, open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, Object.assign({ fullwidth: true, id: "2" // TODO
|
|
24
|
+
, readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit", className: "cursor-pointer" }) }, textInputProps)) }) }), _jsx(PopoverContent, Object.assign({ className: "w-auto p-0 z-[100]" }, popoverContentProps, { children: _jsx(Calendar, Object.assign({ defaultMonth: date }, props, { mode: "single", selected: date, onSelect: (...value) => {
|
|
25
25
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(...value);
|
|
26
26
|
setIsOpen(false);
|
|
27
|
-
} })) })] }) }));
|
|
27
|
+
} })) }))] }) }));
|
|
28
28
|
};
|
|
29
29
|
export default DatePicker;
|