@vertigis/react-ui 15.2.3 → 15.4.0

package/Chip/Chip.d.ts

@@ -0,0 +1,7 @@
+import type { ChipProps as MuiChipProps } from "@mui/material/Chip";
+export * from "@mui/material/Chip";
+export interface ChipProps extends MuiChipProps {
+    deleteLabel?: string;
+}
+declare const Chip: import("react").ForwardRefExoticComponent<Omit<ChipProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Chip;

package/Chip/Chip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MuiChip from "@mui/material/Chip";
+import { forwardRef, useEffect, useMemo, useState } from "react";
+import IconButton from "../IconButton/index.js";
+import Typography from "../Typography/index.js";
+import Clear from "../icons/Clear.js";
+export * from "@mui/material/Chip";
+const Chip = forwardRef(({ deleteIcon, label, deleteLabel = "", onClick, onDelete, ...props }, ref) => {
+    // Replace the close button as it is not WCAG compliant by default.
+    const deleteChipButton = useMemo(() => (_jsx(IconButton, { size: "small", "aria-label": deleteLabel, title: deleteLabel, children: deleteIcon ? deleteIcon : _jsx(Clear, { fontSize: "small" }) })), [deleteLabel, deleteIcon]);
+    const [title, setTitle] = useState();
+    useEffect(() => {
+        setTitle(typeof label === "string" ? label : undefined);
+    }, [label]);
+    return (_jsx(MuiChip, { ref: ref, "aria-label": onClick ? title : undefined, deleteIcon: onDelete ? deleteChipButton : undefined, label: _jsx(Typography, { children: label }), title: title, onClick: onClick, onDelete: onDelete, 
+        // The chip should only have the button role and be focusable if
+        // it is clickable.
+        role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : -1, ...props }));
+});
+export default Chip;

package/Chip/index.d.ts

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

package/Chip/index.js

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

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.2.3",
+  "version": "15.4.0",
   "description": "Utilities and React components used in VertiGIS applications.",
   "keywords": [
     "vertigis",