@intility/bifrost-react/dist/components/FloatingMessage/FloatingMessage.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import { createRef, useCallback, useEffect, useRef, useState } from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import classNames from "classnames";
import Message from "../Message/Message.js";
import FloatingMessageContext from "./FloatingMessageContext.internal.js";
import useAnimationDuration from "../../hooks/useAnimationDuration.js";
import useFloatingMessage from "../../hooks/useFloatingMessage.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Provider for stacking floating notifications (aka toast or snackbar) via
 * `useFloatingMessage()` hook
 *
 * @see https://bifrost.intility.com/react/floatingMessage
 */
export default function FloatingMessage(t0) {
  const $ = _c(17);
  const {
    children,
    max: t1,
    timeout: t2,
    top: t3,
    left: t4
  } = t0;
  const max = t1 === undefined ? 3 : t1;
  const timeout = t2 === undefined ? 7000 : t2;
  const top = t3 === undefined ? false : t3;
  const left = t4 === undefined ? false : t4;
  let t5;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t5 = [];
    $[0] = t5;
  } else {
    t5 = $[0];
  }
  const [messages, setMessages] = useState(t5);
  let t6;
  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
    t6 = message => {
      setMessages(messages_0 => messages_0.filter(m => m !== message));
    };
    $[1] = t6;
  } else {
    t6 = $[1];
  }
  const removeMessageByReference = t6;
  let t7;
  if ($[2] !== max || $[3] !== timeout) {
    t7 = (message_0, options) => {
      const floatingMessage = {
        id: performance.now(),
        message: message_0,
        options
      };
      setMessages(messages_1 => max === 1 ? [floatingMessage] : [...messages_1.slice((max - 1) * -1), floatingMessage]);
      if (timeout) {
        setTimeout(() => removeMessageByReference(floatingMessage), timeout);
      }
    };
    $[2] = max;
    $[3] = timeout;
    $[4] = t7;
  } else {
    t7 = $[4];
  }
  const showFloatingMessage = t7;
  let t8;
  if ($[5] !== left || $[6] !== messages || $[7] !== timeout || $[8] !== top) {
    t8 = {
      top,
      left,
      timeout,
      messages,
      setMessages,
      removeMessageByReference
    };
    $[5] = left;
    $[6] = messages;
    $[7] = timeout;
    $[8] = top;
    $[9] = t8;
  } else {
    t8 = $[9];
  }
  let t9;
  if ($[10] !== showFloatingMessage || $[11] !== t8) {
    t9 = {
      showFloatingMessage,
      _stack: t8
    };
    $[10] = showFloatingMessage;
    $[11] = t8;
    $[12] = t9;
  } else {
    t9 = $[12];
  }
  let t10;
  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
    t10 = /*#__PURE__*/_jsx(FloatingMessageStack, {});
    $[13] = t10;
  } else {
    t10 = $[13];
  }
  let t11;
  if ($[14] !== children || $[15] !== t9) {
    t11 = /*#__PURE__*/_jsxs(FloatingMessageContext.Provider, {
      value: t9,
      children: [children, t10]
    });
    $[14] = children;
    $[15] = t9;
    $[16] = t11;
  } else {
    t11 = $[16];
  }
  return t11;
}
export function FloatingMessageStack() {
  const $ = _c(30);
  const stackRef = useRef(null);
  const animationDuration = useAnimationDuration();
  const {
    showFloatingMessage,
    _stack
  } = useFloatingMessage();
  if (!_stack) {
    throw new Error("Cannot instantiate <FloatingMessageStack> outside of <FloatingMessage> context");
  }
  const {
    top,
    left,
    timeout,
    messages,
    setMessages,
    removeMessageByReference
  } = _stack;
  const isVisible = messages.length > 0;
  let t0;
  let t1;
  if ($[0] !== animationDuration || $[1] !== isVisible) {
    t0 = () => {
      if (!stackRef.current) {
        return;
      }
      const stackElement = stackRef.current;
      if (!isVisible && stackElement.matches(":popover-open")) {
        const closeTimer = setTimeout(() => stackElement.hidePopover?.(), animationDuration);
        return () => clearTimeout(closeTimer);
      }
      if (isVisible && !stackElement.matches(":popover-open")) {
        stackElement.showPopover?.();
      }
    };
    t1 = [isVisible, animationDuration];
    $[0] = animationDuration;
    $[1] = isVisible;
    $[2] = t0;
    $[3] = t1;
  } else {
    t0 = $[2];
    t1 = $[3];
  }
  useEffect(t0, t1);
  let t2;
  if ($[4] !== setMessages) {
    t2 = message => {
      setMessages(messages_0 => {
        if (!messages_0.includes(message)) {
          return messages_0;
        }
        return messages_0.map(m => m === message ? {
          ...message
        } : m);
      });
    };
    $[4] = setMessages;
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  const handleMouseEnter = t2;
  let t3;
  if ($[6] !== removeMessageByReference || $[7] !== timeout) {
    t3 = message_0 => {
      if (timeout) {
        setTimeout(() => removeMessageByReference(message_0), timeout);
      }
    };
    $[6] = removeMessageByReference;
    $[7] = timeout;
    $[8] = t3;
  } else {
    t3 = $[8];
  }
  const handleMouseLeave = t3;
  let t4;
  if ($[9] !== left || $[10] !== top) {
    t4 = classNames("bf-floatingmessage-stack", {
      "bf-floatingmessage-stack-top": top,
      "bf-floatingmessage-stack-left": left
    });
    $[9] = left;
    $[10] = top;
    $[11] = t4;
  } else {
    t4 = $[11];
  }
  let t5;
  if ($[12] !== animationDuration || $[13] !== handleMouseEnter || $[14] !== handleMouseLeave || $[15] !== messages || $[16] !== removeMessageByReference || $[17] !== showFloatingMessage) {
    let t6;
    if ($[19] !== animationDuration || $[20] !== handleMouseEnter || $[21] !== handleMouseLeave || $[22] !== removeMessageByReference || $[23] !== showFloatingMessage) {
      t6 = message_1 => {
        const transitionNodeRef = /*#__PURE__*/createRef();
        return /*#__PURE__*/_jsx(CSSTransition, {
          timeout: animationDuration,
          classNames: "bf-floatingmessage",
          nodeRef: transitionNodeRef,
          children: /*#__PURE__*/_jsx("div", {
            ref: transitionNodeRef,
            className: "bf-stack-element",
            children: /*#__PURE__*/_jsx("div", {
              children: /*#__PURE__*/_jsx(FloatingMessageContext.Provider, {
                value: {
                  showFloatingMessage,
                  removeFloatingMessage: () => removeMessageByReference(message_1)
                },
                children: /*#__PURE__*/_jsx(Message, {
                  "aria-live": "polite",
                  onClose: () => removeMessageByReference(message_1),
                  onMouseEnter: () => handleMouseEnter(message_1),
                  onMouseLeave: () => handleMouseLeave(message_1),
                  ...message_1.options,
                  header: message_1.message
                })
              })
            })
          })
        }, message_1.id);
      };
      $[19] = animationDuration;
      $[20] = handleMouseEnter;
      $[21] = handleMouseLeave;
      $[22] = removeMessageByReference;
      $[23] = showFloatingMessage;
      $[24] = t6;
    } else {
      t6 = $[24];
    }
    t5 = messages.map(t6);
    $[12] = animationDuration;
    $[13] = handleMouseEnter;
    $[14] = handleMouseLeave;
    $[15] = messages;
    $[16] = removeMessageByReference;
    $[17] = showFloatingMessage;
    $[18] = t5;
  } else {
    t5 = $[18];
  }
  let t6;
  if ($[25] !== t5) {
    t6 = /*#__PURE__*/_jsx(TransitionGroup, {
      component: null,
      children: t5
    });
    $[25] = t5;
    $[26] = t6;
  } else {
    t6 = $[26];
  }
  let t7;
  if ($[27] !== t4 || $[28] !== t6) {
    t7 = /*#__PURE__*/_jsx("div", {
      className: t4,
      popover: "manual",
      ref: stackRef,
      children: t6
    });
    $[27] = t4;
    $[28] = t6;
    $[29] = t7;
  } else {
    t7 = $[29];
  }
  return t7;
}