@vuu-ui/vuu-popups 0.8.28-debug → 0.8.29-debug

package/esm/index.js

@@ -1711,7 +1711,7 @@ var PopupMenu = ({
   className,
   disabled = false,
   label,
-  icon = label ? "chevron-down" : "more-vert",
+  icon: icon2 = label ? "chevron-down" : "more-vert",
   id: idProp,
   menuActionHandler,
   menuBuilder,
@@ -1753,12 +1753,12 @@ var PopupMenu = ({
         ref: rootRef,
         variant: "secondary",
         children: [
-          icon ? /* @__PURE__ */ jsx9(Icon, { name: icon }) : null,
+          icon2 ? /* @__PURE__ */ jsx9(Icon, { name: icon2 }) : null,
           label
         ]
       }
     );
-  } else if (icon) {
+  } else if (icon2) {
     return /* @__PURE__ */ jsx9(
       IconButton,
       {
@@ -1769,7 +1769,7 @@ var PopupMenu = ({
           "saltButton-active": menuOpen
         }),
         disabled,
-        icon,
+        icon: icon2,
         ref: rootRef,
         variant
       }
@@ -1793,7 +1793,7 @@ var Prompt = ({
   PopupProps = EMPTY_PROPS2,
   cancelButtonLabel = "Cancel",
   confirmButtonLabel = "Confirm",
-  icon,
+  icon: icon2,
   onCancel,
   onConfirm,
   style,
@@ -1838,7 +1838,7 @@ var Prompt = ({
       ref: rootRef,
       style: { ...style, ...position },
       children: /* @__PURE__ */ jsxs4("form", { className: `${classBase5}-form`, children: [
-        /* @__PURE__ */ jsx10("div", { className: `${classBase5}-header`, "data-icon": icon, children: title }),
+        /* @__PURE__ */ jsx10("div", { className: `${classBase5}-header`, "data-icon": icon2, children: title }),
         /* @__PURE__ */ jsx10("div", { className: `${classBase5}-text`, children: text }),
         /* @__PURE__ */ jsxs4("div", { className: `${classBase5}-buttonBar`, children: [
           /* @__PURE__ */ jsx10(Button3, { onClick: onCancel, variant: "secondary", children: cancelButtonLabel }),
@@ -2062,60 +2062,30 @@ var useTooltip = ({
 };
 
 // src/notifications/NotificationsProvider.tsx
-import React4, { useState as useState8, useContext as useContext2, useCallback as useCallback13, useEffect } from "react";
-import classNames from "clsx";
+import React4, { useContext as useContext2 } from "react";
+
+// src/notifications/NotificationsCenter.tsx
+import { useMemo as useMemo7, useState as useState9 } from "react";
 import { getUniqueId } from "@vuu-ui/vuu-utils";
+
+// src/notifications/ToastNotification.tsx
+import { Icon as Icon2 } from "@vuu-ui/vuu-ui-controls";
+import cx10 from "clsx";
+import { useEffect, useState as useState8 } from "react";
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
-var toastOffsetTop = 60;
+var toastWidth = 300;
+var toastContainerRightPadding = 50;
 var toastDisplayDuration = 6e3;
 var horizontalTransitionDuration = 1e3;
-var verticalTransitionDuration = 300;
 var toastHeight = 56;
-var toastWidth = 300;
-var toastContainerContentGap = 10;
-var toastContainerLeftPadding = 10;
-var toastContainerRightPadding = 50;
-var classBase7 = "vuuToastNotifications";
-var NotificationLevel = /* @__PURE__ */ ((NotificationLevel2) => {
-  NotificationLevel2["Info"] = "info";
-  NotificationLevel2["Success"] = "success";
-  NotificationLevel2["Warning"] = "warning";
-  NotificationLevel2["Error"] = "error";
-  return NotificationLevel2;
-})(NotificationLevel || {});
-var NotificationsContext = React4.createContext({
-  notify: () => "have you forgotten to provide a NotificationProvider?"
-});
-var NotificationsProvider = (props) => {
-  const [notifications, setNotifications] = useState8([]);
-  const notify = useCallback13((notification) => {
-    const newNotification = { ...notification, id: getUniqueId() };
-    setNotifications((prev) => [...prev, newNotification]);
-    setTimeout(() => {
-      setNotifications((prev) => prev.filter((n) => n !== newNotification));
-    }, toastDisplayDuration + horizontalTransitionDuration * 2);
-  }, []);
-  return /* @__PURE__ */ jsxs5(NotificationsContext.Provider, { value: { notify }, children: [
-    /* @__PURE__ */ jsx12(
-      "div",
-      {
-        style: {
-          width: toastWidth + toastContainerRightPadding + toastContainerLeftPadding
-        },
-        children: notifications.map((notification, i) => /* @__PURE__ */ jsx12(
-          ToastNotification,
-          {
-            top: toastOffsetTop + (toastHeight + toastContainerContentGap) * i,
-            notification
-          },
-          notification.id
-        ))
-      }
-    ),
-    props.children
-  ] });
+var verticalTransitionDuration = 300;
+var classBase7 = "vuuToastNotification";
+var icon = {
+  error: "error",
+  info: "info-circle",
+  success: "tick",
+  warning: "warn-triangle"
 };
-var useNotifications = () => useContext2(NotificationsContext);
 var ToastNotification = (props) => {
   const { top, notification, animated = true } = props;
   const [right, setRight] = useState8(-toastWidth - toastContainerRightPadding);
@@ -2131,7 +2101,7 @@ var ToastNotification = (props) => {
   return /* @__PURE__ */ jsx12(Portal, { children: /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: classNames(`${classBase7}-toast`, notification.type),
+      className: cx10(classBase7, `${classBase7}-${notification.type}`),
       style: {
         height: toastHeight,
         right,
@@ -2140,15 +2110,7 @@ var ToastNotification = (props) => {
         transition: animated ? `right ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms ` : "none"
       },
       children: [
-        /* @__PURE__ */ jsx12(
-          "div",
-          {
-            className: classNames(
-              `${classBase7}-toastIcon`,
-              `${notification.type}-icon`
-            )
-          }
-        ),
+        /* @__PURE__ */ jsx12(Icon2, { name: icon[notification.type] }),
         /* @__PURE__ */ jsxs5("div", { className: `${classBase7}-toastContent`, children: [
           /* @__PURE__ */ jsx12("strong", { className: `${classBase7}-toastHeader`, children: notification.header }),
           /* @__PURE__ */ jsx12("div", { children: notification.body })
@@ -2157,6 +2119,64 @@ var ToastNotification = (props) => {
     }
   ) });
 };
+
+// src/notifications/NotificationsCenter.tsx
+import { Fragment as Fragment3, jsx as jsx13 } from "react/jsx-runtime";
+var toastOffsetTop = 60;
+var toastDisplayDuration2 = 6e3;
+var horizontalTransitionDuration2 = 1e3;
+var toastHeight2 = 56;
+var toastContainerContentGap = 10;
+var NotificationsCenter = ({
+  notificationsContext
+}) => {
+  const [notifications, setNotifications] = useState9([]);
+  useMemo7(() => {
+    notificationsContext.setNotify((notification) => {
+      const newNotification = {
+        ...notification,
+        id: getUniqueId()
+      };
+      setNotifications((prev) => prev.concat(newNotification));
+      setTimeout(() => {
+        setNotifications((prev) => prev.filter((n) => n !== newNotification));
+      }, toastDisplayDuration2 + horizontalTransitionDuration2 * 2);
+    });
+  }, [notificationsContext]);
+  return /* @__PURE__ */ jsx13(Fragment3, { children: notifications.map((notification, i) => /* @__PURE__ */ jsx13(
+    ToastNotification,
+    {
+      top: toastOffsetTop + (toastHeight2 + toastContainerContentGap) * i,
+      notification
+    },
+    notification.id
+  )) });
+};
+
+// src/notifications/NotificationsProvider.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var NotificationsContextObject = class {
+  constructor() {
+    this.notify = () => "have you forgotten to provide a NotificationsCenter?";
+    this.setNotify = (dispatcher) => {
+      this.notify = dispatcher;
+    };
+  }
+};
+var NotificationsContext = React4.createContext(
+  new NotificationsContextObject()
+);
+var NotificationsProvider = (props) => {
+  const context = useContext2(NotificationsContext);
+  return /* @__PURE__ */ jsxs6(NotificationsContext.Provider, { value: context, children: [
+    /* @__PURE__ */ jsx14(NotificationsCenter, { notificationsContext: context }),
+    props.children
+  ] });
+};
+var useNotifications = () => {
+  const { notify } = useContext2(NotificationsContext);
+  return notify;
+};
 export {
   ContextMenu,
   ContextMenuContext,
@@ -2167,8 +2187,6 @@ export {
   MenuItem,
   MenuItemGroup,
   MenuList,
-  NotificationLevel,
-  NotificationsContext,
   NotificationsProvider,
   PopupComponent2 as PopupComponent,
   PopupMenu,