@rtdui/dialogs/esm/Dialogs.mjs

React dialogs base on Rtdui components

'use client';
import { jsx } from 'react/jsx-runtime';
import { Transition, Portal, TransitionGroup } from '@rtdui/core';
import { useReducedMotion } from '@rtdui/hooks';
import { DialogContainer } from './DialogContainer.mjs';
import { useDialogs } from './dialogs.store.mjs';

function Dialogs(props) {
  const {
    target,
    dirtyWarningLabel = "The content has been modified, closing it will lose the unsaved data, are you sure to close it?",
    confirmLabel,
    cancelLabel,
    closeLabel,
    className = "z-40"
  } = props;
  const data = useDialogs();
  const shouldReduceMotion = useReducedMotion();
  const duration = shouldReduceMotion ? 1 : 250;
  const items = data.dialogs.map((d) => /* @__PURE__ */ jsx(
    Transition,
    {
      unmountOnExit: true,
      transition: "scale",
      duration,
      children: (ref, styles) => /* @__PURE__ */ jsx(
        DialogContainer,
        {
          ref,
          style: styles,
          dirtyWarningLabel,
          confirmLabel,
          cancelLabel,
          closeLabel,
          ...d
        }
      )
    },
    d.dialogId
  ));
  return /* @__PURE__ */ jsx(Portal, { target, type: "dialogs", className: `relative ${className}`, children: /* @__PURE__ */ jsx(TransitionGroup, { component: null, children: items }) });
}

export { Dialogs };
//# sourceMappingURL=Dialogs.mjs.map