@vertigis/react-ui 15.3.0 → 15.5.0

package/Notification/Notification.d.ts

@@ -0,0 +1,22 @@
+import { type AlertProps } from "@mui/material";
+import type { FC } from "react";
+import type { SnackbarProps } from "../Snackbar";
+/**
+ * Properties for the Notification component.
+ */
+export interface NotificationProperties extends SnackbarProps {
+    /**
+     * The title for the close button.
+     */
+    closeButtonTitle: string;
+    /**
+     * Optional alert properties.
+     */
+    alertProps?: AlertProps;
+}
+/**
+ * A Helper component that wraps a Mui Snackbar and displays a circular progress
+ * representing the current auto hide duration.
+ */
+declare const Notification: FC<NotificationProperties>;
+export default Notification;

package/Notification/Notification.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, CircularProgress, useTheme } from "@mui/material";
+import { useState } from "react";
+import IconButton from "../IconButton/index.js";
+import Snackbar from "../Snackbar/index.js";
+import CloseIcon from "../icons/Close.js";
+/**
+ * A Helper component that wraps a Mui Snackbar and displays a circular progress
+ * representing the current auto hide duration.
+ */
+const Notification = ({ alertProps, closeButtonTitle, children, ...props }) => {
+    const [progress, setProgress] = useState(100);
+    const { spacing } = useTheme();
+    return (_jsx(Snackbar, { ...props, timeoutProgress: remaining => {
+            if (props.autoHideDuration) {
+                setProgress((remaining / props.autoHideDuration) * 100);
+            }
+        }, children: _jsx(Alert, { ...alertProps, action: [
+                props.autoHideDuration && (_jsx(CircularProgress, { variant: "determinate", value: progress, color: "inherit", sx: {
+                        position: "absolute",
+                    }, 
+                    // Magic size to match the close icon button perfectly.
+                    size: spacing(4.8) }, "progress")),
+                _jsx(IconButton, { title: closeButtonTitle, color: "inherit", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: _jsx(CloseIcon, { fontSize: "small" }) }, "close"),
+            ], children: children }) }));
+};
+export default Notification;

package/Notification/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Notification.js";
+export { default } from "./Notification.js";

package/Notification/index.js

@@ -0,0 +1,2 @@
+export * from "./Notification.js";
+export { default } from "./Notification.js";

package/Snackbar/Snackbar.d.ts

@@ -0,0 +1,12 @@
+import { type SnackbarProps as MUISnackbarProps } from "@mui/material/Snackbar";
+import type { FC } from "react";
+export * from "@mui/material/Snackbar";
+export interface SnackbarProps extends MUISnackbarProps {
+    /**
+     * Optionally specify a callback for the snackbar timeout progress. Only
+     * takes effect when 'autoHideDuration' is defined.
+     */
+    timeoutProgress?: (remaining: number) => void;
+}
+declare const Snackbar: FC<SnackbarProps>;
+export default Snackbar;

package/Snackbar/Snackbar.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SnackbarMUI, {} from "@mui/material/Snackbar";
+import { useEffect, useRef } from "react";
+// MUST be the first export, since some of the exports are overridden below.
+export * from "@mui/material/Snackbar";
+const UPDATE_TIME = 100;
+const Snackbar = ({ open, onBlur, onClose, onClick, onFocus, onMouseEnter, onTouchStart, onMouseLeave, autoHideDuration: autoHideDurationInitial, timeoutProgress, ...others }) => {
+    const timeoutHandle = useRef();
+    const autoHideDuration = useRef(autoHideDurationInitial);
+    const useTimeout = !!autoHideDurationInitial;
+    const cancelTimeout = () => {
+        if (useTimeout) {
+            timeoutHandle.current?.remove();
+            timeoutHandle.current = undefined;
+            autoHideDuration.current = 0;
+            timeoutProgress?.(0);
+        }
+    };
+    const pauseTimeout = () => {
+        timeoutHandle.current?.remove();
+        timeoutHandle.current = undefined;
+    };
+    const resumeTimeout = () => {
+        if (open && useTimeout && autoHideDuration.current) {
+            const timeout = window.setInterval(() => {
+                if (autoHideDuration.current) {
+                    autoHideDuration.current = Math.max(autoHideDuration.current - UPDATE_TIME, 0);
+                    timeoutProgress?.(autoHideDuration.current);
+                }
+                else {
+                    cancelTimeout();
+                    onClose?.({}, "timeout");
+                }
+            }, UPDATE_TIME);
+            timeoutHandle.current = {
+                remove: () => {
+                    window.clearInterval(timeout);
+                },
+            };
+        }
+    };
+    useEffect(() => {
+        if (open && useTimeout) {
+            // reset initial timeout.
+            autoHideDuration.current = autoHideDurationInitial;
+            timeoutProgress?.(autoHideDurationInitial);
+            resumeTimeout();
+        }
+        return cancelTimeout;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, autoHideDurationInitial]);
+    return (_jsx(SnackbarMUI, { open: open, onClose: onClose, onTouchStart: event => {
+            cancelTimeout();
+            onTouchStart?.(event);
+        }, onMouseEnter: event => {
+            pauseTimeout();
+            onMouseEnter?.(event);
+        }, onMouseLeave: event => {
+            resumeTimeout();
+            onMouseLeave?.(event);
+        }, onFocus: event => {
+            pauseTimeout();
+            onFocus?.(event);
+        }, onBlur: event => {
+            resumeTimeout();
+            onBlur?.(event);
+        }, onClick: event => {
+            cancelTimeout();
+            onClick?.(event);
+        }, ...others }));
+};
+export default Snackbar;

package/Snackbar/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "@mui/material/Snackbar";
-export * from "@mui/material/Snackbar";
+export { default } from "./Snackbar.js";
+export * from "./Snackbar.js";

package/Snackbar/index.js

@@ -1,2 +1,2 @@
-export { default } from "@mui/material/Snackbar";
-export * from "@mui/material/Snackbar";
+export { default } from "./Snackbar.js";
+export * from "./Snackbar.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/react-ui",
-  "version": "15.3.0",
+  "version": "15.5.0",
   "description": "Utilities and React components used in VertiGIS applications.",
   "keywords": [
     "vertigis",