@trops/dash-core 0.1.117 → 0.1.118

package/dist/index.esm.js

@@ -25,6 +25,7 @@ import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
 import _inherits from '@babel/runtime/helpers/inherits';
 import colors from 'tailwindcss/colors';
 import * as ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import { findIconDefinition } from '@fortawesome/fontawesome-svg-core';
 import algoliasearch from 'algoliasearch';
 import { InstantSearch, Hits } from 'react-instantsearch-hooks-web';
@@ -39775,13 +39776,57 @@ var FooterPopover = function FooterPopover(_ref2) {
     onOpenSettings = _ref2.onOpenSettings,
     onSignIn = _ref2.onSignIn,
     onSignOut = _ref2.onSignOut;
+  var buttonRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    doNotDisturb = _useState2[0],
+    setDoNotDisturb = _useState2[1];
   var displayName = authStatus === "authenticated" && authProfile ? authProfile.displayName || authProfile.username : "Account";
+
+  // Load initial DND state
+  useEffect(function () {
+    var _window$mainApi;
+    var timeout = new Promise(function (_, reject) {
+      return setTimeout(function () {
+        return reject(new Error("timeout"));
+      }, 2000);
+    });
+    var fetch = (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.notifications) === null || _window$mainApi === void 0 ? void 0 : _window$mainApi.getPreferences();
+    if (fetch) {
+      Promise.race([fetch, timeout]).then(function (prefs) {
+        if (prefs) setDoNotDisturb(prefs.doNotDisturb);
+      })["catch"](function () {});
+    }
+  }, []);
+
+  // Sync when toggled from macOS menu
+  useEffect(function () {
+    var _window$mainApi2, _window$mainApi2$onDn;
+    var cleanup = (_window$mainApi2 = window.mainApi) === null || _window$mainApi2 === void 0 || (_window$mainApi2 = _window$mainApi2.notifications) === null || _window$mainApi2 === void 0 || (_window$mainApi2$onDn = _window$mainApi2.onDndChanged) === null || _window$mainApi2$onDn === void 0 ? void 0 : _window$mainApi2$onDn.call(_window$mainApi2, function (dnd) {
+      setDoNotDisturb(dnd);
+    });
+    return function () {
+      if (cleanup) cleanup();
+    };
+  }, []);
+  function handleToggleDnd() {
+    var _window$mainApi3;
+    var newValue = !doNotDisturb;
+    setDoNotDisturb(newValue);
+    (_window$mainApi3 = window.mainApi) === null || _window$mainApi3 === void 0 || (_window$mainApi3 = _window$mainApi3.notifications) === null || _window$mainApi3 === void 0 || (_window$mainApi3 = _window$mainApi3.setGlobal({
+      doNotDisturb: newValue
+    })) === null || _window$mainApi3 === void 0 || _window$mainApi3["catch"](function () {});
+  }
   return /*#__PURE__*/jsx(Popover, {
     className: "relative",
     children: function children(_ref3) {
-      var close = _ref3.close;
+      var _rect$left;
+      var open = _ref3.open,
+        close = _ref3.close;
+      var rect = open && buttonRef.current ? buttonRef.current.getBoundingClientRect() : null;
       return /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsxs(Popover.Button, {
+          ref: buttonRef,
           className: "flex items-center w-full gap-2 px-3 py-2 rounded-md text-sm opacity-80 hover:opacity-100 transition-colors duration-150 cursor-pointer hover:bg-white/5 focus:outline-none",
           title: collapsed ? displayName : undefined,
           children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
@@ -39791,15 +39836,28 @@ var FooterPopover = function FooterPopover(_ref2) {
             className: "flex-1 text-left truncate",
             children: displayName
           })]
-        }), /*#__PURE__*/jsx(Transition, {
+        }), /*#__PURE__*/createPortal(/*#__PURE__*/jsxs(Transition, {
+          show: open,
           enter: "transition ease-out duration-100",
           enterFrom: "transform opacity-0 scale-95",
           enterTo: "transform opacity-100 scale-100",
           leave: "transition ease-in duration-75",
           leaveFrom: "transform opacity-100 scale-100",
           leaveTo: "transform opacity-0 scale-95",
-          children: /*#__PURE__*/jsx(Popover.Panel, {
-            className: "absolute bottom-full left-0 mb-2 w-52 rounded-lg border border-white/10 bg-neutral-900 shadow-xl z-50",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "fixed inset-0",
+            style: {
+              zIndex: 9998
+            },
+            onClick: close
+          }), /*#__PURE__*/jsx(Popover.Panel, {
+            "static": true,
+            className: "fixed w-52 rounded-lg border border-white/10 bg-neutral-900 shadow-xl",
+            style: {
+              zIndex: 9999,
+              left: (_rect$left = rect === null || rect === void 0 ? void 0 : rect.left) !== null && _rect$left !== void 0 ? _rect$left : 0,
+              bottom: rect ? window.innerHeight - rect.top + 8 : 0
+            },
             children: /*#__PURE__*/jsxs("div", {
               className: "p-1.5 space-y-0.5",
               children: [/*#__PURE__*/jsx(PopoverItem, {
@@ -39816,6 +39874,11 @@ var FooterPopover = function FooterPopover(_ref2) {
                   changeThemeVariant(themeVariant === "dark" ? "light" : "dark");
                   close();
                 }
+              }), /*#__PURE__*/jsx(PopoverItem, {
+                icon: doNotDisturb ? "bell-slash" : "bell",
+                label: "Do Not Disturb",
+                onClick: handleToggleDnd,
+                active: doNotDisturb
               }), /*#__PURE__*/jsx("div", {
                 className: "border-t border-white/10 my-1"
               }), authStatus === "authenticated" ? /*#__PURE__*/jsx(PopoverItem, {
@@ -39834,8 +39897,8 @@ var FooterPopover = function FooterPopover(_ref2) {
                 }
               })]
             })
-          })
-        })]
+          })]
+        }), document.body)]
       });
     }
   });
@@ -39843,16 +39906,21 @@ var FooterPopover = function FooterPopover(_ref2) {
 var PopoverItem = function PopoverItem(_ref4) {
   var icon = _ref4.icon,
     label = _ref4.label,
-    onClick = _ref4.onClick;
+    onClick = _ref4.onClick,
+    _ref4$active = _ref4.active,
+    active = _ref4$active === void 0 ? false : _ref4$active;
   return /*#__PURE__*/jsxs("button", {
     type: "button",
     onClick: onClick,
-    className: "flex items-center w-full gap-2 px-3 py-2 rounded-md text-sm text-white/80 hover:text-white hover:bg-white/10 transition-colors duration-150 cursor-pointer",
+    className: "flex items-center w-full gap-2 px-3 py-2 rounded-md text-sm ".concat(active ? "text-white bg-white/10" : "text-white/80 hover:text-white hover:bg-white/10", " transition-colors duration-150 cursor-pointer"),
     children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
       icon: icon,
       className: "h-3.5 w-3.5 flex-shrink-0"
     }), /*#__PURE__*/jsx("span", {
+      className: "flex-1 text-left",
       children: label
+    }), active && /*#__PURE__*/jsx("span", {
+      className: "h-1.5 w-1.5 rounded-full bg-amber-400 flex-shrink-0"
     })]
   });
 };