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

package/cjs/index.js

@@ -39,8 +39,6 @@ __export(src_exports, {
   MenuItem: () => MenuItem,
   MenuItemGroup: () => MenuItemGroup,
   MenuList: () => MenuList,
-  NotificationLevel: () => NotificationLevel,
-  NotificationsContext: () => NotificationsContext,
   NotificationsProvider: () => NotificationsProvider,
   PopupComponent: () => PopupComponent2,
   PopupMenu: () => PopupMenu,
@@ -1753,7 +1751,7 @@ var PopupMenu = ({
   className,
   disabled = false,
   label,
-  icon = label ? "chevron-down" : "more-vert",
+  icon: icon2 = label ? "chevron-down" : "more-vert",
   id: idProp,
   menuActionHandler,
   menuBuilder,
@@ -1795,12 +1793,12 @@ var PopupMenu = ({
         ref: rootRef,
         variant: "secondary",
         children: [
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_vuu_ui_controls.Icon, { name: icon }) : null,
+          icon2 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_vuu_ui_controls.Icon, { name: icon2 }) : null,
           label
         ]
       }
     );
-  } else if (icon) {
+  } else if (icon2) {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_vuu_ui_controls.IconButton,
       {
@@ -1811,7 +1809,7 @@ var PopupMenu = ({
           "saltButton-active": menuOpen
         }),
         disabled,
-        icon,
+        icon: icon2,
         ref: rootRef,
         variant
       }
@@ -1835,7 +1833,7 @@ var Prompt = ({
   PopupProps = EMPTY_PROPS2,
   cancelButtonLabel = "Cancel",
   confirmButtonLabel = "Confirm",
-  icon,
+  icon: icon2,
   onCancel,
   onConfirm,
   style,
@@ -1880,7 +1878,7 @@ var Prompt = ({
       ref: rootRef,
       style: { ...style, ...position },
       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { className: `${classBase5}-form`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${classBase5}-header`, "data-icon": icon, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${classBase5}-header`, "data-icon": icon2, children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${classBase5}-text`, children: text }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `${classBase5}-buttonBar`, children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core3.Button, { onClick: onCancel, variant: "secondary", children: cancelButtonLabel }),
@@ -2104,60 +2102,30 @@ var useTooltip = ({
 };
 
 // src/notifications/NotificationsProvider.tsx
-var import_react18 = __toESM(require("react"));
-var import_clsx10 = __toESM(require("clsx"));
+var import_react20 = __toESM(require("react"));
+
+// src/notifications/NotificationsCenter.tsx
+var import_react19 = require("react");
 var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+
+// src/notifications/ToastNotification.tsx
+var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
+var import_clsx10 = __toESM(require("clsx"));
+var import_react18 = require("react");
 var import_jsx_runtime12 = require("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 = import_react18.default.createContext({
-  notify: () => "have you forgotten to provide a NotificationProvider?"
-});
-var NotificationsProvider = (props) => {
-  const [notifications, setNotifications] = (0, import_react18.useState)([]);
-  const notify = (0, import_react18.useCallback)((notification) => {
-    const newNotification = { ...notification, id: (0, import_vuu_utils10.getUniqueId)() };
-    setNotifications((prev) => [...prev, newNotification]);
-    setTimeout(() => {
-      setNotifications((prev) => prev.filter((n) => n !== newNotification));
-    }, toastDisplayDuration + horizontalTransitionDuration * 2);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(NotificationsContext.Provider, { value: { notify }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        style: {
-          width: toastWidth + toastContainerRightPadding + toastContainerLeftPadding
-        },
-        children: notifications.map((notification, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          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 = () => (0, import_react18.useContext)(NotificationsContext);
 var ToastNotification = (props) => {
   const { top, notification, animated = true } = props;
   const [right, setRight] = (0, import_react18.useState)(-toastWidth - toastContainerRightPadding);
@@ -2173,7 +2141,7 @@ var ToastNotification = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
-      className: (0, import_clsx10.default)(`${classBase7}-toast`, notification.type),
+      className: (0, import_clsx10.default)(classBase7, `${classBase7}-${notification.type}`),
       style: {
         height: toastHeight,
         right,
@@ -2182,15 +2150,7 @@ var ToastNotification = (props) => {
         transition: animated ? `right ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms ` : "none"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "div",
-          {
-            className: (0, import_clsx10.default)(
-              `${classBase7}-toastIcon`,
-              `${notification.type}-icon`
-            )
-          }
-        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_ui_controls2.Icon, { name: icon[notification.type] }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${classBase7}-toastContent`, children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("strong", { className: `${classBase7}-toastHeader`, children: notification.header }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: notification.body })
@@ -2199,4 +2159,62 @@ var ToastNotification = (props) => {
     }
   ) });
 };
+
+// src/notifications/NotificationsCenter.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var toastOffsetTop = 60;
+var toastDisplayDuration2 = 6e3;
+var horizontalTransitionDuration2 = 1e3;
+var toastHeight2 = 56;
+var toastContainerContentGap = 10;
+var NotificationsCenter = ({
+  notificationsContext
+}) => {
+  const [notifications, setNotifications] = (0, import_react19.useState)([]);
+  (0, import_react19.useMemo)(() => {
+    notificationsContext.setNotify((notification) => {
+      const newNotification = {
+        ...notification,
+        id: (0, import_vuu_utils10.getUniqueId)()
+      };
+      setNotifications((prev) => prev.concat(newNotification));
+      setTimeout(() => {
+        setNotifications((prev) => prev.filter((n) => n !== newNotification));
+      }, toastDisplayDuration2 + horizontalTransitionDuration2 * 2);
+    });
+  }, [notificationsContext]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: notifications.map((notification, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    ToastNotification,
+    {
+      top: toastOffsetTop + (toastHeight2 + toastContainerContentGap) * i,
+      notification
+    },
+    notification.id
+  )) });
+};
+
+// src/notifications/NotificationsProvider.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var NotificationsContextObject = class {
+  constructor() {
+    this.notify = () => "have you forgotten to provide a NotificationsCenter?";
+    this.setNotify = (dispatcher) => {
+      this.notify = dispatcher;
+    };
+  }
+};
+var NotificationsContext = import_react20.default.createContext(
+  new NotificationsContextObject()
+);
+var NotificationsProvider = (props) => {
+  const context = (0, import_react20.useContext)(NotificationsContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(NotificationsContext.Provider, { value: context, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NotificationsCenter, { notificationsContext: context }),
+    props.children
+  ] });
+};
+var useNotifications = () => {
+  const { notify } = (0, import_react20.useContext)(NotificationsContext);
+  return notify;
+};
 //# sourceMappingURL=index.js.map