@octavius2929-personal/design-system 1.0.0 → 1.1.0

package/dist/index.cjs

@@ -1974,17 +1974,33 @@ var defaultIcons = {
   warn: TriangleAlertIcon,
   danger: CircleXIcon
 };
+var roleBySeverity = {
+  info: "status",
+  ok: "status",
+  warn: "alert",
+  danger: "alert"
+};
 var Alert = (0, import_react41.forwardRef)(function Alert2({ severity: severity2 = "info", title, icon, className, testId, children, ...rest }, ref) {
   const styles = useStyles17({ severity: severity2, className });
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
   const IconComponent = icon ?? defaultIcons[severity2];
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref, role: "alert", className: styles.root, "data-testid": dataTestId, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: styles.iconSlot, "data-testid": slot("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconComponent, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: styles.content, "data-testid": slot("content"), children: [
-      title != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typography, { variant: "h4", children: title }),
-      children != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typography, { variant: "body", color: "muted", children })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      ref,
+      role: roleBySeverity[severity2],
+      className: styles.root,
+      "data-testid": dataTestId,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: styles.iconSlot, "data-testid": slot("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconComponent, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: styles.content, "data-testid": slot("content"), children: [
+          title != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typography, { variant: "h4", children: title }),
+          children != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typography, { variant: "body", color: "muted", children })
+        ] })
+      ]
+    }
+  );
 });
 
 // src/components/tooltip/index.tsx
@@ -3120,26 +3136,80 @@ function useStyles28() {
 
 // src/components/snackbar/index.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var Snackbar = (0, import_react63.forwardRef)(function Snackbar2({ open, message: message2, action, onClose, testId }, ref) {
+var DEFAULT_DURATION = 5e3;
+var Snackbar = (0, import_react63.forwardRef)(function Snackbar2({ open, message: message2, action, onClose, duration = DEFAULT_DURATION, testId }, ref) {
   const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles28();
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
+  const onCloseRef = (0, import_react63.useRef)(onClose);
+  (0, import_react63.useEffect)(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+  const interactingRef = (0, import_react63.useRef)({ hover: false, focus: false });
+  const timeoutRef = (0, import_react63.useRef)();
+  const clearTimer = (0, import_react63.useCallback)(() => {
+    if (timeoutRef.current !== void 0) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = void 0;
+    }
+  }, []);
+  const scheduleTimer = (0, import_react63.useCallback)(() => {
+    clearTimer();
+    if (!open || duration == null || !onCloseRef.current) return;
+    if (interactingRef.current.hover || interactingRef.current.focus) return;
+    timeoutRef.current = setTimeout(() => {
+      onCloseRef.current?.();
+    }, duration);
+  }, [open, duration, clearTimer]);
+  (0, import_react63.useEffect)(() => {
+    scheduleTimer();
+    return clearTimer;
+  }, [scheduleTimer, clearTimer]);
+  const handleMouseEnter = () => {
+    interactingRef.current.hover = true;
+    clearTimer();
+  };
+  const handleMouseLeave = () => {
+    interactingRef.current.hover = false;
+    scheduleTimer();
+  };
+  const handleFocus = () => {
+    interactingRef.current.focus = true;
+    clearTimer();
+  };
+  const handleBlur = () => {
+    interactingRef.current.focus = false;
+    scheduleTimer();
+  };
   if (!open || typeof document === "undefined") return null;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref, role: "status", className: root24, "data-testid": dataTestId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: messageClass, "data-testid": slot("message"), children: message2 }),
-      action,
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Close",
-          className: closeBtn2,
-          "data-testid": slot("close"),
-          onClick: onClose,
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(XIcon, { size: 18 })
-        }
-      )
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: root24,
+        "data-testid": dataTestId,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: messageClass, "data-testid": slot("message"), children: message2 }),
+          action,
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close",
+              className: closeBtn2,
+              "data-testid": slot("close"),
+              onClick: onClose,
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(XIcon, { size: 18 })
+            }
+          )
+        ]
+      }
+    ),
     document.body
   );
 });