@luscii-healthtech/web-ui 44.3.2 → 44.3.4

package/dist/index.development.js

@@ -4781,12 +4781,51 @@ const Switch = (props) => {
   }), children: jsxRuntime.jsx(RadixSwitch__namespace.Thumb, { className: classNames__default.default("ui:h-[20px] ui:w-[20px]", "ui:bg-white", "ui:transition-transform ui:duration-100 ui:will-change-transform", "ui:translate-x-1 ui:data-[state=checked]:translate-x-[32px]", "ui:block ui:rounded-full") }) });
 };
 
+const useOnCloseAnimationFinished = ({
+  /**
+   * Reference to the dialog element
+   */
+  dialog,
+  /**
+   * Whether the dialog is open or closed
+   */
+  open,
+  /**
+   * Callback fired when the close transition has finished
+   */
+  onCloseAnimationFinished
+}) => {
+  const debouncedOnCloseAnimationFinished = React.useCallback(debounce__default.default(onCloseAnimationFinished, 150), [onCloseAnimationFinished]);
+  const onTransitionEnd = React.useCallback((event) => {
+    if (event.target !== dialog.current) {
+      return;
+    }
+    if (!open) {
+      debouncedOnCloseAnimationFinished();
+    }
+  }, [open, debouncedOnCloseAnimationFinished]);
+  React.useEffect(() => {
+    const transitionStopEvents = ["transitioncancel", "transitionend"];
+    transitionStopEvents.forEach((event) => {
+      var _a;
+      (_a = dialog.current) === null || _a === void 0 ? void 0 : _a.addEventListener(event, onTransitionEnd);
+    });
+    return () => {
+      transitionStopEvents.forEach((event) => {
+        var _a;
+        (_a = dialog.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, onTransitionEnd);
+      });
+    };
+  }, [open, onTransitionEnd]);
+};
+
 const context$3 = React.createContext({
   $dialog: null
 });
 const useModalDialog = () => React.useContext(context$3);
 const ModalDialog = (_a) => {
-  var { open, className, size, onClose, children, variant = "centered-dialog", keepChildrenMountedWhenClosed = false } = _a, rest = __rest(_a, ["open", "className", "size", "onClose", "children", "variant", "keepChildrenMountedWhenClosed"]);
+  var { open, className, size, onClose, children, variant = "centered-dialog", keepChildrenMountedWhenClosed = false, onCloseAnimationFinished = () => {
+  } } = _a, rest = __rest(_a, ["open", "className", "size", "onClose", "children", "variant", "keepChildrenMountedWhenClosed", "onCloseAnimationFinished"]);
   const dialog = React.useRef(null);
   const transitionsClasses = classNames__default.default("ui:transition-discrete ui:transition-[display,overlay,opacity,scale,translate] ui:duration-[300ms] ui:motion-reduce:duration-[0ms] ui:delay-100", "ui:backdrop:transition-[display,overlay,opacity] ui:backdrop:duration-[300ms] ui:motion-reduce:backdrop:duration-[0ms] ui:delay-0", "ui:opacity-0 ui:open:starting:opacity-0", "ui:open:opacity-100", "ui:backdrop:opacity-0 ui:open:backdrop:starting:opacity-0", "ui:open:backdrop:opacity-100", {
     "ui:translate-y-[-5px] ui:open:starting:translate-y-[-5px] ui:open:translate-y-0": variant !== "side-modal",
@@ -4815,6 +4854,7 @@ const ModalDialog = (_a) => {
     "ui:w-screen ui:h-screen": variant === "full-screen",
     "ui:max-w-screen ui:max-h-screen": variant === "full-screen"
   }, transitionsClasses, className);
+  useOnCloseAnimationFinished({ dialog, open, onCloseAnimationFinished });
   React.useEffect(() => {
     var _a2, _b;
     if (open) {