@helpwave/hightide 0.1.35 → 0.1.37

package/dist/components/dialog/index.mjs

@@ -304,6 +304,8 @@ var useTranslation = (translations, overwriteTranslation = {}) => {
 import clsx3 from "clsx";
 
 // src/components/dialog/Dialog.tsx
+import { useEffect as useEffect5 } from "react";
+import { useState as useState6 } from "react";
 import { useRef as useRef2 } from "react";
 import clsx2 from "clsx";
 import { X } from "lucide-react";
@@ -669,10 +671,21 @@ var Dialog = ({
   onClose,
   className,
   backgroundClassName,
-  position = "center"
+  position = "center",
+  isAnimated = true
 }) => {
   const translation = useTranslation([formTranslation]);
+  const [visible, setVisible] = useState6(isOpen);
   const ref = useRef2(null);
+  useEffect5(() => {
+    if (isOpen) {
+      setVisible(true);
+    } else {
+      if (!isAnimated) {
+        setVisible(false);
+      }
+    }
+  }, [isAnimated, isOpen]);
   const onCloseWrapper = () => {
     if (!isModal) return;
     onClose?.();
@@ -680,7 +693,7 @@ var Dialog = ({
   useLogOnce("Dialog: onClose should be defined for modal dialogs", isModal && !onClose);
   useFocusTrap({
     container: ref,
-    active: isOpen,
+    active: visible,
     focusFirst: true
   });
   const positionMap = {
@@ -694,6 +707,7 @@ var Dialog = ({
       /* @__PURE__ */ jsx3(
         "div",
         {
+          hidden: !visible,
           className: clsx2(
             "fixed inset-0 h-screen w-screen bg-overlay-shadow z-100",
             {
@@ -702,21 +716,30 @@ var Dialog = ({
             },
             backgroundClassName
           ),
-          hidden: !isOpen,
-          "aria-hidden": true,
-          onClick: onCloseWrapper
+          onAnimationEnd: () => {
+            if (!isOpen) {
+              setVisible(false);
+            }
+          },
+          onClick: onCloseWrapper,
+          "aria-hidden": true
         }
       ),
       /* @__PURE__ */ jsxs2(
         "div",
         {
           ref,
-          hidden: !isOpen,
+          hidden: !visible,
           onKeyDown: (event) => {
             if (event.key === "Escape") {
               onCloseWrapper();
             }
           },
+          onAnimationEnd: () => {
+            if (!isOpen) {
+              setVisible(false);
+            }
+          },
           className: clsx2(
             "flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)] z-100",
             {
@@ -845,13 +868,13 @@ import { forwardRef as forwardRef2, useImperativeHandle, useRef as useRef3 } fro
 import clsx4 from "clsx";
 
 // src/hooks/useDelay.ts
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
 var defaultOptions2 = {
   delay: 3e3,
   disabled: false
 };
 function useDelay(options) {
-  const [timer, setTimer] = useState6(void 0);
+  const [timer, setTimer] = useState7(void 0);
   const { delay, disabled } = {
     ...defaultOptions2,
     ...options
@@ -870,12 +893,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  useEffect5(() => {
+  useEffect6(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -942,10 +965,10 @@ function useFocusManagement() {
 }
 
 // src/hooks/useOverwritableState.ts
-import { useEffect as useEffect6, useState as useState7 } from "react";
+import { useEffect as useEffect7, useState as useState8 } from "react";
 var useOverwritableState = (initialValue, onChange) => {
-  const [state, setState] = useState7(initialValue);
-  useEffect6(() => {
+  const [state, setState] = useState8(initialValue);
+  useEffect7(() => {
     setState(initialValue);
   }, [initialValue]);
   const onChangeWrapper = (action) => {
@@ -1062,11 +1085,11 @@ import {
   forwardRef as forwardRef4,
   useCallback as useCallback6,
   useContext as useContext2,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useId as useId3,
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef4,
-  useState as useState9
+  useState as useState10
 } from "react";
 import clsx7 from "clsx";
 
@@ -1248,7 +1271,7 @@ var Chip = ({
 };
 
 // src/hooks/useFloatingElement.ts
-import { useCallback as useCallback5, useEffect as useEffect7, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useState as useState9 } from "react";
 
 // src/utils/math.ts
 var clamp = (value, range = [0, 1]) => {
@@ -1311,7 +1334,7 @@ function useFloatingElement({
   screenPadding = 16,
   gap = 4
 }) {
-  const [style, setStyle] = useState8();
+  const [style, setStyle] = useState9();
   const isMounted = useIsMounted();
   const calculate = useCallback5(() => {
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -1343,14 +1366,14 @@ function useFloatingElement({
   }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
   const height = containerRef.current?.getBoundingClientRect().height;
   const width = containerRef.current?.getBoundingClientRect().width;
-  useEffect7(() => {
+  useEffect8(() => {
     if (active && isMounted) {
       calculate();
     } else {
       setStyle(void 0);
     }
   }, [calculate, active, isMounted, height, width]);
-  useEffect7(() => {
+  useEffect8(() => {
     window.addEventListener("resize", calculate);
     let timeout;
     if (isPolling) {
@@ -1393,11 +1416,11 @@ var SelectRoot = ({
   isMultiSelect = false,
   iconAppearance = "left"
 }) => {
-  const [options, setOptions] = useState9([]);
+  const [options, setOptions] = useState10([]);
   const triggerRef = useRef4(null);
   const generatedId = useId3();
   const usedId = id ?? generatedId;
-  const [internalState, setInternalState] = useState9({
+  const [internalState, setInternalState] = useState10({
     isOpen
   });
   const selectedValues = isMultiSelect ? values ?? [] : [value].filter(Boolean);
@@ -1513,7 +1536,7 @@ var SelectRoot = ({
       highlightedValue
     }));
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (!internalState.highlightedValue) return;
     const highlighted = options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
@@ -1548,7 +1571,7 @@ var SelectOption = forwardRef4(
     const itemRef = useRef4(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    useEffect8(() => {
+    useEffect9(() => {
       register({
         value,
         label,
@@ -1632,7 +1655,7 @@ var SelectButton = forwardRef4(function SelectButton2({ placeholder, selectedDis
   const { register, unregister, toggleOpen } = trigger;
   const innerRef = useRef4(null);
   useImperativeHandle2(ref, () => innerRef.current);
-  useEffect8(() => {
+  useEffect9(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -1710,7 +1733,7 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
   const { register, unregister, toggleOpen } = trigger;
   const innerRef = useRef4(null);
   useImperativeHandle2(ref, () => innerRef.current);
-  useEffect8(() => {
+  useEffect9(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -2016,7 +2039,7 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx8 from "clsx";
 
 // src/theming/useTheme.tsx
-import { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect9, useMemo as useMemo2, useState as useState10 } from "react";
+import { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect10, useMemo as useMemo2, useState as useState11 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {