@woobee/ui 0.2.1 → 0.2.2

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React16, { forwardRef, useRef, useEffect, createContext, useState, useImperativeHandle, useContext, useReducer, useCallback } from 'react';
+import React16, { forwardRef, useRef, useEffect, createContext, useState, useImperativeHandle, useContext, useReducer, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 
@@ -336,7 +336,7 @@ function useModalContext() {
 }
 function ModalProvider({ children }) {
   const [currentState, setCurrentState] = useState(0);
-  function reducer(state, action) {
+  function reducer2(state, action) {
     const updatedValues = { ...state };
     if ("modalShowing" in action) {
       updatedValues.modalShowing = action.modalShowing;
@@ -349,7 +349,7 @@ function ModalProvider({ children }) {
     }
     return updatedValues;
   }
-  const [values, dispatch] = useReducer(reducer, {
+  const [values, dispatch] = useReducer(reducer2, {
     modalShowing: false,
     drawerShowing: false
   });
@@ -1555,7 +1555,7 @@ function TagInput({
 }) {
   const [currentState, setCurrentState] = useState(0);
   const tagInputRef = useRef(null);
-  function reducer(state, action) {
+  function reducer2(state, action) {
     const updatedValues = { ...state };
     if ("tags" in action) {
       updatedValues.tags = Array.from(new Set(action.tags));
@@ -1568,7 +1568,7 @@ function TagInput({
     }
     return updatedValues;
   }
-  const [values, dispatch] = useReducer(reducer, {
+  const [values, dispatch] = useReducer(reducer2, {
     tags: []
   });
   const { tags } = values;
@@ -1660,6 +1660,60 @@ function NoData({ className }) {
   ] });
 }
 var ThemeContext = createContext(void 0);
+var currentIsDark = false;
+var matchMediaListeners = /* @__PURE__ */ new Set();
+var originalMatchMedia = null;
+if (typeof window !== "undefined") {
+  originalMatchMedia = window.matchMedia;
+  try {
+    const saved = localStorage.getItem("theme");
+    const prefersDark = originalMatchMedia.call(window, "(prefers-color-scheme: dark)").matches;
+    const isSystemOrNone = !saved || saved === "system";
+    currentIsDark = saved === "dark" || isSystemOrNone && prefersDark;
+  } catch (e) {
+  }
+  window.matchMedia = function(query) {
+    const normalized = query.replace(/\s+/g, "").toLowerCase();
+    const isDarkQuery = normalized.includes("prefers-color-scheme:dark");
+    const isLightQuery = normalized.includes("prefers-color-scheme:light");
+    if (isDarkQuery || isLightQuery) {
+      const matches = isDarkQuery ? currentIsDark : !currentIsDark;
+      return {
+        matches,
+        media: query,
+        onchange: null,
+        addListener(listener) {
+          matchMediaListeners.add({ listener, query });
+        },
+        removeListener(listener) {
+          for (const item of matchMediaListeners) {
+            if (item.listener === listener) {
+              matchMediaListeners.delete(item);
+            }
+          }
+        },
+        addEventListener(type, listener) {
+          if (type === "change") {
+            matchMediaListeners.add({ listener, query });
+          }
+        },
+        removeEventListener(type, listener) {
+          if (type === "change") {
+            for (const item of matchMediaListeners) {
+              if (item.listener === listener) {
+                matchMediaListeners.delete(item);
+              }
+            }
+          }
+        },
+        dispatchEvent(event) {
+          return true;
+        }
+      };
+    }
+    return originalMatchMedia.call(window, query);
+  };
+}
 function ThemeProvider({ children, defaultTheme = "system" }) {
   const [mode, setMode] = useState(defaultTheme);
   const [isDark, setIsDark] = useState(false);
@@ -1671,27 +1725,47 @@ function ThemeProvider({ children, defaultTheme = "system" }) {
   }, [defaultTheme]);
   useEffect(() => {
     if (!mounted) return;
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const media = originalMatchMedia ? originalMatchMedia.call(window, "(prefers-color-scheme: dark)") : null;
     const updateTheme = () => {
-      const prefersDark = media.matches;
-      const currentIsDark = mode === "dark" || mode === "system" && prefersDark;
-      if (currentIsDark) {
+      const prefersDark = media ? media.matches : false;
+      const currentIsDarkVal = mode === "dark" || mode === "system" && prefersDark;
+      if (currentIsDarkVal) {
         document.documentElement.classList.add("dark");
         document.documentElement.classList.remove("light");
       } else {
         document.documentElement.classList.remove("dark");
         document.documentElement.classList.add("light");
       }
-      setIsDark(currentIsDark);
+      currentIsDark = currentIsDarkVal;
+      setIsDark(currentIsDarkVal);
+      matchMediaListeners.forEach(({ listener, query }) => {
+        try {
+          const normalized = query.replace(/\s+/g, "").toLowerCase();
+          const isDarkQuery = normalized.includes("prefers-color-scheme:dark");
+          const matches = isDarkQuery ? currentIsDarkVal : !currentIsDarkVal;
+          const event = { matches, media: query };
+          if (typeof listener === "function") {
+            listener(event);
+          } else if (listener && typeof listener.handleEvent === "function") {
+            listener.handleEvent(event);
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      });
     };
     const timeoutId = setTimeout(updateTheme, 0);
     const handleMediaChange = () => {
       updateTheme();
     };
-    media.addEventListener("change", handleMediaChange);
+    if (media) {
+      media.addEventListener("change", handleMediaChange);
+    }
     return () => {
       clearTimeout(timeoutId);
-      media.removeEventListener("change", handleMediaChange);
+      if (media) {
+        media.removeEventListener("change", handleMediaChange);
+      }
     };
   }, [mode, mounted]);
   function handleToggleTheme(triggerMode) {
@@ -1947,71 +2021,65 @@ var resetValues = {
   description: null,
   actions: null
 };
-function PopoverProvider({ children }) {
-  const [currentState, setCurrentState] = useState(0);
-  const [values, dispatch] = useReducer(reducer, resetValues);
-  const { show, style, tooltipStyle, position, description, actions } = values;
-  function reducer(state, action) {
-    const updatedValues = { ...state };
-    if ("show" in action) {
-      updatedValues.show = action.show;
-    }
-    if ("style" in action) {
-      updatedValues.style = action.style;
-    }
-    if ("tooltipStyle" in action) {
-      updatedValues.tooltipStyle = action.tooltipStyle;
-    }
-    if ("position" in action) {
-      updatedValues.position = action.position;
-    }
-    if ("description" in action) {
-      updatedValues.description = action.description;
-    }
-    if ("actions" in action) {
-      updatedValues.actions = action.actions;
-    }
-    if ("render" in action && !!action.render) {
-      setCurrentState((prev) => 1 - prev);
+function reducer(state, action) {
+  let changed = false;
+  for (const k in action) {
+    const key = k;
+    if (action[key] !== state[key]) {
+      changed = true;
+      break;
     }
-    return updatedValues;
   }
-  function handleShowPopover(params) {
-    dispatch({
-      ...params,
-      render: true
-    });
+  if (!changed) return state;
+  const updatedValues = { ...state };
+  if ("show" in action) {
+    updatedValues.show = action.show;
   }
-  function handleClosePopover() {
-    dispatch({
-      ...resetValues,
-      render: true
-    });
+  if ("style" in action) {
+    updatedValues.style = action.style;
   }
-  return /* @__PURE__ */ jsxs(
-    PopoverContext.Provider,
-    {
-      value: {
-        showPopover: show,
-        setPopover: handleShowPopover
-      },
-      children: [
-        children,
-        !!show && /* @__PURE__ */ jsx(
-          PopoverCard,
-          {
-            show,
-            style,
-            tooltipStyle,
-            position,
-            description,
-            actions,
-            onClose: handleClosePopover
-          }
-        )
-      ]
-    }
-  );
+  if ("tooltipStyle" in action) {
+    updatedValues.tooltipStyle = action.tooltipStyle;
+  }
+  if ("position" in action) {
+    updatedValues.position = action.position;
+  }
+  if ("description" in action) {
+    updatedValues.description = action.description;
+  }
+  if ("actions" in action) {
+    updatedValues.actions = action.actions;
+  }
+  return updatedValues;
+}
+function PopoverProvider({ children }) {
+  const [values, dispatch] = useReducer(reducer, resetValues);
+  const { show, style, tooltipStyle, position, description, actions } = values;
+  const handleShowPopover = useCallback((params) => {
+    dispatch(params);
+  }, []);
+  const handleClosePopover = useCallback(() => {
+    dispatch(resetValues);
+  }, []);
+  const contextValue = useMemo(() => ({
+    showPopover: show,
+    setPopover: handleShowPopover
+  }), [show, handleShowPopover]);
+  return /* @__PURE__ */ jsxs(PopoverContext.Provider, { value: contextValue, children: [
+    children,
+    !!show && /* @__PURE__ */ jsx(
+      PopoverCard,
+      {
+        show,
+        style,
+        tooltipStyle,
+        position,
+        description,
+        actions,
+        onClose: handleClosePopover
+      }
+    )
+  ] });
 }
 function usePopoverContext() {
   const context = useContext(PopoverContext);
@@ -2026,8 +2094,15 @@ function Popover({ className, description, actions, children, opts }) {
   const { screenWidth, screenHeight } = useResizeListener();
   const [menuData, setMenuData] = useState({ showMenu: false, x: 0, y: 0, left: 0, right: 0, top: 0, bottom: 0 });
   const parentRef = useRef(null);
+  const prevShowMenuRef = useRef(false);
+  const prevShowPopoverRef = useRef(false);
   (actions || []).some((action) => (action.items || []).length > 0);
   useEffect(() => {
+    const wasOpen = prevShowMenuRef.current;
+    prevShowMenuRef.current = menuData.showMenu;
+    if (!menuData.showMenu && !wasOpen) {
+      return;
+    }
     const stickyTop = menuData.showMenu && screenHeight - (menuData.y + 14) < 300;
     setPopover({
       show: menuData.showMenu,
@@ -2051,13 +2126,14 @@ function Popover({ className, description, actions, children, opts }) {
     });
   }, [menuData, screenWidth, screenHeight, description, actions, setPopover]);
   useEffect(() => {
-    if (!showPopover && !!menuData.showMenu) {
+    if (prevShowPopoverRef.current && !showPopover) {
       setMenuData((prev) => ({
         ...prev,
         showMenu: false
       }));
     }
-  }, [showPopover, menuData.showMenu]);
+    prevShowPopoverRef.current = showPopover;
+  }, [showPopover]);
   function handleToggleMenu(e) {
     e.stopPropagation();
     if (menuData.showMenu) {
@@ -2180,7 +2256,7 @@ function Dragger({
   onChange
 }) {
   const [, setCurrentState] = useState(0);
-  const [values, dispatch] = useReducer(reducer, {
+  const [values, dispatch] = useReducer(reducer2, {
     items: null,
     displayItems: null,
     dragging: false,
@@ -2219,7 +2295,7 @@ function Dragger({
       }
     }
   }, [grandChildren, updated]);
-  function reducer(state, action) {
+  function reducer2(state, action) {
     const updatedValues = { ...state };
     if ("items" in action) {
       updatedValues.items = action.items;