@expcat/tigercat-react 0.0.1

package/dist/chunk-7OLWGHUR.mjs

@@ -0,0 +1,169 @@
+import { useEscapeKey } from './chunk-ZO4XVOHU.mjs';
+import React, { useEffect, useCallback, useMemo, useId, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { getModalContentClasses, getModalContainerClasses, resolveLocaleText, captureActiveElement, focusFirst, restoreFocus, classNames, modalMaskClasses, modalHeaderClasses, modalTitleClasses, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Modal = ({
+  visible = false,
+  size = "md",
+  title,
+  titleContent,
+  closable = true,
+  mask = true,
+  maskClosable = true,
+  centered = false,
+  destroyOnClose = false,
+  zIndex = 1e3,
+  className,
+  children,
+  footer,
+  onVisibleChange,
+  onClose,
+  onCancel,
+  onOk: _onOk,
+  closeAriaLabel,
+  locale,
+  style,
+  ...rest
+}) => {
+  const [hasBeenOpened, setHasBeenOpened] = React.useState(visible);
+  useEffect(() => {
+    if (visible) {
+      setHasBeenOpened(true);
+    }
+  }, [visible]);
+  useEffect(() => {
+    onVisibleChange?.(visible);
+    if (!visible && onClose) {
+      onClose();
+    }
+  }, [visible, onVisibleChange, onClose]);
+  const shouldRender = destroyOnClose ? visible : hasBeenOpened;
+  const handleClose = useCallback(() => {
+    onCancel?.();
+    onVisibleChange?.(false);
+  }, [onCancel, onVisibleChange]);
+  const handleMaskClick = useCallback(
+    (event) => {
+      if (maskClosable && event.target === event.currentTarget) {
+        handleClose();
+      }
+    },
+    [maskClosable, handleClose]
+  );
+  const contentClasses = useMemo(() => getModalContentClasses(size, className), [size, className]);
+  const containerClasses = useMemo(() => getModalContainerClasses(centered), [centered]);
+  const resolvedCloseAriaLabel = resolveLocaleText(
+    "Close",
+    closeAriaLabel,
+    locale?.modal?.closeAriaLabel,
+    locale?.common?.closeText
+  );
+  const reactId = useId();
+  const modalId = useMemo(() => `tiger-modal-${reactId}`, [reactId]);
+  const titleId = `${modalId}-title`;
+  const {
+    ["aria-labelledby"]: _ariaLabelledby,
+    role: _role,
+    tabIndex: _tabIndex,
+    ...dialogDivProps
+  } = rest;
+  const ariaLabelledby = rest["aria-labelledby"] ?? (title || titleContent ? titleId : void 0);
+  const dialogRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  useEffect(() => {
+    if (!visible) return;
+    previousActiveElementRef.current = captureActiveElement();
+    const timer = setTimeout(() => {
+      focusFirst([closeButtonRef.current, dialogRef.current]);
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [visible]);
+  useEffect(() => {
+    if (visible) return;
+    restoreFocus(previousActiveElementRef.current);
+  }, [visible]);
+  useEscapeKey({ enabled: visible, onEscape: handleClose });
+  const CloseIcon = /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "h-5 w-5",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: closeIconViewBox,
+      stroke: "currentColor",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: closeIconPathStrokeLinecap,
+          strokeLinejoin: closeIconPathStrokeLinejoin,
+          strokeWidth: closeIconPathStrokeWidth,
+          d: closeIconPathD
+        }
+      )
+    }
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  if (destroyOnClose && !visible) {
+    return null;
+  }
+  const modalContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(modalWrapperClasses, !visible && "pointer-events-none"),
+      style: { zIndex },
+      hidden: !visible,
+      "aria-hidden": !visible ? "true" : void 0,
+      "data-tiger-modal-root": "",
+      children: [
+        mask && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(modalMaskClasses, visible ? "opacity-100" : "opacity-0"),
+            "aria-hidden": "true",
+            "data-tiger-modal-mask": ""
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: containerClasses, onClick: handleMaskClick, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames(contentClasses),
+            style,
+            ...dialogDivProps,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": ariaLabelledby,
+            tabIndex: -1,
+            ref: dialogRef,
+            "data-tiger-modal": "",
+            children: [
+              (title || titleContent || closable) && /* @__PURE__ */ jsxs("div", { className: modalHeaderClasses, children: [
+                (title || titleContent) && /* @__PURE__ */ jsx("h3", { id: titleId, className: modalTitleClasses, children: titleContent || title }),
+                closable && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: modalCloseButtonClasses,
+                    onClick: handleClose,
+                    "aria-label": resolvedCloseAriaLabel,
+                    ref: closeButtonRef,
+                    children: CloseIcon
+                  }
+                )
+              ] }),
+              children && /* @__PURE__ */ jsx("div", { className: modalBodyClasses, children }),
+              footer && /* @__PURE__ */ jsx("div", { className: modalFooterClasses, "data-tiger-modal-footer": "", children: footer })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+  return createPortal(modalContent, document.body);
+};
+
+export { Modal };