@povio/ui 2.1.16 → 2.1.18
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/BottomSheet.js +13 -6
- package/dist/CalendarHeader.js +18 -4
- package/dist/CalendarSelectHeader.js +9 -4
- package/dist/ChevronLeft.js +1 -1
- package/dist/ChevronRight.js +1 -1
- package/dist/Drawer.js +10 -2
- package/dist/InputUploadContent.js +4 -4
- package/dist/MenuDesktop.js +2 -1
- package/dist/MenuMobile.js +25 -13
- package/dist/MenuPopover.js +22 -10
- package/dist/Modal.js +5 -1
- package/dist/components/Menu/Menu.d.ts +2 -1
- package/dist/components/Menu/MenuDesktop.d.ts +1 -1
- package/dist/components/Menu/MenuMobile.d.ts +1 -1
- package/dist/components/Menu/MenuPopover.d.ts +2 -2
- package/dist/components/inputs/File/inputUpload.types.d.ts +2 -0
- package/dist/components/overlays/BottomSheet/BottomSheet.d.ts +1 -0
- package/dist/components/overlays/Drawer/Drawer.d.ts +3 -1
- package/dist/components/overlays/Modal/Modal.d.ts +2 -1
- package/dist/config/i18n.d.ts +13 -0
- package/dist/error-handling.js +14 -2
- package/dist/translation.js +8 -1
- package/dist/translation2.js +6 -0
- package/package.json +1 -1
package/dist/BottomSheet.js
CHANGED
|
@@ -22,7 +22,7 @@ var staticTransition = {
|
|
|
22
22
|
1
|
|
23
23
|
]
|
|
24
24
|
};
|
|
25
|
-
var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128 }) => {
|
|
25
|
+
var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128, shouldCloseOnInteractOutside }) => {
|
|
26
26
|
const viewport = useViewportSize();
|
|
27
27
|
const { sheetHeight, windowHeight } = useMemo(() => {
|
|
28
28
|
return {
|
|
@@ -51,9 +51,9 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
|
|
|
51
51
|
const rect = dialogRef.current?.getBoundingClientRect();
|
|
52
52
|
if (!rect || oldHeightRef.current === rect.height) return;
|
|
53
53
|
oldHeightRef.current = rect.height;
|
|
54
|
-
if (
|
|
54
|
+
if (y.get() < 0) {
|
|
55
55
|
y.stop();
|
|
56
|
-
(0, react_exports.animate)(y,
|
|
56
|
+
(0, react_exports.animate)(y, 0);
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
});
|
|
@@ -65,6 +65,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
|
|
|
65
65
|
isDismissable,
|
|
66
66
|
style: { height: viewport.height },
|
|
67
67
|
ref: overlayRef,
|
|
68
|
+
shouldCloseOnInteractOutside,
|
|
68
69
|
children: [/* @__PURE__ */ jsx(react_exports.motion.div, {
|
|
69
70
|
className: "pointer-events-none absolute inset-0 bg-support-overlay",
|
|
70
71
|
animate: { opacity: 1 },
|
|
@@ -97,8 +98,14 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
|
|
|
97
98
|
minHeight: "100%"
|
|
98
99
|
},
|
|
99
100
|
drag: "y",
|
|
100
|
-
dragElastic:
|
|
101
|
-
|
|
101
|
+
dragElastic: {
|
|
102
|
+
top: 0,
|
|
103
|
+
bottom: .5
|
|
104
|
+
},
|
|
105
|
+
dragConstraints: {
|
|
106
|
+
top: 0,
|
|
107
|
+
bottom: 0
|
|
108
|
+
},
|
|
102
109
|
onUpdate: (latest) => {
|
|
103
110
|
if (!latest || !footerRef.current) return;
|
|
104
111
|
footerRef.current?.style.setProperty("--scroll-position", `${(latest.y || 0).toFixed(0)}px`);
|
|
@@ -106,7 +113,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
|
|
|
106
113
|
onDragStart: () => {
|
|
107
114
|
if (document.activeElement && DomUtils.isKeyboardInput(document.activeElement)) focusTrapRef.current?.focus();
|
|
108
115
|
y.animation?.stop();
|
|
109
|
-
closeVelocityRef.current =
|
|
116
|
+
closeVelocityRef.current = true;
|
|
110
117
|
containerRef.current?.style.setProperty("pointer-events", "none");
|
|
111
118
|
},
|
|
112
119
|
onDragEnd: (e, { velocity }) => {
|
package/dist/CalendarHeader.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
import { ArrowDropDownIcon } from "./ArrowDropDown.js";
|
|
2
|
+
import { ArrowDropUpIcon } from "./ArrowDropUp.js";
|
|
1
3
|
import { ChevronLeftIcon } from "./ChevronLeft.js";
|
|
2
4
|
import { ChevronRightIcon } from "./ChevronRight.js";
|
|
3
5
|
import { PillButton } from "./PillButton.js";
|
|
4
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { clsx } from "clsx";
|
|
5
8
|
import { Button, ToggleButtonGroup } from "react-aria-components";
|
|
6
9
|
import { Time } from "@internationalized/date";
|
|
7
10
|
import { useDateFormatter } from "@react-aria/i18n";
|
|
@@ -29,9 +32,10 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
|
|
|
29
32
|
children: [
|
|
30
33
|
/* @__PURE__ */ jsx("div", {
|
|
31
34
|
className: "inline-flex h-12 items-center p-3",
|
|
32
|
-
children:
|
|
35
|
+
children: /* @__PURE__ */ jsx(Button, {
|
|
33
36
|
...prevButtonProps,
|
|
34
|
-
|
|
37
|
+
isDisabled: !!toggleState,
|
|
38
|
+
className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
|
|
35
39
|
children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6 text-interactive-text-secondary-idle" })
|
|
36
40
|
})
|
|
37
41
|
}),
|
|
@@ -40,6 +44,9 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
|
|
|
40
44
|
children: [
|
|
41
45
|
/* @__PURE__ */ jsx(PillButton, {
|
|
42
46
|
color: "secondary",
|
|
47
|
+
variant: "subtle",
|
|
48
|
+
iconPosition: "right",
|
|
49
|
+
icon: toggleState === "month" ? ArrowDropUpIcon : ArrowDropDownIcon,
|
|
43
50
|
toggle: true,
|
|
44
51
|
isSelected: toggleState === "month",
|
|
45
52
|
onChange: (isSelected) => setToggleState(isSelected ? "month" : null),
|
|
@@ -47,6 +54,9 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
|
|
|
47
54
|
}),
|
|
48
55
|
/* @__PURE__ */ jsx(PillButton, {
|
|
49
56
|
color: "secondary",
|
|
57
|
+
variant: "subtle",
|
|
58
|
+
iconPosition: "right",
|
|
59
|
+
icon: toggleState === "year" ? ArrowDropUpIcon : ArrowDropDownIcon,
|
|
50
60
|
toggle: true,
|
|
51
61
|
isSelected: toggleState === "year",
|
|
52
62
|
onChange: (isSelected) => setToggleState(isSelected ? "year" : null),
|
|
@@ -54,6 +64,9 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
|
|
|
54
64
|
}),
|
|
55
65
|
includesTime && /* @__PURE__ */ jsx(PillButton, {
|
|
56
66
|
color: "secondary",
|
|
67
|
+
variant: "subtle",
|
|
68
|
+
iconPosition: "right",
|
|
69
|
+
icon: toggleState === "time" ? ArrowDropUpIcon : ArrowDropDownIcon,
|
|
57
70
|
toggle: true,
|
|
58
71
|
isSelected: toggleState === "time",
|
|
59
72
|
onChange: (isSelected) => setToggleState(isSelected ? "time" : null),
|
|
@@ -63,9 +76,10 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
|
|
|
63
76
|
}),
|
|
64
77
|
/* @__PURE__ */ jsx("div", {
|
|
65
78
|
className: "inline-flex h-12 items-center p-3",
|
|
66
|
-
children:
|
|
79
|
+
children: /* @__PURE__ */ jsx(Button, {
|
|
67
80
|
...nextButtonProps,
|
|
68
|
-
|
|
81
|
+
isDisabled: !!toggleState,
|
|
82
|
+
className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
|
|
69
83
|
children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6 text-interactive-text-secondary-idle" })
|
|
70
84
|
})
|
|
71
85
|
})
|
|
@@ -5,11 +5,14 @@ import { ChevronsLeftIcon } from "./ChevronsLeft.js";
|
|
|
5
5
|
import { ChevronsRightIcon } from "./ChevronsRight.js";
|
|
6
6
|
import { InlineIconButton } from "./InlineIconButton.js";
|
|
7
7
|
import { PillButton } from "./PillButton.js";
|
|
8
|
+
import { ns } from "./i18n.js";
|
|
8
9
|
import { Select } from "./Select.js";
|
|
9
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
11
|
import { useMemo } from "react";
|
|
11
12
|
import { useDateFormatter } from "@react-aria/i18n";
|
|
13
|
+
import { useTranslation } from "react-i18next";
|
|
12
14
|
const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
|
|
15
|
+
const { t } = useTranslation("ui");
|
|
13
16
|
const displayDate = state.visibleRange.start.add(offset);
|
|
14
17
|
const currentMonth = displayDate.month - 1;
|
|
15
18
|
const currentYear = displayDate.year;
|
|
@@ -102,13 +105,13 @@ const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled,
|
|
|
102
105
|
isDisabled: isPrevYearDisabled,
|
|
103
106
|
onClick: handlePrevYear,
|
|
104
107
|
icon: ChevronsLeftIcon,
|
|
105
|
-
label:
|
|
108
|
+
label: t(($) => $.ui.datePicker.navigation.previousYear)
|
|
106
109
|
}), /* @__PURE__ */ jsx(InlineIconButton, {
|
|
107
110
|
color: "secondary",
|
|
108
111
|
isDisabled: isPrevMonthDisabled,
|
|
109
112
|
onClick: handlePrevMonth,
|
|
110
113
|
icon: ChevronLeftIcon,
|
|
111
|
-
label:
|
|
114
|
+
label: t(($) => $.ui.datePicker.navigation.previousMonth)
|
|
112
115
|
})]
|
|
113
116
|
}),
|
|
114
117
|
/* @__PURE__ */ jsxs("div", {
|
|
@@ -118,6 +121,7 @@ const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled,
|
|
|
118
121
|
hideLabel: true,
|
|
119
122
|
customTrigger: /* @__PURE__ */ jsx(PillButton, {
|
|
120
123
|
color: "secondary",
|
|
124
|
+
variant: "subtle",
|
|
121
125
|
iconPosition: "right",
|
|
122
126
|
icon: ArrowDropDownIcon,
|
|
123
127
|
children: MONTHS[currentMonth].slice(0, 3)
|
|
@@ -135,6 +139,7 @@ const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled,
|
|
|
135
139
|
hideLabel: true,
|
|
136
140
|
customTrigger: /* @__PURE__ */ jsx(PillButton, {
|
|
137
141
|
color: "secondary",
|
|
142
|
+
variant: "subtle",
|
|
138
143
|
iconPosition: "right",
|
|
139
144
|
icon: ArrowDropDownIcon,
|
|
140
145
|
children: currentYear.toString()
|
|
@@ -155,13 +160,13 @@ const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled,
|
|
|
155
160
|
isDisabled: isNextMonthDisabled,
|
|
156
161
|
onClick: handleNextMonth,
|
|
157
162
|
icon: ChevronRightIcon,
|
|
158
|
-
label:
|
|
163
|
+
label: t(($) => $.ui.datePicker.navigation.nextMonth)
|
|
159
164
|
}), /* @__PURE__ */ jsx(InlineIconButton, {
|
|
160
165
|
color: "secondary",
|
|
161
166
|
isDisabled: isNextYearDisabled,
|
|
162
167
|
onClick: handleNextYear,
|
|
163
168
|
icon: ChevronsRightIcon,
|
|
164
|
-
label:
|
|
169
|
+
label: t(($) => $.ui.datePicker.navigation.nextYear)
|
|
165
170
|
})]
|
|
166
171
|
})
|
|
167
172
|
]
|
package/dist/ChevronLeft.js
CHANGED
|
@@ -8,7 +8,7 @@ const ChevronLeftIcon = (props) => /* @__PURE__ */ jsx("svg", {
|
|
|
8
8
|
children: /* @__PURE__ */ jsx("path", {
|
|
9
9
|
fill: "currentColor",
|
|
10
10
|
fillRule: "evenodd",
|
|
11
|
-
d: "
|
|
11
|
+
d: "M14.744 6.251a.845.845 0 0 1 0 1.212L10.112 12l4.632 4.537a.845.845 0 0 1 0 1.212.89.89 0 0 1-1.238 0l-5.25-5.143a.845.845 0 0 1 0-1.212l5.25-5.143a.89.89 0 0 1 1.238 0",
|
|
12
12
|
clipRule: "evenodd"
|
|
13
13
|
})
|
|
14
14
|
});
|
package/dist/ChevronRight.js
CHANGED
|
@@ -8,7 +8,7 @@ const ChevronRightIcon = (props) => /* @__PURE__ */ jsx("svg", {
|
|
|
8
8
|
children: /* @__PURE__ */ jsx("path", {
|
|
9
9
|
fill: "currentColor",
|
|
10
10
|
fillRule: "evenodd",
|
|
11
|
-
d: "
|
|
11
|
+
d: "M9.256 6.251a.89.89 0 0 1 1.238 0l5.25 5.143a.845.845 0 0 1 0 1.212l-5.25 5.143a.89.89 0 0 1-1.238 0 .845.845 0 0 1 0-1.212L13.888 12 9.256 7.463a.845.845 0 0 1 0-1.212",
|
|
12
12
|
clipRule: "evenodd"
|
|
13
13
|
})
|
|
14
14
|
});
|
package/dist/Drawer.js
CHANGED
|
@@ -2,16 +2,18 @@ import { modalOverlay } from "./modal.cva.js";
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { clsx } from "clsx";
|
|
4
4
|
import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
|
|
5
|
-
const Drawer = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className }) => {
|
|
5
|
+
const Drawer = ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
|
|
6
6
|
if (trigger) return /* @__PURE__ */ jsxs(DialogTrigger, {
|
|
7
7
|
isOpen,
|
|
8
8
|
onOpenChange,
|
|
9
9
|
children: [trigger, /* @__PURE__ */ jsx(DrawerOverlay, {
|
|
10
|
+
label,
|
|
10
11
|
portalContainerRef,
|
|
11
12
|
isDismissable,
|
|
12
13
|
overlayClassName,
|
|
13
14
|
dialogClassName,
|
|
14
15
|
className,
|
|
16
|
+
shouldCloseOnInteractOutside,
|
|
15
17
|
children
|
|
16
18
|
})]
|
|
17
19
|
});
|
|
@@ -20,20 +22,26 @@ const Drawer = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, i
|
|
|
20
22
|
onOpenChange,
|
|
21
23
|
portalContainerRef,
|
|
22
24
|
isDismissable,
|
|
25
|
+
overlayClassName,
|
|
26
|
+
dialogClassName,
|
|
23
27
|
className,
|
|
28
|
+
label,
|
|
29
|
+
shouldCloseOnInteractOutside,
|
|
24
30
|
children
|
|
25
31
|
});
|
|
26
32
|
};
|
|
27
|
-
var DrawerOverlay = ({ isOpen, onOpenChange, portalContainerRef, children, isDismissable, overlayClassName, dialogClassName, className }) => {
|
|
33
|
+
var DrawerOverlay = ({ label, isOpen, onOpenChange, portalContainerRef, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
|
|
28
34
|
return /* @__PURE__ */ jsx(ModalOverlay, {
|
|
29
35
|
isOpen,
|
|
30
36
|
onOpenChange,
|
|
31
37
|
UNSTABLE_portalContainer: portalContainerRef?.current,
|
|
32
38
|
className: clsx(modalOverlay(), overlayClassName),
|
|
33
39
|
isDismissable,
|
|
40
|
+
shouldCloseOnInteractOutside,
|
|
34
41
|
children: /* @__PURE__ */ jsx(Modal, {
|
|
35
42
|
className: clsx("fixed inset-y-0 right-0 z-10 w-fit entering:animate-drawer-enter-right exiting:animate-drawer-exit-right bg-elevation-fill-default-1", className),
|
|
36
43
|
children: /* @__PURE__ */ jsx(Dialog, {
|
|
44
|
+
"aria-label": label,
|
|
37
45
|
className: clsx("outline-none", dialogClassName),
|
|
38
46
|
children: ({ close }) => children(close)
|
|
39
47
|
})
|
|
@@ -11,7 +11,7 @@ import { clsx } from "clsx";
|
|
|
11
11
|
import { DropZone, FileTrigger } from "react-aria-components";
|
|
12
12
|
import { useTranslation } from "react-i18next";
|
|
13
13
|
const InputUploadContent = (props) => {
|
|
14
|
-
const { variant, isDisabled, error,...rest } = props;
|
|
14
|
+
const { variant, isDisabled, error, placeholder, buttonText,...rest } = props;
|
|
15
15
|
const { t } = useTranslation("ui");
|
|
16
16
|
const inputSizeCva = UIStyle.useConfig()?.input?.sizeCva ?? inputSize;
|
|
17
17
|
return /* @__PURE__ */ jsx(FileTrigger, {
|
|
@@ -33,18 +33,18 @@ const InputUploadContent = (props) => {
|
|
|
33
33
|
size: "label-1",
|
|
34
34
|
as: "span",
|
|
35
35
|
className: "min-w-0 flex-fill select-none truncate text-text-default-3",
|
|
36
|
-
children: t(($) => $.ui.fileUpload.emptyText)
|
|
36
|
+
children: placeholder ?? t(($) => $.ui.fileUpload.emptyText)
|
|
37
37
|
}), variant === "nested" && /* @__PURE__ */ jsx(TextButton, {
|
|
38
38
|
isDisabled,
|
|
39
39
|
icon: UploadIcon,
|
|
40
|
-
children: t(($) => $.ui.fileUpload.upload)
|
|
40
|
+
children: buttonText ?? t(($) => $.ui.fileUpload.upload)
|
|
41
41
|
})]
|
|
42
42
|
}), variant !== "nested" && /* @__PURE__ */ jsx(Button$1, {
|
|
43
43
|
size: "s",
|
|
44
44
|
width: "hug",
|
|
45
45
|
isDisabled,
|
|
46
46
|
className: "truncate",
|
|
47
|
-
children: t(($) => $.ui.fileUpload.uploadFile)
|
|
47
|
+
children: buttonText ?? t(($) => $.ui.fileUpload.uploadFile)
|
|
48
48
|
})]
|
|
49
49
|
})
|
|
50
50
|
});
|
package/dist/MenuDesktop.js
CHANGED
|
@@ -4,7 +4,7 @@ import { MenuTrigger } from "react-aria-components";
|
|
|
4
4
|
import React, { useRef, useState } from "react";
|
|
5
5
|
import { useHover } from "react-aria";
|
|
6
6
|
var CLOSE_DELAY = 100;
|
|
7
|
-
const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false,...props }) => {
|
|
7
|
+
const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false, onAction,...props }) => {
|
|
8
8
|
const [isOpen, setIsOpen] = useState(false);
|
|
9
9
|
const timeoutRef = useRef(null);
|
|
10
10
|
const isHoveringTrigger = useRef(false);
|
|
@@ -43,6 +43,7 @@ const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover
|
|
|
43
43
|
...props,
|
|
44
44
|
offset: 0,
|
|
45
45
|
items,
|
|
46
|
+
onAction,
|
|
46
47
|
isOpen: triggerOnHover ? isOpen : void 0,
|
|
47
48
|
isNonModal: triggerOnHover,
|
|
48
49
|
onMouseEnter: triggerOnHover ? openMenu : void 0,
|
package/dist/MenuMobile.js
CHANGED
|
@@ -7,20 +7,24 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
7
7
|
import { clsx } from "clsx";
|
|
8
8
|
import { Button, Menu } from "react-aria-components";
|
|
9
9
|
import { useRef, useState } from "react";
|
|
10
|
-
const MenuMobile = ({ trigger, items,...props }) => {
|
|
10
|
+
const MenuMobile = ({ trigger, items, onAction,...props }) => {
|
|
11
11
|
const uiStyle = UIStyle.useConfig();
|
|
12
12
|
const menuItemCva$1 = uiStyle?.menu?.itemCva ?? menuItemCva;
|
|
13
13
|
const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
|
|
14
14
|
const activeItemRef = useRef(null);
|
|
15
15
|
const activeItemParentsRef = useRef([]);
|
|
16
|
+
const lastEventRef = useRef(null);
|
|
16
17
|
const [isOpen, setIsOpen] = useState(false);
|
|
17
18
|
const [activeItem, setActiveItem] = useState(null);
|
|
18
|
-
const
|
|
19
|
+
const handleAction = (item) => {
|
|
19
20
|
if (!item.children) {
|
|
20
21
|
activeItemRef.current = null;
|
|
21
22
|
activeItemParentsRef.current = [];
|
|
22
23
|
setActiveItem(null);
|
|
23
24
|
setIsOpen(false);
|
|
25
|
+
item.onAction?.();
|
|
26
|
+
onAction?.(item.id, lastEventRef.current);
|
|
27
|
+
lastEventRef.current = null;
|
|
24
28
|
return;
|
|
25
29
|
}
|
|
26
30
|
if (activeItemRef.current) activeItemParentsRef.current.push(activeItemRef.current);
|
|
@@ -47,17 +51,25 @@ const MenuMobile = ({ trigger, items,...props }) => {
|
|
|
47
51
|
})),
|
|
48
52
|
onPress: onBack,
|
|
49
53
|
children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-6" }), activeItem.label]
|
|
50
|
-
}), /* @__PURE__ */ jsx(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
57
|
-
children:
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
54
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
55
|
+
onClickCapture: (e) => {
|
|
56
|
+
lastEventRef.current = e;
|
|
57
|
+
},
|
|
58
|
+
onKeyDownCapture: (e) => {
|
|
59
|
+
lastEventRef.current = e;
|
|
60
|
+
},
|
|
61
|
+
children: /* @__PURE__ */ jsx(Menu, {
|
|
62
|
+
autoFocus: true,
|
|
63
|
+
onClose,
|
|
64
|
+
className: menuCva$1({
|
|
65
|
+
...props,
|
|
66
|
+
isMobile: true
|
|
67
|
+
}),
|
|
68
|
+
children: (activeItem?.children ?? items).map((item, index) => /* @__PURE__ */ jsx(MenuItem$1, {
|
|
69
|
+
...item,
|
|
70
|
+
onAction: () => handleAction(item)
|
|
71
|
+
}, index))
|
|
72
|
+
})
|
|
61
73
|
})] })
|
|
62
74
|
});
|
|
63
75
|
};
|
package/dist/MenuPopover.js
CHANGED
|
@@ -4,7 +4,9 @@ import { MenuItem as MenuItem$1 } from "./MenuItem.js";
|
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { clsx } from "clsx";
|
|
6
6
|
import { Menu, Popover, SubmenuTrigger } from "react-aria-components";
|
|
7
|
-
|
|
7
|
+
import { useRef } from "react";
|
|
8
|
+
const MenuPopover = ({ items, className, onAction,...props }) => {
|
|
9
|
+
const lastEventRef = useRef(null);
|
|
8
10
|
const uiStyle = UIStyle.useConfig();
|
|
9
11
|
const menuPopoverCva$1 = uiStyle?.menu?.popoverCva ?? menuPopoverCva;
|
|
10
12
|
const menuPopoverWrapperCva$1 = uiStyle?.menu?.popoverWrapperCva ?? menuPopoverWrapperCva;
|
|
@@ -14,15 +16,25 @@ const MenuPopover = ({ items, className,...props }) => {
|
|
|
14
16
|
className: clsx(menuPopoverCva$1({ ...props }), className),
|
|
15
17
|
children: /* @__PURE__ */ jsx("div", {
|
|
16
18
|
className: menuPopoverWrapperCva$1({ ...props }),
|
|
17
|
-
children: /* @__PURE__ */ jsx(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
20
|
+
onClickCapture: (e) => {
|
|
21
|
+
lastEventRef.current = e;
|
|
22
|
+
},
|
|
23
|
+
onKeyDownCapture: (e) => {
|
|
24
|
+
lastEventRef.current = e;
|
|
25
|
+
},
|
|
26
|
+
children: /* @__PURE__ */ jsx(Menu, {
|
|
27
|
+
onAction: (key) => onAction?.(key, lastEventRef.current),
|
|
28
|
+
className: menuCva$1({
|
|
29
|
+
...props,
|
|
30
|
+
isMobile: false
|
|
31
|
+
}),
|
|
32
|
+
children: items.map((item, index) => !item.children || item.children.length === 0 ? /* @__PURE__ */ jsx(MenuItem$1, { ...item }, index) : /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [/* @__PURE__ */ jsx(MenuItem$1, { ...item }), /* @__PURE__ */ jsx(MenuPopover, {
|
|
33
|
+
offset: 0,
|
|
34
|
+
onAction,
|
|
35
|
+
items: item.children
|
|
36
|
+
})] }, index))
|
|
37
|
+
})
|
|
26
38
|
})
|
|
27
39
|
})
|
|
28
40
|
});
|
package/dist/Modal.js
CHANGED
|
@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
7
7
|
import { clsx } from "clsx";
|
|
8
8
|
import { Dialog, Modal, ModalOverlay } from "react-aria-components";
|
|
9
9
|
import { useTranslation } from "react-i18next";
|
|
10
|
-
const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true }) => {
|
|
10
|
+
const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, shouldCloseOnInteractOutside }) => {
|
|
11
11
|
const { t } = useTranslation("ui");
|
|
12
12
|
const uiStyle = UIStyle.useConfig();
|
|
13
13
|
const modalMainCva = uiStyle?.modal?.mainCva ?? modalMain;
|
|
@@ -22,6 +22,10 @@ const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalCl
|
|
|
22
22
|
isDismissable,
|
|
23
23
|
isOpen,
|
|
24
24
|
shouldCloseOnInteractOutside: () => {
|
|
25
|
+
if (shouldCloseOnInteractOutside) {
|
|
26
|
+
if (portalContainerRef?.current) return false;
|
|
27
|
+
return shouldCloseOnInteractOutside();
|
|
28
|
+
}
|
|
25
29
|
return !portalContainerRef?.current;
|
|
26
30
|
},
|
|
27
31
|
onOpenChange: (open) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
1
|
+
import { Key, ReactElement } from 'react';
|
|
2
2
|
import { MenuItemProps } from 'react-aria-components';
|
|
3
3
|
import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from './menu.cva';
|
|
4
4
|
export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children">, MenuItemVariantProps, MenuCvaVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps {
|
|
@@ -11,5 +11,6 @@ export interface MenuProps {
|
|
|
11
11
|
items: MenuItem[];
|
|
12
12
|
triggerOnHover?: boolean;
|
|
13
13
|
closeDelay?: number;
|
|
14
|
+
onAction?: (key: Key, e: any) => void;
|
|
14
15
|
}
|
|
15
16
|
export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { MenuProps } from './Menu';
|
|
2
|
-
export declare const MenuDesktop: ({ trigger, items, closeDelay, triggerOnHover, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const MenuDesktop: ({ trigger, items, closeDelay, triggerOnHover, onAction, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { MenuProps } from './Menu';
|
|
2
|
-
export declare const MenuMobile: ({ trigger, items, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const MenuMobile: ({ trigger, items, onAction, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PopoverProps as AriaPopoverProps } from 'react-aria-components';
|
|
2
2
|
import { MenuProps } from './Menu';
|
|
3
|
-
export interface MenuPopoverProps extends Pick<MenuProps, "items">, AriaPopoverProps {
|
|
3
|
+
export interface MenuPopoverProps extends Pick<MenuProps, "items" | "onAction">, AriaPopoverProps {
|
|
4
4
|
}
|
|
5
|
-
export declare const MenuPopover: ({ items, className, ...props }: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare const MenuPopover: ({ items, className, onAction, ...props }: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -28,5 +28,7 @@ export type InputUploadBaseProps = {
|
|
|
28
28
|
ref?: Ref<HTMLElement>;
|
|
29
29
|
label?: string;
|
|
30
30
|
className?: string;
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
buttonText?: string;
|
|
31
33
|
} & FormFieldProps & InputUploadButtonProps & Omit<FileTriggerProps, "children" | "onSelect" | "allowsMultiple"> & Omit<DropZoneProps, "children" | "onDrop"> & GroupedFileUploadProps;
|
|
32
34
|
export type InputUploadProps<TFieldValues extends FieldValues = FieldValues> = InputUploadBaseProps & GroupedFileUploadControlProps<TFieldValues>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ReactNode, RefObject } from 'react';
|
|
2
2
|
export interface DrawerProps {
|
|
3
|
+
label: string;
|
|
3
4
|
isOpen?: boolean;
|
|
4
5
|
portalContainerRef?: RefObject<HTMLElement>;
|
|
5
6
|
onOpenChange?: (isOpen: boolean) => void;
|
|
@@ -9,5 +10,6 @@ export interface DrawerProps {
|
|
|
9
10
|
overlayClassName?: string;
|
|
10
11
|
dialogClassName?: string;
|
|
11
12
|
className?: string;
|
|
13
|
+
shouldCloseOnInteractOutside?: () => boolean;
|
|
12
14
|
}
|
|
13
|
-
export declare const Drawer: ({ isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const Drawer: ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,5 +9,6 @@ export interface ModalProps extends ModalVariantProps {
|
|
|
9
9
|
overlayClassName?: string;
|
|
10
10
|
showCloseIcon?: boolean;
|
|
11
11
|
isDismissable?: boolean;
|
|
12
|
+
shouldCloseOnInteractOutside?: () => boolean;
|
|
12
13
|
}
|
|
13
|
-
export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable, shouldCloseOnInteractOutside, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
|
package/dist/config/i18n.d.ts
CHANGED
|
@@ -32,6 +32,12 @@ export declare const resources: {
|
|
|
32
32
|
thisAndLastYear: string;
|
|
33
33
|
soFar: string;
|
|
34
34
|
};
|
|
35
|
+
navigation: {
|
|
36
|
+
previousMonth: string;
|
|
37
|
+
nextMonth: string;
|
|
38
|
+
previousYear: string;
|
|
39
|
+
nextYear: string;
|
|
40
|
+
};
|
|
35
41
|
errors: {
|
|
36
42
|
endDateBeforeStart: string;
|
|
37
43
|
};
|
|
@@ -155,6 +161,7 @@ export declare const resources: {
|
|
|
155
161
|
networkError: string;
|
|
156
162
|
canceledError: string;
|
|
157
163
|
unknownError: string;
|
|
164
|
+
unknownErrorWithCode: string;
|
|
158
165
|
};
|
|
159
166
|
};
|
|
160
167
|
};
|
|
@@ -190,6 +197,12 @@ export declare const resources: {
|
|
|
190
197
|
thisAndLastYear: string;
|
|
191
198
|
soFar: string;
|
|
192
199
|
};
|
|
200
|
+
navigation: {
|
|
201
|
+
previousMonth: string;
|
|
202
|
+
nextMonth: string;
|
|
203
|
+
previousYear: string;
|
|
204
|
+
nextYear: string;
|
|
205
|
+
};
|
|
193
206
|
errors: {
|
|
194
207
|
endDateBeforeStart: string;
|
|
195
208
|
};
|
package/dist/error-handling.js
CHANGED
|
@@ -50,7 +50,13 @@ var ErrorHandler = class {
|
|
|
50
50
|
const unknownError = {
|
|
51
51
|
code: "UNKNOWN_ERROR",
|
|
52
52
|
condition: () => true,
|
|
53
|
-
getMessage: () =>
|
|
53
|
+
getMessage: (e) => {
|
|
54
|
+
if (axios.isAxiosError(e) && e.response?.data?.code) return i18next.t(($) => $.sharedErrors.unknownErrorWithCode, {
|
|
55
|
+
ns: "ui",
|
|
56
|
+
code: e.response.data.code
|
|
57
|
+
});
|
|
58
|
+
return i18next.t(($) => $.sharedErrors.unknownError, { ns: "ui" });
|
|
59
|
+
}
|
|
54
60
|
};
|
|
55
61
|
this.entries = [
|
|
56
62
|
...entries,
|
|
@@ -79,7 +85,13 @@ var ErrorHandler = class {
|
|
|
79
85
|
if (typeof error === "string") return error;
|
|
80
86
|
if (error instanceof Error) return error.message;
|
|
81
87
|
if (error instanceof ApplicationException) return error.message;
|
|
82
|
-
if (fallbackToUnknown)
|
|
88
|
+
if (fallbackToUnknown) {
|
|
89
|
+
if (error && typeof error === "object" && "code" in error) return i18next.t(($) => $.sharedErrors.unknownErrorWithCode, {
|
|
90
|
+
ns: "ui",
|
|
91
|
+
code: error.code
|
|
92
|
+
});
|
|
93
|
+
return i18next.t(($) => $.sharedErrors.unknownError, { ns: "ui" });
|
|
94
|
+
}
|
|
83
95
|
return null;
|
|
84
96
|
}
|
|
85
97
|
};
|
package/dist/translation.js
CHANGED
|
@@ -27,6 +27,12 @@ var translation_default = {
|
|
|
27
27
|
"thisAndLastYear": "This & Last year",
|
|
28
28
|
"soFar": "So far"
|
|
29
29
|
},
|
|
30
|
+
"navigation": {
|
|
31
|
+
"previousMonth": "Previous month",
|
|
32
|
+
"nextMonth": "Next month",
|
|
33
|
+
"previousYear": "Previous year",
|
|
34
|
+
"nextYear": "Next year"
|
|
35
|
+
},
|
|
30
36
|
"errors": { "endDateBeforeStart": "End date cannot be before start date" }
|
|
31
37
|
},
|
|
32
38
|
"modal": { "closeBtn": "Close" },
|
|
@@ -141,7 +147,8 @@ var translation_default = {
|
|
|
141
147
|
"internalError": "An internal error occurred. This is most likely a bug on our end. Please try again later.",
|
|
142
148
|
"networkError": "A network error occurred. Are you connected to the internet?",
|
|
143
149
|
"canceledError": "The request was canceled.",
|
|
144
|
-
"unknownError": "An unknown error occurred.
|
|
150
|
+
"unknownError": "An unknown error occurred.",
|
|
151
|
+
"unknownErrorWithCode": "An unknown error occurred. Error code: \"{{code}}\""
|
|
145
152
|
}
|
|
146
153
|
};
|
|
147
154
|
export { translation_default as default };
|
package/dist/translation2.js
CHANGED
|
@@ -27,6 +27,12 @@ var translation_default = {
|
|
|
27
27
|
"thisAndLastYear": "Ta in prejšnje leto",
|
|
28
28
|
"soFar": "Od začetka"
|
|
29
29
|
},
|
|
30
|
+
"navigation": {
|
|
31
|
+
"previousMonth": "Prejšnji mesec",
|
|
32
|
+
"nextMonth": "Naslednji mesec",
|
|
33
|
+
"previousYear": "Prejšnje leto",
|
|
34
|
+
"nextYear": "Naslednje leto"
|
|
35
|
+
},
|
|
30
36
|
"errors": { "endDateBeforeStart": "Datum konca ne more biti pred datumom začetka" }
|
|
31
37
|
},
|
|
32
38
|
"modal": { "closeBtn": "Zapri" },
|