@martinsura/ui 0.1.2 → 0.1.3

package/dist/index.cjs

@@ -417,12 +417,12 @@ var ErrorContext = react.createContext({
 var ErrorProvider = ({ resolveInputError, resolveServerError, children }) => /* @__PURE__ */ jsxRuntime.jsx(ErrorContext.Provider, { value: { resolveInputError, resolveServerError }, children });
 var useErrorResolver = () => react.useContext(ErrorContext).resolveInputError;
 var useServerError = () => react.useContext(ErrorContext).resolveServerError;
-var TextInput = ({
+var TextInput = react.forwardRef(({
   size = "middle",
   password = false,
   newPassword = false,
   ...props
-}) => {
+}, ref) => {
   const [showPassword, setShowPassword] = react.useState(false);
   const resolveError = useErrorResolver();
   const resolvedErrors = props.errorName ? resolveError(props.errorName) : [];
@@ -443,6 +443,7 @@ var TextInput = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
+          ref,
           type: inputType,
           autoComplete: newPassword ? "new-password" : void 0,
           placeholder: props.placeholder,
@@ -476,7 +477,8 @@ var TextInput = ({
     ] }),
     errorDisplay && /* @__PURE__ */ jsxRuntime.jsx(InputError, { error: String(errorDisplay), className: props.classNames?.error })
   ] });
-};
+});
+TextInput.displayName = "TextInput";
 var numberInputClass = inputBaseClass + " [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none";
 var NumberInput = ({
   size = "middle",
@@ -651,7 +653,7 @@ var SwitchInput = ({
 
 // src/floating/layerStack.ts
 var FLOATING_ROOT_SELECTOR = "[data-ui-floating-root]";
-var DRAWER_ROOT_SELECTOR = "[data-ui-drawer-root]";
+var LAYER_ROOT_SELECTOR = "[data-ui-layer-root]";
 function getTopmostElement(selector) {
   const elements = document.querySelectorAll(selector);
   return elements.length > 0 ? elements[elements.length - 1] : null;
@@ -662,8 +664,8 @@ function hasFloatingRootOpen() {
 function isTopmostFloatingRoot(element) {
   return element !== null && getTopmostElement(FLOATING_ROOT_SELECTOR) === element;
 }
-function isTopmostDrawerRoot(element) {
-  return element !== null && getTopmostElement(DRAWER_ROOT_SELECTOR) === element;
+function isTopmostLayerRoot(element) {
+  return element !== null && getTopmostElement(LAYER_ROOT_SELECTOR) === element;
 }
 function isTargetInsideFloatingRoot(target) {
   return target instanceof Element && target.closest(FLOATING_ROOT_SELECTOR) !== null;
@@ -2894,7 +2896,7 @@ var Drawer = ({ placement = "top", ...props }) => {
       if (isTargetInsideFloatingRoot(e.target)) {
         return;
       }
-      if (!isTopmostDrawerRoot(panelRef.current)) {
+      if (!isTopmostLayerRoot(panelRef.current)) {
         return;
       }
       props.onClose(false);
@@ -2935,7 +2937,7 @@ var Drawer = ({ placement = "top", ...props }) => {
         "div",
         {
           ref: panelRef,
-          "data-ui-drawer-root": "",
+          "data-ui-layer-root": "",
           className: tailwindMerge.twMerge(
             panelBase[placement],
             "bg-white shadow-xl transition-transform duration-220 ease-out",
@@ -3047,6 +3049,256 @@ var DrawerContent = ({ loading = false, children }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
+var ModalContext = react.createContext(null);
+function useModal() {
+  const ctx = react.useContext(ModalContext);
+  if (!ctx) {
+    throw new Error("useModal must be used inside Modal");
+  }
+  return ctx;
+}
+var TRANSITION_MS2 = 220;
+var sizeClass = {
+  small: "w-full max-w-lg",
+  middle: "w-full max-w-3xl",
+  large: "w-full max-w-5xl",
+  auto: "w-auto"
+};
+var Modal = ({
+  placement = "center",
+  size = "middle",
+  width,
+  maxWidth,
+  closeOnEscape = true,
+  closeOnOverlayClick = true,
+  showCloseButton = true,
+  hideHeader = false,
+  destroyOnClose = true,
+  preventClose = false,
+  beforeClose,
+  initialFocusRef,
+  ...props
+}) => {
+  const [rendered, setRendered] = react.useState(props.isOpen);
+  const [visible, setVisible] = react.useState(false);
+  const [title, setTitle] = react.useState("");
+  const [footer, setFooter] = react.useState(null);
+  const [loading, setLoading] = react.useState(false);
+  const frameRef = react.useRef(0);
+  const panelRef = react.useRef(null);
+  react.useEffect(() => {
+    if (props.isOpen) {
+      setRendered(true);
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = requestAnimationFrame(() => setVisible(true));
+      });
+    } else {
+      setVisible(false);
+      if (!destroyOnClose) {
+        return () => cancelAnimationFrame(frameRef.current);
+      }
+      const t = setTimeout(() => setRendered(false), TRANSITION_MS2);
+      return () => clearTimeout(t);
+    }
+    return () => cancelAnimationFrame(frameRef.current);
+  }, [destroyOnClose, props.isOpen]);
+  react.useEffect(() => {
+    if (!props.isOpen) {
+      return;
+    }
+    const focusTarget = initialFocusRef?.current;
+    if (!focusTarget) {
+      return;
+    }
+    const timeout = window.setTimeout(() => focusTarget.focus(), TRANSITION_MS2 / 2);
+    return () => window.clearTimeout(timeout);
+  }, [initialFocusRef, props.isOpen]);
+  react.useEffect(() => {
+    if (!props.isOpen) {
+      return;
+    }
+    const handleKeyDown = (e) => {
+      if (!closeOnEscape || e.key !== "Escape" || e.defaultPrevented) {
+        return;
+      }
+      if (hasFloatingRootOpen() || isTargetInsideFloatingRoot(e.target)) {
+        return;
+      }
+      if (!isTopmostLayerRoot(panelRef.current)) {
+        return;
+      }
+      void requestClose();
+    };
+    document.body.style.overflow = "hidden";
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [closeOnEscape, props.isOpen]);
+  if (!rendered) {
+    return null;
+  }
+  const requestClose = async () => {
+    if (preventClose) {
+      return;
+    }
+    const canClose = await beforeClose?.();
+    if (canClose === false) {
+      return;
+    }
+    props.onClose(false);
+  };
+  const close = () => {
+    void requestClose();
+  };
+  const saveAndClose = (message) => {
+    if (message) {
+      notification.success(message);
+    }
+    props.onClose(true);
+  };
+  const hasFooter = footer !== null;
+  const isFullscreen = placement === "fullscreen";
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { close, saveAndClose, setTitle, setFooter, setLoading }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: tailwindMerge.twMerge(
+            "fixed inset-0 z-1000 bg-black/40 transition-opacity duration-220",
+            visible ? "opacity-100" : "opacity-0",
+            !props.isOpen && "pointer-events-none",
+            props.classNames?.overlay
+          ),
+          onClick: () => closeOnOverlayClick && close()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: tailwindMerge.twMerge(
+            "fixed inset-0 z-1001 flex p-4 transition-all duration-220",
+            isFullscreen ? "items-stretch justify-stretch p-0" : "items-center justify-center",
+            !props.isOpen && "pointer-events-none"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: panelRef,
+              "data-ui-layer-root": "",
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-hidden": !props.isOpen,
+              style: !isFullscreen ? { width, maxWidth } : void 0,
+              className: tailwindMerge.twMerge(
+                "bg-white shadow-xl flex flex-col transition-all duration-220 ease-out",
+                isFullscreen ? "h-full w-full rounded-none" : `${sizeClass[size]} max-h-[calc(100dvh-32px)] rounded-(--ui-radius-lg)`,
+                visible ? "scale-100 opacity-100" : "scale-95 opacity-0",
+                props.className,
+                props.classNames?.panel
+              ),
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                !hideHeader && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: tailwindMerge.twMerge(
+                      "flex items-center justify-between gap-2 bg-(--ui-primary) shrink-0 rounded-t-(--ui-radius-lg)",
+                      isFullscreen && "rounded-none",
+                      drawerLayoutClasses.header,
+                      props.classNames?.header
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge(componentTitleClasses.inverse, "truncate", props.classNames?.title), children: title }),
+                      showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: close,
+                          className: tailwindMerge.twMerge(
+                            "shrink-0 text-(--ui-primary-text)/70 hover:text-(--ui-primary-text) cursor-pointer transition-colors",
+                            props.classNames?.closeButton
+                          ),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 18, strokeWidth: 1.5 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: tailwindMerge.twMerge(
+                      "overflow-y-auto flex-1",
+                      isFullscreen ? "min-h-0" : "max-h-[calc(100dvh-120px)]",
+                      drawerLayoutClasses.body,
+                      props.classNames?.body
+                    ),
+                    children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex items-center justify-center py-16", props.classNames?.loading), children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "large", color: "primary" }) }) : props.children
+                  }
+                ),
+                hasFooter && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: tailwindMerge.twMerge(
+                      "border-t border-(--ui-border) shrink-0 bg-white",
+                      isFullscreen ? "rounded-none" : "rounded-b-(--ui-radius-lg)",
+                      drawerLayoutClasses.footer,
+                      props.classNames?.footer
+                    ),
+                    children: footer
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    document.body
+  );
+};
+var ModalTitle = ({ children }) => {
+  const { setTitle } = useModal();
+  react.useEffect(() => {
+    setTitle(String(children));
+    return () => setTitle("");
+  }, [children]);
+  return null;
+};
+var alignClass2 = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
+};
+var ModalFooter = ({ children, align = "right" }) => {
+  const { setFooter } = useModal();
+  react.useEffect(() => {
+    setFooter(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex items-center gap-2", alignClass2[align]), children })
+    );
+    return () => setFooter(null);
+  }, [align, children]);
+  return null;
+};
+var ModalSkeleton = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-3", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-(--ui-surface-muted) rounded w-1/3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-(--ui-surface-muted) rounded" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-(--ui-surface-muted) rounded w-1/3 mt-5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-(--ui-surface-muted) rounded" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-(--ui-surface-muted) rounded w-1/3 mt-5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-(--ui-surface-muted) rounded" })
+] });
+var ModalContent = ({ loading = false, children }) => {
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ModalSkeleton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { active: true, title: false, paragraph: { rows: 2 } })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
 var Alert = ({ type = "info", message, description, closable = false, className, classNames }) => {
   const [closed, setClosed] = react.useState(false);
   if (closed) {
@@ -4285,6 +4537,10 @@ exports.HtmlInput = HtmlInput;
 exports.InputError = InputError;
 exports.InputField = InputField;
 exports.InputLabel = InputLabel;
+exports.Modal = Modal;
+exports.ModalContent = ModalContent;
+exports.ModalFooter = ModalFooter;
+exports.ModalTitle = ModalTitle;
 exports.MultiSelectInput = MultiSelectInput;
 exports.NotificationProvider = NotificationProvider;
 exports.NumberInput = NumberInput;
@@ -4311,6 +4567,7 @@ exports.registerIcons = registerIcons;
 exports.uiTheme = uiTheme;
 exports.useDrawer = useDrawer;
 exports.useGrid = useGrid;
+exports.useModal = useModal;
 exports.useNotification = useNotification;
 exports.useUploadConfig = useUploadConfig;
 //# sourceMappingURL=index.cjs.map