@woobee/ui 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React15 = require('react');
+var React16 = require('react');
 var reactDom = require('react-dom');
 var reactTransitionGroup = require('react-transition-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React15__default = /*#__PURE__*/_interopDefault(React15);
+var React16__default = /*#__PURE__*/_interopDefault(React16);
 
 // src/utils/classNames.ts
 function classNames(classNameHash) {
@@ -35,6 +35,7 @@ function Button({
   leftIcon = null,
   rightIcon = null,
   compact = false,
+  darkMode = false,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -51,11 +52,20 @@ function Button({
         "px-5 py-3 text-base": size === "big",
         "px-5 py-3 text-lg font-medium": size === "huge",
         "!px-1 !py-0.5": compact,
-        "border bg-brown-500 dark:bg-primary-500 dark:hover:bg-primary-600 border-transparent text-white dark:text-black": variant === "primary",
-        "text-gray-700 bg-white dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 border border-gray-300 dark:border-charcoal-700 hover:text-gray-500": variant === "secondary",
-        "!rounded-md text-left w-full text-gray-700 bg-white dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 border border-gray-200 dark:border-charcoal-700 hover:bg-gray-50 hover:text-gray-500": variant === "form-input",
-        "hover:text-brown-500 dark:text-charcoal-100 dark:hover:text-primary-500 !shadow-none": variant === "flat",
-        "!text-gray-300 hover:!text-gray-400 dark:!text-charcoal-400": !children,
+        "border bg-brown-500 border-transparent text-white": variant === "primary" && !darkMode,
+        "dark:bg-primary-500 dark:hover:bg-primary-600 dark:text-black": variant === "primary" && !darkMode,
+        "border bg-primary-500 hover:bg-primary-600 border-transparent text-black": variant === "primary" && !!darkMode,
+        "text-gray-700 bg-white border border-gray-300 hover:text-gray-500": variant === "secondary" && !darkMode,
+        "text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "secondary" && !!darkMode,
+        "!rounded-md text-left w-full text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 hover:text-gray-500": variant === "form-input" && !darkMode,
+        "!rounded-md text-left w-full text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "form-input" && !!darkMode,
+        "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 dark:border-charcoal-700": (variant === "secondary" || variant === "form-input") && !darkMode,
+        "hover:text-brown-500 !shadow-none": variant === "flat" && !darkMode,
+        "dark:text-charcoal-100 dark:hover:text-primary-500": variant === "flat" && !darkMode,
+        "text-charcoal-100 hover:text-primary-500 !shadow-none": variant === "flat" && !!darkMode,
+        "!text-gray-300 hover:!text-gray-400": !children && !darkMode,
+        "dark:!text-charcoal-400": !children && !darkMode,
+        "!text-charcoal-400": !children && !!darkMode,
         ...classNameObject(className)
       }),
       ...props,
@@ -172,11 +182,11 @@ function Tabs({
     }
   );
 }
-var Toggle = React15.forwardRef(
+var Toggle = React16.forwardRef(
   ({ listening, size, name, value, onChange, className }, ref) => {
-    const internalRef = React15.useRef(null);
+    const internalRef = React16.useRef(null);
     const spanRef = ref || internalRef;
-    React15.useEffect(() => {
+    React16.useEffect(() => {
       if (listening && spanRef && "current" in spanRef && spanRef.current && value !== null) {
         spanRef.current.value = value;
       }
@@ -261,6 +271,10 @@ function CheckboxList({
   loading = false,
   placeholder = "No items found."
 }) {
+  const hasLoadedRef = React16.useRef(false);
+  if (!loading) {
+    hasLoadedRef.current = true;
+  }
   const getFinalKey = (item, index) => {
     const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
     return key !== void 0 && key !== null ? key : index;
@@ -271,7 +285,7 @@ function CheckboxList({
     }
     return placeholder;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border border-gray-300 dark:border-charcoal-700 rounded-lg shadow-sm bg-white dark:bg-charcoal-800 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto divide-y divide-gray-100 dark:divide-charcoal-700", children: loading && items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 flex items-center justify-center min-h-36", children: /* @__PURE__ */ jsxRuntime.jsx(Loading, { spinSizeClassName: "w-6 h-6", className: "inline-block" }) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.length > 0 ? items.map((item, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border border-gray-300 dark:border-charcoal-700 rounded-lg shadow-sm bg-white dark:bg-charcoal-800 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto divide-y divide-gray-100 dark:divide-charcoal-700", children: loading && !hasLoadedRef.current ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 flex items-center justify-center min-h-36", children: /* @__PURE__ */ jsxRuntime.jsx(Loading, { spinSizeClassName: "w-6 h-6", className: "inline-block" }) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.length > 0 ? items.map((item, index) => {
     const finalKey = getFinalKey(item, index);
     const label = typeof itemLabel === "function" ? itemLabel(item) : item[itemLabel];
     const checked = typeof isChecked === "function" ? isChecked(item, selected) : selected.some(
@@ -315,7 +329,7 @@ function CheckboxList({
     );
   }) : renderPlaceholder() }) }) });
 }
-var ModalContext = React15.createContext({
+var ModalContext = React16.createContext({
   modalShowing: false,
   drawerShowing: false,
   setModalShowing: () => {
@@ -324,11 +338,11 @@ var ModalContext = React15.createContext({
   }
 });
 function useModalContext() {
-  return React15.useContext(ModalContext);
+  return React16.useContext(ModalContext);
 }
 function ModalProvider({ children }) {
-  const [currentState, setCurrentState] = React15.useState(0);
-  function reducer(state, action) {
+  const [currentState, setCurrentState] = React16.useState(0);
+  function reducer2(state, action) {
     const updatedValues = { ...state };
     if ("modalShowing" in action) {
       updatedValues.modalShowing = action.modalShowing;
@@ -341,12 +355,12 @@ function ModalProvider({ children }) {
     }
     return updatedValues;
   }
-  const [values, dispatch] = React15.useReducer(reducer, {
+  const [values, dispatch] = React16.useReducer(reducer2, {
     modalShowing: false,
     drawerShowing: false
   });
   const { modalShowing, drawerShowing } = values;
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (typeof document === "undefined") return;
     const bodyEl = document.getElementsByTagName("BODY")[0];
     if (!bodyEl) return;
@@ -369,12 +383,12 @@ function ModalProvider({ children }) {
     }
   );
 }
-var TransitionContext = React15.createContext({
+var TransitionContext = React16.createContext({
   parent: {}
 });
 function useIsInitialRender() {
-  const isInitialRender = React15.useRef(true);
-  React15.useEffect(() => {
+  const isInitialRender = React16.useRef(true);
+  React16.useEffect(() => {
     isInitialRender.current = false;
   }, []);
   return isInitialRender.current;
@@ -408,7 +422,7 @@ function CSSTransitionComponent({
   const leaveClasses = leave.split(" ").filter((s) => s.length);
   const leaveFromClasses = leaveFrom.split(" ").filter((s) => s.length);
   const leaveToClasses = leaveTo.split(" ").filter((s) => s.length);
-  const nodeRef = React15.useRef(null);
+  const nodeRef = React16.useRef(null);
   function addClasses(node, classes) {
     classes.length && node.classList.add(...classes);
   }
@@ -458,7 +472,7 @@ function CSSTransitionComponent({
         removeClasses(nodeRef.current, [...leaveToClasses, ...leaveClasses]);
         onExited(nodeRef.current);
       },
-      children: React15__default.default.cloneElement(children, {
+      children: React16__default.default.cloneElement(children, {
         ref: (node) => {
           nodeRef.current = node;
           const childRef = children.ref;
@@ -473,7 +487,7 @@ function CSSTransitionComponent({
   );
 }
 function Transition({ show, appear, ...rest }) {
-  const { parent } = React15.useContext(TransitionContext);
+  const { parent } = React16.useContext(TransitionContext);
   const isInitialRender = useIsInitialRender();
   const isChild = show === void 0;
   if (isChild) {
@@ -588,15 +602,15 @@ function Modal({
   fullscreen,
   opts
 }) {
-  const { setModalShowing } = React15.useContext(ModalContext);
+  const { setModalShowing } = React16.useContext(ModalContext);
   const { darkMode, sidebarPosition = "right", mobileSidebarPosition = "bottom" } = opts || {};
   const isMobileSidebarTop = mobileSidebarPosition === "top" || mobileSidebarPosition === "above";
-  const [mounted, setMounted] = React15.useState(false);
-  React15.useEffect(() => {
+  const [mounted, setMounted] = React16.useState(false);
+  React16.useEffect(() => {
     setMounted(true);
     return () => setMounted(false);
   }, []);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (typeof document === "undefined") return;
     const bodyEl = document.getElementsByTagName("BODY")[0];
     if (open) {
@@ -821,8 +835,8 @@ function Drawer({
   wrapperClassName,
   sectionClassName = ""
 }) {
-  const { setDrawerShowing } = React15.useContext(ModalContext);
-  React15.useEffect(() => {
+  const { setDrawerShowing } = React16.useContext(ModalContext);
+  React16.useEffect(() => {
     setDrawerShowing(open);
   }, [open]);
   function handleClose() {
@@ -943,9 +957,9 @@ function InlinePrompt({
   cancelText,
   opts
 }) {
-  const [isOpen, setIsOpen] = React15.useState(false);
-  const nodeTarget = React15.useRef(null);
-  const nodeWindow = React15.useRef(null);
+  const [isOpen, setIsOpen] = React16.useState(false);
+  const nodeTarget = React16.useRef(null);
+  const nodeWindow = React16.useRef(null);
   const { condensed, blocked } = opts || {};
   function handleClickOutside(e) {
     if (nodeTarget.current?.contains(e.target) || nodeWindow.current?.contains(e.target)) {
@@ -965,7 +979,7 @@ function InlinePrompt({
     onConfirm();
     setIsOpen(false);
   }
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
     } else {
@@ -1185,7 +1199,7 @@ function Td({ className, align, colSpan, condensed, narrow, children }) {
     }
   );
 }
-var Input = React15.forwardRef((props, ref) => {
+var Input = React16.forwardRef((props, ref) => {
   const {
     id,
     theme,
@@ -1221,11 +1235,11 @@ var Input = React15.forwardRef((props, ref) => {
     hideIndicator,
     darkMode
   } = props;
-  const [focused, setFocused] = React15.useState(false);
-  const inputRef = React15.useRef(null);
+  const [focused, setFocused] = React16.useState(false);
+  const inputRef = React16.useRef(null);
   const hasPrefix = !!prefix && prefix.length > 0;
-  React15.useImperativeHandle(ref, () => inputRef.current);
-  React15.useEffect(() => {
+  React16.useImperativeHandle(ref, () => inputRef.current);
+  React16.useEffect(() => {
     if (listening && inputRef.current && defaultValue !== null && defaultValue !== void 0) {
       if (hasPrefix) {
         inputRef.current.value = prefix + String(defaultValue);
@@ -1403,7 +1417,7 @@ function Label({
     )
   ] });
 }
-var Select = React15.forwardRef((props, ref) => {
+var Select = React16.forwardRef((props, ref) => {
   const {
     id,
     loading = false,
@@ -1443,7 +1457,7 @@ var Select = React15.forwardRef((props, ref) => {
 });
 Select.displayName = "Select";
 var Select_default = Select;
-var SelectInput = React15.forwardRef((props, ref) => {
+var SelectInput = React16.forwardRef((props, ref) => {
   const {
     className,
     placeholder = "Select an option",
@@ -1480,7 +1494,7 @@ var SelectInput = React15.forwardRef((props, ref) => {
 });
 SelectInput.displayName = "SelectInput";
 var SelectInput_default = SelectInput;
-var Textarea = React15.forwardRef((props, ref) => {
+var Textarea = React16.forwardRef((props, ref) => {
   const {
     id,
     className,
@@ -1545,9 +1559,9 @@ function TagInput({
   onChange,
   placeholder
 }) {
-  const [currentState, setCurrentState] = React15.useState(0);
-  const tagInputRef = React15.useRef(null);
-  function reducer(state, action) {
+  const [currentState, setCurrentState] = React16.useState(0);
+  const tagInputRef = React16.useRef(null);
+  function reducer2(state, action) {
     const updatedValues = { ...state };
     if ("tags" in action) {
       updatedValues.tags = Array.from(new Set(action.tags));
@@ -1560,11 +1574,11 @@ function TagInput({
     }
     return updatedValues;
   }
-  const [values, dispatch] = React15.useReducer(reducer, {
+  const [values, dispatch] = React16.useReducer(reducer2, {
     tags: []
   });
   const { tags } = values;
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (defaultValue) {
       dispatch({ tags: defaultValue, render: true });
     } else {
@@ -1651,35 +1665,115 @@ function NoData({ className }) {
     ] })
   ] });
 }
-var ThemeContext = React15.createContext(void 0);
+var ThemeContext = React16.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] = React15.useState(defaultTheme);
-  const [isDark, setIsDark] = React15.useState(false);
-  const stateRef = React15.useRef(mode);
-  React15.useEffect(() => {
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    const isDark2 = mode === "dark" || mode === "system" && prefersDark;
-    document.documentElement.classList.toggle("dark", isDark2);
-    stateRef.current = mode;
-    setIsDark(isDark2);
-  }, [mode]);
-  React15.useEffect(() => {
+  const [mode, setMode] = React16.useState(defaultTheme);
+  const [isDark, setIsDark] = React16.useState(false);
+  const [mounted, setMounted] = React16.useState(false);
+  React16.useEffect(() => {
     const saved = localStorage.getItem("theme") || defaultTheme;
     setMode(saved);
+    setMounted(true);
   }, [defaultTheme]);
-  React15.useEffect(() => {
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
-    const listener = () => {
-      const prevMode = stateRef.current;
-      if (prevMode !== "system") {
-        setTimeout(() => {
-          document.documentElement.classList.toggle("dark", prevMode === "dark");
-        }, 100);
+  React16.useEffect(() => {
+    if (!mounted) return;
+    const media = originalMatchMedia ? originalMatchMedia.call(window, "(prefers-color-scheme: dark)") : null;
+    const updateTheme = () => {
+      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");
       }
+      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);
+        }
+      });
     };
-    media.addEventListener("change", listener);
-    return () => media.removeEventListener("change", listener);
-  }, []);
+    const timeoutId = setTimeout(updateTheme, 0);
+    const handleMediaChange = () => {
+      updateTheme();
+    };
+    if (media) {
+      media.addEventListener("change", handleMediaChange);
+    }
+    return () => {
+      clearTimeout(timeoutId);
+      if (media) {
+        media.removeEventListener("change", handleMediaChange);
+      }
+    };
+  }, [mode, mounted]);
   function handleToggleTheme(triggerMode) {
     const triggeredMode = triggerMode === mode ? "system" : triggerMode;
     setMode(triggeredMode);
@@ -1702,7 +1796,7 @@ function ThemeProvider({ children, defaultTheme = "system" }) {
   );
 }
 function useThemeContext() {
-  const context = React15.useContext(ThemeContext);
+  const context = React16.useContext(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -1749,13 +1843,13 @@ function debounce(fn, delay) {
 
 // src/hooks/useDebounce.ts
 function useDebounce(callback, delay, deps = []) {
-  const callbackFn = React15.useCallback(debounce(callback, delay), deps);
+  const callbackFn = React16.useCallback(debounce(callback, delay), deps);
   return [callbackFn];
 }
 
 // src/hooks/useResizeListener.ts
 function useResizeListener(props = {}) {
-  const [values, setValues] = React15.useState(
+  const [values, setValues] = React16.useState(
     [
       typeof window === "undefined" ? props.mobileAgent ? 375 : 1080 : window.innerWidth,
       typeof window === "undefined" ? props.mobileAgent ? 812 : 750 : window.innerHeight,
@@ -1777,7 +1871,7 @@ function useResizeListener(props = {}) {
     ]);
   }
   const [debouncedSetValue] = useDebounce(handleChangeViewport, 300);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     window.addEventListener("resize", debouncedSetValue);
     return () => {
       window.removeEventListener("resize", debouncedSetValue);
@@ -1785,7 +1879,7 @@ function useResizeListener(props = {}) {
   }, [debouncedSetValue]);
   return { screenWidth, screenHeight, viewport, viewMode, mobileView, tabletView };
 }
-var PopoverContext = React15.createContext(void 0);
+var PopoverContext = React16.createContext(void 0);
 function PopoverCard({
   show,
   style,
@@ -1933,74 +2027,68 @@ var resetValues = {
   description: null,
   actions: null
 };
-function PopoverProvider({ children }) {
-  const [currentState, setCurrentState] = React15.useState(0);
-  const [values, dispatch] = React15.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;
+function reducer(state, action) {
+  let changed = false;
+  for (const k in action) {
+    const key = k;
+    if (action[key] !== state[key]) {
+      changed = true;
+      break;
     }
-    if ("render" in action && !!action.render) {
-      setCurrentState((prev) => 1 - prev);
-    }
-    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__ */ jsxRuntime.jsxs(
-    PopoverContext.Provider,
-    {
-      value: {
-        showPopover: show,
-        setPopover: handleShowPopover
-      },
-      children: [
-        children,
-        !!show && /* @__PURE__ */ jsxRuntime.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] = React16.useReducer(reducer, resetValues);
+  const { show, style, tooltipStyle, position, description, actions } = values;
+  const handleShowPopover = React16.useCallback((params) => {
+    dispatch(params);
+  }, []);
+  const handleClosePopover = React16.useCallback(() => {
+    dispatch(resetValues);
+  }, []);
+  const contextValue = React16.useMemo(() => ({
+    showPopover: show,
+    setPopover: handleShowPopover
+  }), [show, handleShowPopover]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(PopoverContext.Provider, { value: contextValue, children: [
+    children,
+    !!show && /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverCard,
+      {
+        show,
+        style,
+        tooltipStyle,
+        position,
+        description,
+        actions,
+        onClose: handleClosePopover
+      }
+    )
+  ] });
 }
 function usePopoverContext() {
-  const context = React15.useContext(PopoverContext);
+  const context = React16.useContext(PopoverContext);
   if (!context) {
     throw new Error("usePopoverContext must be used within a PopoverProvider");
   }
@@ -2010,10 +2098,17 @@ function Popover({ className, description, actions, children, opts }) {
   const { activated } = opts || {};
   const { showPopover, setPopover } = usePopoverContext();
   const { screenWidth, screenHeight } = useResizeListener();
-  const [menuData, setMenuData] = React15.useState({ showMenu: false, x: 0, y: 0, left: 0, right: 0, top: 0, bottom: 0 });
-  const parentRef = React15.useRef(null);
+  const [menuData, setMenuData] = React16.useState({ showMenu: false, x: 0, y: 0, left: 0, right: 0, top: 0, bottom: 0 });
+  const parentRef = React16.useRef(null);
+  const prevShowMenuRef = React16.useRef(false);
+  const prevShowPopoverRef = React16.useRef(false);
   (actions || []).some((action) => (action.items || []).length > 0);
-  React15.useEffect(() => {
+  React16.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,
@@ -2036,14 +2131,15 @@ function Popover({ className, description, actions, children, opts }) {
       actions
     });
   }, [menuData, screenWidth, screenHeight, description, actions, setPopover]);
-  React15.useEffect(() => {
-    if (!showPopover && !!menuData.showMenu) {
+  React16.useEffect(() => {
+    if (prevShowPopoverRef.current && !showPopover) {
       setMenuData((prev) => ({
         ...prev,
         showMenu: false
       }));
     }
-  }, [showPopover, menuData.showMenu]);
+    prevShowPopoverRef.current = showPopover;
+  }, [showPopover]);
   function handleToggleMenu(e) {
     e.stopPropagation();
     if (menuData.showMenu) {
@@ -2165,8 +2261,8 @@ function Dragger({
   children,
   onChange
 }) {
-  const [, setCurrentState] = React15.useState(0);
-  const [values, dispatch] = React15.useReducer(reducer, {
+  const [, setCurrentState] = React16.useState(0);
+  const [values, dispatch] = React16.useReducer(reducer2, {
     items: null,
     displayItems: null,
     dragging: false,
@@ -2179,14 +2275,14 @@ function Dragger({
   const { items, displayItems, dragging, dragItem, dragFrom, dragTo, updated } = values || {};
   const grandChildren = children && children.props.children;
   const isValid = !disabled && !!records && !!children && !!grandChildren && grandChildren.length > 0;
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     dispatch({
       items: grandChildren,
       updated: false,
       render: true
     });
   }, [timestamp, grandChildren]);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!updated) {
       if (grandChildren && grandChildren.length > 0) {
         dispatch({
@@ -2205,7 +2301,7 @@ function Dragger({
       }
     }
   }, [grandChildren, updated]);
-  function reducer(state, action) {
+  function reducer2(state, action) {
     const updatedValues = { ...state };
     if ("items" in action) {
       updatedValues.items = action.items;
@@ -2426,9 +2522,9 @@ function Dragger({
     }
     dispatch({ dragging: false });
   }
-  const derivedItems = !!items && React15__default.default.cloneElement(children, {
+  const derivedItems = !!items && React16__default.default.cloneElement(children, {
     children: items.map((grandChild, index) => {
-      return React15__default.default.cloneElement(grandChild, {
+      return React16__default.default.cloneElement(grandChild, {
         id: (records[index] || {}).id,
         draggable: true,
         className: classNames({
@@ -2445,9 +2541,9 @@ function Dragger({
       });
     })
   });
-  const derivedDisplayItems = !!displayItems && React15__default.default.cloneElement(children, {
+  const derivedDisplayItems = !!displayItems && React16__default.default.cloneElement(children, {
     children: displayItems.map((grandChild, index) => {
-      return React15__default.default.cloneElement(grandChild, {
+      return React16__default.default.cloneElement(grandChild, {
         draggable: true,
         className: classNames({
           ...classNameObject(grandChild.props.className),
@@ -2505,8 +2601,8 @@ function ExcelTable({
   isAddRowVisible = true,
   addRowLabel = "+ Add Option"
 }) {
-  const [editingCell, setEditingCell] = React15.useState(null);
-  React15.useEffect(() => {
+  const [editingCell, setEditingCell] = React16.useState(null);
+  React16.useEffect(() => {
     setTimeout(() => {
       const textareas = document.querySelectorAll(".excel-table-textarea");
       textareas.forEach((ta) => {
@@ -2730,21 +2826,21 @@ function ExcelTable({
   ] }) });
 }
 function Coverflow({ images = [], onClose }) {
-  const scrollContainerRef = React15.useRef(null);
-  const thumbnailContainerRef = React15.useRef(null);
-  const [visualIndex, setVisualIndex] = React15.useState(0);
-  const isJumpingRef = React15.useRef(false);
-  const wheelLockRef = React15.useRef(false);
-  const wheelTimeoutRef = React15.useRef(null);
-  const [isReady, setIsReady] = React15.useState(false);
-  const [isMounted, setIsMounted] = React15.useState(false);
-  React15.useEffect(() => {
+  const scrollContainerRef = React16.useRef(null);
+  const thumbnailContainerRef = React16.useRef(null);
+  const [visualIndex, setVisualIndex] = React16.useState(0);
+  const isJumpingRef = React16.useRef(false);
+  const wheelLockRef = React16.useRef(false);
+  const wheelTimeoutRef = React16.useRef(null);
+  const [isReady, setIsReady] = React16.useState(false);
+  const [isMounted, setIsMounted] = React16.useState(false);
+  React16.useEffect(() => {
     setIsMounted(true);
   }, []);
   const count = images.length;
   const hasMultiple = count > 1;
   const extendedImages = hasMultiple ? [images[count - 1], ...images, images[0]] : images;
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (hasMultiple && scrollContainerRef.current) {
       const container = scrollContainerRef.current;
       const width = container.offsetWidth;
@@ -2755,7 +2851,7 @@ function Coverflow({ images = [], onClose }) {
       setIsReady(true);
     }
   }, [hasMultiple]);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (hasMultiple && thumbnailContainerRef.current) {
       const thumbContainer = thumbnailContainerRef.current;
       const thumbNode = thumbContainer.children[visualIndex];
@@ -2768,7 +2864,7 @@ function Coverflow({ images = [], onClose }) {
       }
     }
   }, [visualIndex, hasMultiple]);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     const container = scrollContainerRef.current;
     if (!container || !hasMultiple) return;
     const handleWheel = (e) => {
@@ -2872,7 +2968,7 @@ function Coverflow({ images = [], onClose }) {
       behavior: "smooth"
     });
   };
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose && onClose();
       if (e.key === "ArrowLeft") prevSlide();
@@ -3046,7 +3142,7 @@ function DataTableRow({ index, selected, label, description, additionalDescripti
               "!text-left": dataItem.align === "left",
               "align-middle": vertical === "middle"
             }),
-            children: typeof dataItem.data[index] === "string" || React15__default.default.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
+            children: typeof dataItem.data[index] === "string" || React16__default.default.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
           },
           `${dataIndex}-${index}`
         ))
@@ -3067,8 +3163,8 @@ function DataTable({
 }) {
   const { mobileView } = useResizeListener();
   const { ignoreTotal, showCurrency, labelTitle, labelCentered, vertical, darkMode } = opts || {};
-  const [displayHeaders, setDisplayHeaders] = React15.useState([]);
-  React15.useEffect(() => {
+  const [displayHeaders, setDisplayHeaders] = React16.useState([]);
+  React16.useEffect(() => {
     setDisplayHeaders(headers);
   }, [headers]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3183,7 +3279,7 @@ function DataTable({
                 backgroundColor: `${colors[dataIndex]}`,
                 color: bestTextColorForBg(colors[dataIndex])
               } : void 0,
-              children: typeof total[dataIndex] === "string" || React15__default.default.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsxRuntime.jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
+              children: typeof total[dataIndex] === "string" || React16__default.default.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsxRuntime.jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
             },
             `${dataIndex}-total`
           ))
@@ -3365,8 +3461,8 @@ function DataGridHeader({ sort, onClick, opts, children }) {
   );
 }
 function DataGridElement({ processing: defaultProcessing, type, value, error, menu, params, opts, onSelect }) {
-  const [processing, setProcessing] = React15.useState(defaultProcessing);
-  React15.useEffect(() => {
+  const [processing, setProcessing] = React16.useState(defaultProcessing);
+  React16.useEffect(() => {
     setProcessing(defaultProcessing);
   }, [defaultProcessing]);
   const { align } = opts || {};
@@ -3458,8 +3554,8 @@ function DataGridContent({ loading, error, type, value, opts, onClick }) {
   );
 }
 function DataGrid({ headers, data, selectedId, footers, opts, onSelect }) {
-  const [displayedData, setDisplayedData] = React15.useState([]);
-  const [orderByState, setOrderByState] = React15.useState({
+  const [displayedData, setDisplayedData] = React16.useState([]);
+  const [orderByState, setOrderByState] = React16.useState({
     category: headers[0]?.id || "",
     direction: "asc"
   });
@@ -3471,7 +3567,7 @@ function DataGrid({ headers, data, selectedId, footers, opts, onSelect }) {
       setOrderByState({ category, direction: orderByState.direction === "asc" ? "desc" : "asc" });
     }
   }
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if ((data || []).length > 0) {
       const availableKeys = (headers || []).map((header) => header.id);
       const { category, direction } = orderByState;