@povio/ui 2.1.15 → 2.1.17

package/README.md

@@ -29,6 +29,12 @@ Tailwind version 4 also defaults to `cursor: default` for buttons which differs
 
 This is required for buttons to behave as expected. It is based on [Tailwind Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor).
 
+In order for Tailwind to also compile classes for @povio/ui package, you need to include @source directive in Tailwind config.
+In your globals.css add (make sure path is correct):
+```css
+@source "../../node-modules/@povio/ui/dist";
+```
+
 ### React Aria
 
 We are using `react-aria-components` for our UI components including their plugin for Tailwind that makes classes for modifiers a bit shorter. As such, make sure to install and setup [`tailwindcss-react-aria-components`](https://www.npmjs.com/package/tailwindcss-react-aria-components)

package/dist/BottomSheet.js

@@ -22,7 +22,7 @@ var staticTransition = {
 		1
 	]
 };
-var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128 }) => {
+var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128, shouldCloseOnInteractOutside }) => {
 	const viewport = useViewportSize();
 	const { sheetHeight, windowHeight } = useMemo(() => {
 		return {
@@ -65,6 +65,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		isDismissable,
 		style: { height: viewport.height },
 		ref: overlayRef,
+		shouldCloseOnInteractOutside,
 		children: [/* @__PURE__ */ jsx(react_exports.motion.div, {
 			className: "pointer-events-none absolute inset-0 bg-support-overlay",
 			animate: { opacity: 1 },

package/dist/DatePicker.js

@@ -8,7 +8,7 @@ import { TooltipWrapper } from "./TooltipWrapper.js";
 import { DateTimeUtils } from "./date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useRef } from "react";
+import { useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
@@ -32,6 +32,13 @@ var DatePickerBase = (props) => {
 		headerClassName,
 		errorClassName
 	};
+	const datePickerInputRef = useRef(null);
+	const datePickerRef = useMemo(() => ({ get current() {
+		return datePickerInputRef.current?.getContainer?.() || null;
+	} }), []);
+	useImperativeHandle(ref, () => ({ clear: () => {
+		datePickerInputRef.current?.clear();
+	} }));
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -53,7 +60,6 @@ var DatePickerBase = (props) => {
 		},
 		shouldCloseOnSelect: false
 	});
-	const datePickerRef = useRef(null);
 	const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker({
 		...rest,
 		label,
@@ -105,7 +111,7 @@ var DatePickerBase = (props) => {
 			className: clsx("relative inline-flex w-full flex-col text-left", className),
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: [/* @__PURE__ */ jsx(DatePickerInput, {
-				ref: mergeRefs(ref, datePickerRef),
+				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
 				fieldProps: {

package/dist/DateTimePicker.js

@@ -7,7 +7,7 @@ import { FormField } from "./FormField.js";
 import { TooltipWrapper } from "./TooltipWrapper.js";
 import { DateTimeUtils } from "./date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
@@ -30,6 +30,13 @@ var DateTimePickerBase = (props) => {
 		headerClassName,
 		errorClassName
 	};
+	const datePickerInputRef = useRef(null);
+	const datePickerRef = useMemo(() => ({ get current() {
+		return datePickerInputRef.current?.getContainer?.() || null;
+	} }), []);
+	useImperativeHandle(ref, () => ({ clear: () => {
+		datePickerInputRef.current?.clear();
+	} }));
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -54,7 +61,6 @@ var DateTimePickerBase = (props) => {
 		granularity: "minute",
 		hideTimeZone: true
 	});
-	const datePickerRef = useRef(null);
 	const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker({
 		...rest,
 		label,
@@ -110,13 +116,15 @@ var DateTimePickerBase = (props) => {
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
 		as,
 		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
 		children: /* @__PURE__ */ jsxs(FormField, {
 			...formFieldProps,
 			as,
 			labelProps,
 			className: "relative inline-flex w-full flex-col text-left",
+			tabIndex: as === "inline" ? -1 : void 0,
 			children: [/* @__PURE__ */ jsx(DatePickerInput, {
-				ref: mergeRefs(ref, datePickerRef),
+				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
 				fieldProps: {
@@ -180,12 +188,13 @@ const DateTimePicker = ({ fullIso = true,...props }) => {
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(DateTimePickerBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateTimePickerBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: parseDateValue(field.value),
 				onChange: (value) => field.onChange(formatDateValue(value)),
 				onBlur: field.onBlur,
+				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message
 			})

package/dist/Drawer.js

@@ -2,16 +2,18 @@ import { modalOverlay } from "./modal.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
-const Drawer = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className }) => {
+const Drawer = ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
 	if (trigger) return /* @__PURE__ */ jsxs(DialogTrigger, {
 		isOpen,
 		onOpenChange,
 		children: [trigger, /* @__PURE__ */ jsx(DrawerOverlay, {
+			label,
 			portalContainerRef,
 			isDismissable,
 			overlayClassName,
 			dialogClassName,
 			className,
+			shouldCloseOnInteractOutside,
 			children
 		})]
 	});
@@ -20,20 +22,26 @@ const Drawer = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, i
 		onOpenChange,
 		portalContainerRef,
 		isDismissable,
+		overlayClassName,
+		dialogClassName,
 		className,
+		label,
+		shouldCloseOnInteractOutside,
 		children
 	});
 };
-var DrawerOverlay = ({ isOpen, onOpenChange, portalContainerRef, children, isDismissable, overlayClassName, dialogClassName, className }) => {
+var DrawerOverlay = ({ label, isOpen, onOpenChange, portalContainerRef, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
 	return /* @__PURE__ */ jsx(ModalOverlay, {
 		isOpen,
 		onOpenChange,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
 		className: clsx(modalOverlay(), overlayClassName),
 		isDismissable,
+		shouldCloseOnInteractOutside,
 		children: /* @__PURE__ */ jsx(Modal, {
 			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),
 			children: /* @__PURE__ */ jsx(Dialog, {
+				"aria-label": label,
 				className: clsx("outline-none", dialogClassName),
 				children: ({ close }) => children(close)
 			})

package/dist/MenuDesktop.js

@@ -4,7 +4,7 @@ import { MenuTrigger } from "react-aria-components";
 import React, { useRef, useState } from "react";
 import { useHover } from "react-aria";
 var CLOSE_DELAY = 100;
-const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false,...props }) => {
+const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false, onAction,...props }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const timeoutRef = useRef(null);
 	const isHoveringTrigger = useRef(false);
@@ -43,6 +43,7 @@ const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover
 			...props,
 			offset: 0,
 			items,
+			onAction,
 			isOpen: triggerOnHover ? isOpen : void 0,
 			isNonModal: triggerOnHover,
 			onMouseEnter: triggerOnHover ? openMenu : void 0,

package/dist/MenuMobile.js

@@ -7,20 +7,24 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, Menu } from "react-aria-components";
 import { useRef, useState } from "react";
-const MenuMobile = ({ trigger, items,...props }) => {
+const MenuMobile = ({ trigger, items, onAction,...props }) => {
 	const uiStyle = UIStyle.useConfig();
 	const menuItemCva$1 = uiStyle?.menu?.itemCva ?? menuItemCva;
 	const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
 	const activeItemRef = useRef(null);
 	const activeItemParentsRef = useRef([]);
+	const lastEventRef = useRef(null);
 	const [isOpen, setIsOpen] = useState(false);
 	const [activeItem, setActiveItem] = useState(null);
-	const onAction = (item) => {
+	const handleAction = (item) => {
 		if (!item.children) {
 			activeItemRef.current = null;
 			activeItemParentsRef.current = [];
 			setActiveItem(null);
 			setIsOpen(false);
+			item.onAction?.();
+			onAction?.(item.id, lastEventRef.current);
+			lastEventRef.current = null;
 			return;
 		}
 		if (activeItemRef.current) activeItemParentsRef.current.push(activeItemRef.current);
@@ -47,17 +51,25 @@ const MenuMobile = ({ trigger, items,...props }) => {
 			})),
 			onPress: onBack,
 			children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-6" }), activeItem.label]
-		}), /* @__PURE__ */ jsx(Menu, {
-			autoFocus: true,
-			onClose,
-			className: menuCva$1({
-				...props,
-				isMobile: true
-			}),
-			children: (activeItem?.children ?? items).map((item, index) => /* @__PURE__ */ jsx(MenuItem$1, {
-				...item,
-				onAction: () => onAction(item)
-			}, index))
+		}), /* @__PURE__ */ jsx("div", {
+			onClickCapture: (e) => {
+				lastEventRef.current = e;
+			},
+			onKeyDownCapture: (e) => {
+				lastEventRef.current = e;
+			},
+			children: /* @__PURE__ */ jsx(Menu, {
+				autoFocus: true,
+				onClose,
+				className: menuCva$1({
+					...props,
+					isMobile: true
+				}),
+				children: (activeItem?.children ?? items).map((item, index) => /* @__PURE__ */ jsx(MenuItem$1, {
+					...item,
+					onAction: () => handleAction(item)
+				}, index))
+			})
 		})] })
 	});
 };

package/dist/MenuPopover.js

@@ -4,7 +4,9 @@ import { MenuItem as MenuItem$1 } from "./MenuItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Menu, Popover, SubmenuTrigger } from "react-aria-components";
-const MenuPopover = ({ items, className,...props }) => {
+import { useRef } from "react";
+const MenuPopover = ({ items, className, onAction,...props }) => {
+	const lastEventRef = useRef(null);
 	const uiStyle = UIStyle.useConfig();
 	const menuPopoverCva$1 = uiStyle?.menu?.popoverCva ?? menuPopoverCva;
 	const menuPopoverWrapperCva$1 = uiStyle?.menu?.popoverWrapperCva ?? menuPopoverWrapperCva;
@@ -14,15 +16,25 @@ const MenuPopover = ({ items, className,...props }) => {
 		className: clsx(menuPopoverCva$1({ ...props }), className),
 		children: /* @__PURE__ */ jsx("div", {
 			className: menuPopoverWrapperCva$1({ ...props }),
-			children: /* @__PURE__ */ jsx(Menu, {
-				className: menuCva$1({
-					...props,
-					isMobile: false
-				}),
-				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, {
-					offset: 0,
-					items: item.children
-				})] }, index))
+			children: /* @__PURE__ */ jsx("div", {
+				onClickCapture: (e) => {
+					lastEventRef.current = e;
+				},
+				onKeyDownCapture: (e) => {
+					lastEventRef.current = e;
+				},
+				children: /* @__PURE__ */ jsx(Menu, {
+					onAction: (key) => onAction?.(key, lastEventRef.current),
+					className: menuCva$1({
+						...props,
+						isMobile: false
+					}),
+					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, {
+						offset: 0,
+						onAction,
+						items: item.children
+					})] }, index))
+				})
 			})
 		})
 	});

package/dist/Modal.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, Modal, ModalOverlay } from "react-aria-components";
 import { useTranslation } from "react-i18next";
-const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true }) => {
+const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, shouldCloseOnInteractOutside }) => {
 	const { t } = useTranslation("ui");
 	const uiStyle = UIStyle.useConfig();
 	const modalMainCva = uiStyle?.modal?.mainCva ?? modalMain;
@@ -22,6 +22,10 @@ const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalCl
 		isDismissable,
 		isOpen,
 		shouldCloseOnInteractOutside: () => {
+			if (shouldCloseOnInteractOutside) {
+				if (portalContainerRef?.current) return false;
+				return shouldCloseOnInteractOutside();
+			}
 			return !portalContainerRef?.current;
 		},
 		onOpenChange: (open) => {

package/dist/components/Menu/Menu.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { Key, ReactElement } from 'react';
 import { MenuItemProps } from 'react-aria-components';
 import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from './menu.cva';
 export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children">, MenuItemVariantProps, MenuCvaVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps {
@@ -11,5 +11,6 @@ export interface MenuProps {
     items: MenuItem[];
     triggerOnHover?: boolean;
     closeDelay?: number;
+    onAction?: (key: Key, e: any) => void;
 }
 export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuDesktop.d.ts

@@ -1,2 +1,2 @@
 import { MenuProps } from './Menu';
-export declare const MenuDesktop: ({ trigger, items, closeDelay, triggerOnHover, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuDesktop: ({ trigger, items, closeDelay, triggerOnHover, onAction, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuMobile.d.ts

@@ -1,2 +1,2 @@
 import { MenuProps } from './Menu';
-export declare const MenuMobile: ({ trigger, items, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuMobile: ({ trigger, items, onAction, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuPopover.d.ts

@@ -1,5 +1,5 @@
 import { PopoverProps as AriaPopoverProps } from 'react-aria-components';
 import { MenuProps } from './Menu';
-export interface MenuPopoverProps extends Pick<MenuProps, "items">, AriaPopoverProps {
+export interface MenuPopoverProps extends Pick<MenuProps, "items" | "onAction">, AriaPopoverProps {
 }
-export declare const MenuPopover: ({ items, className, ...props }: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuPopover: ({ items, className, onAction, ...props }: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/BottomSheet/BottomSheet.d.ts

@@ -13,6 +13,7 @@ interface BottomSheetBaseProps {
     footer?: ReactNode;
     sheetMarginTop?: number;
     sheetMarginBottom?: number;
+    shouldCloseOnInteractOutside?: () => boolean;
 }
 export interface BottomSheetProps extends BottomSheetBaseProps {
     trigger?: ReactNode;

package/dist/components/overlays/Drawer/Drawer.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode, RefObject } from 'react';
 export interface DrawerProps {
+    label: string;
     isOpen?: boolean;
     portalContainerRef?: RefObject<HTMLElement>;
     onOpenChange?: (isOpen: boolean) => void;
@@ -9,5 +10,6 @@ export interface DrawerProps {
     overlayClassName?: string;
     dialogClassName?: string;
     className?: string;
+    shouldCloseOnInteractOutside?: () => boolean;
 }
-export declare const Drawer: ({ isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/Modal/Modal.d.ts

@@ -9,5 +9,6 @@ export interface ModalProps extends ModalVariantProps {
     overlayClassName?: string;
     showCloseIcon?: boolean;
     isDismissable?: boolean;
+    shouldCloseOnInteractOutside?: () => boolean;
 }
-export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+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

@@ -155,6 +155,7 @@ export declare const resources: {
                 networkError: string;
                 canceledError: string;
                 unknownError: string;
+                unknownErrorWithCode: string;
             };
         };
     };

package/dist/error-handling.js

@@ -50,7 +50,13 @@ var ErrorHandler = class {
 		const unknownError = {
 			code: "UNKNOWN_ERROR",
 			condition: () => true,
-			getMessage: () => i18next.t(($) => $.sharedErrors.unknownError, { ns: "ui" })
+			getMessage: (e) => {
+				if (axios.isAxiosError(e) && e.response?.data?.code) return i18next.t(($) => $.sharedErrors.unknownErrorWithCode, {
+					ns: "ui",
+					code: e.response.data.code
+				});
+				return i18next.t(($) => $.sharedErrors.unknownError, { ns: "ui" });
+			}
 		};
 		this.entries = [
 			...entries,
@@ -79,7 +85,13 @@ var ErrorHandler = class {
 		if (typeof error === "string") return error;
 		if (error instanceof Error) return error.message;
 		if (error instanceof ApplicationException) return error.message;
-		if (fallbackToUnknown) return i18next.t(($) => $.sharedErrors.unknownError, { ns: "ui" });
+		if (fallbackToUnknown) {
+			if (error && typeof error === "object" && "code" in error) return i18next.t(($) => $.sharedErrors.unknownErrorWithCode, {
+				ns: "ui",
+				code: error.code
+			});
+			return i18next.t(($) => $.sharedErrors.unknownError, { ns: "ui" });
+		}
 		return null;
 	}
 };

package/dist/translation.js

@@ -141,7 +141,8 @@ var translation_default = {
 		"internalError": "An internal error occurred. This is most likely a bug on our end. Please try again later.",
 		"networkError": "A network error occurred. Are you connected to the internet?",
 		"canceledError": "The request was canceled.",
-		"unknownError": "An unknown error occurred. Please try again later."
+		"unknownError": "An unknown error occurred.",
+		"unknownErrorWithCode": "An unknown error occurred. Error code: \"{{code}}\""
 	}
 };
 export { translation_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.1.15",
+  "version": "2.1.17",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",