@martinsura/ui 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,8 +1,8 @@
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
-import { IconDownload, IconPaperclip, IconFileSpreadsheet, IconX, IconTrashX, IconPlus, IconPencil, IconDotsVertical, IconEyeOff, IconEye, IconCheck, IconDroplet, IconDatabaseOff, IconChevronUp, IconChevronDown, IconSelector, IconCalendar, IconUsers, IconInfoCircle, IconAlertTriangle, IconCircleX, IconBold, IconItalic, IconUnderline, IconList, IconListNumbers, IconLink, IconUnlink, IconClearFormatting, IconUpload, IconAlertCircle, IconTrash, IconLoader2, IconChevronLeft, IconChevronRight, IconSearch } from '@tabler/icons-react';
+import { IconEyeOff, IconEye, IconDownload, IconPaperclip, IconFileSpreadsheet, IconX, IconTrashX, IconPlus, IconPencil, IconDotsVertical, IconCheck, IconDroplet, IconDatabaseOff, IconChevronUp, IconChevronDown, IconSelector, IconCalendar, IconUsers, IconInfoCircle, IconAlertTriangle, IconCircleX, IconBold, IconItalic, IconUnderline, IconList, IconListNumbers, IconLink, IconUnlink, IconClearFormatting, IconUpload, IconAlertCircle, IconTrash, IconLoader2, IconChevronLeft, IconChevronRight, IconSearch } from '@tabler/icons-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createContext, useRef, useState, useLayoutEffect, useEffect, useMemo, useContext, useCallback, useId } from 'react';
+import { createContext, forwardRef, useState, useContext, useRef, useLayoutEffect, useEffect, useMemo, useCallback, useId } from 'react';
 import { createPortal } from 'react-dom';
 import dayjs from 'dayjs';
 
@@ -411,12 +411,12 @@ var ErrorContext = createContext({
 var ErrorProvider = ({ resolveInputError, resolveServerError, children }) => /* @__PURE__ */ jsx(ErrorContext.Provider, { value: { resolveInputError, resolveServerError }, children });
 var useErrorResolver = () => useContext(ErrorContext).resolveInputError;
 var useServerError = () => useContext(ErrorContext).resolveServerError;
-var TextInput = ({
+var TextInput = forwardRef(({
   size = "middle",
   password = false,
   newPassword = false,
   ...props
-}) => {
+}, ref) => {
   const [showPassword, setShowPassword] = useState(false);
   const resolveError = useErrorResolver();
   const resolvedErrors = props.errorName ? resolveError(props.errorName) : [];
@@ -437,6 +437,7 @@ var TextInput = ({
       /* @__PURE__ */ jsx(
         "input",
         {
+          ref,
           type: inputType,
           autoComplete: newPassword ? "new-password" : void 0,
           placeholder: props.placeholder,
@@ -470,7 +471,8 @@ var TextInput = ({
     ] }),
     errorDisplay && /* @__PURE__ */ 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",
@@ -642,9 +644,28 @@ var SwitchInput = ({
     errorDisplay && /* @__PURE__ */ jsx(InputError, { error: String(errorDisplay), className: props.classNames?.error })
   ] });
 };
+
+// src/floating/layerStack.ts
+var FLOATING_ROOT_SELECTOR = "[data-ui-floating-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;
+}
+function hasFloatingRootOpen() {
+  return getTopmostElement(FLOATING_ROOT_SELECTOR) !== null;
+}
+function isTopmostFloatingRoot(element) {
+  return element !== null && getTopmostElement(FLOATING_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;
+}
 var GAP = 6;
 var VIEWPORT_MARGIN = 8;
-var FLOATING_ROOT_SELECTOR = "[data-ui-floating-root]";
 function calcPosition(triggerRect, panelRect, placement) {
   const spaceBelow = window.innerHeight - triggerRect.bottom - VIEWPORT_MARGIN;
   const spaceAbove = triggerRect.top - VIEWPORT_MARGIN;
@@ -751,7 +772,7 @@ var Dropdown = ({
       }
     };
     const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
+      if (e.key === "Escape" && isTopmostFloatingRoot(popupRef.current)) {
         setOpen(false);
       }
     };
@@ -1915,6 +1936,19 @@ var SelectDropdown = (props) => {
   useEffect(() => {
     if (props.isOpen) {
       document.addEventListener("mousedown", handleMouseDown);
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape" && isTopmostFloatingRoot(popupRef.current)) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          props.onClose();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handleMouseDown);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
     }
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, [props.isOpen, handleMouseDown]);
@@ -2264,6 +2298,19 @@ var CalendarPopup = (props) => {
   useEffect(() => {
     if (props.isOpen) {
       document.addEventListener("mousedown", handleMouseDown);
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape" && isTopmostFloatingRoot(popupRef.current)) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          props.onClose();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handleMouseDown);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
     }
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, [props.isOpen, handleMouseDown]);
@@ -2316,7 +2363,7 @@ var CalendarPopup = (props) => {
         ref: popupRef,
         "data-ui-floating-root": "",
         style: { top: pos.top, left: pos.left },
-        className: "fixed z-1000 bg-white border border-(--ui-border) rounded-(--ui-radius-lg) shadow-lg w-68",
+        className: "fixed z-1003 bg-white border border-(--ui-border) rounded-(--ui-radius-lg) shadow-lg w-68",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-(--ui-border)", children: [
             /* @__PURE__ */ jsx(
@@ -2815,6 +2862,7 @@ var Drawer = ({ placement = "top", ...props }) => {
   const [footer, setFooter] = useState(null);
   const [loading, setLoading] = useState(false);
   const frameRef = useRef(0);
+  const panelRef = useRef(null);
   useEffect(() => {
     if (props.isOpen) {
       setRendered(true);
@@ -2833,9 +2881,19 @@ var Drawer = ({ placement = "top", ...props }) => {
       return;
     }
     const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        props.onClose(false);
+      if (e.key !== "Escape" || e.defaultPrevented) {
+        return;
+      }
+      if (hasFloatingRootOpen()) {
+        return;
+      }
+      if (isTargetInsideFloatingRoot(e.target)) {
+        return;
+      }
+      if (!isTopmostLayerRoot(panelRef.current)) {
+        return;
       }
+      props.onClose(false);
     };
     document.body.style.overflow = "hidden";
     document.addEventListener("keydown", handleKeyDown);
@@ -2872,6 +2930,8 @@ var Drawer = ({ placement = "top", ...props }) => {
       /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: panelRef,
+          "data-ui-layer-root": "",
           className: twMerge(
             panelBase[placement],
             "bg-white shadow-xl transition-transform duration-220 ease-out",
@@ -2983,6 +3043,256 @@ var DrawerContent = ({ loading = false, children }) => {
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
+var ModalContext = createContext(null);
+function useModal() {
+  const ctx = 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] = useState(props.isOpen);
+  const [visible, setVisible] = useState(false);
+  const [title, setTitle] = useState("");
+  const [footer, setFooter] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const frameRef = useRef(0);
+  const panelRef = useRef(null);
+  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]);
+  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]);
+  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 createPortal(
+    /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { close, saveAndClose, setTitle, setFooter, setLoading }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: 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__ */ jsx(
+        "div",
+        {
+          className: 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__ */ jsxs(
+            "div",
+            {
+              ref: panelRef,
+              "data-ui-layer-root": "",
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-hidden": !props.isOpen,
+              style: !isFullscreen ? { width, maxWidth } : void 0,
+              className: 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__ */ jsxs(
+                  "div",
+                  {
+                    className: 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__ */ jsx("span", { className: twMerge(componentTitleClasses.inverse, "truncate", props.classNames?.title), children: title }),
+                      showCloseButton && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: close,
+                          className: twMerge(
+                            "shrink-0 text-(--ui-primary-text)/70 hover:text-(--ui-primary-text) cursor-pointer transition-colors",
+                            props.classNames?.closeButton
+                          ),
+                          children: /* @__PURE__ */ jsx(IconX, { size: 18, strokeWidth: 1.5 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: twMerge(
+                      "overflow-y-auto flex-1",
+                      isFullscreen ? "min-h-0" : "max-h-[calc(100dvh-120px)]",
+                      drawerLayoutClasses.body,
+                      props.classNames?.body
+                    ),
+                    children: loading ? /* @__PURE__ */ jsx("div", { className: twMerge("flex items-center justify-center py-16", props.classNames?.loading), children: /* @__PURE__ */ jsx(Spinner, { size: "large", color: "primary" }) }) : props.children
+                  }
+                ),
+                hasFooter && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: 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();
+  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();
+  useEffect(() => {
+    setFooter(
+      /* @__PURE__ */ jsx("div", { className: twMerge("flex items-center gap-2", alignClass2[align]), children })
+    );
+    return () => setFooter(null);
+  }, [align, children]);
+  return null;
+};
+var ModalSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-3", children: [
+  /* @__PURE__ */ jsx("div", { className: "h-4 bg-(--ui-surface-muted) rounded w-1/3" }),
+  /* @__PURE__ */ jsx("div", { className: "h-8 bg-(--ui-surface-muted) rounded" }),
+  /* @__PURE__ */ jsx("div", { className: "h-4 bg-(--ui-surface-muted) rounded w-1/3 mt-5" }),
+  /* @__PURE__ */ jsx("div", { className: "h-8 bg-(--ui-surface-muted) rounded" }),
+  /* @__PURE__ */ jsx("div", { className: "h-4 bg-(--ui-surface-muted) rounded w-1/3 mt-5" }),
+  /* @__PURE__ */ jsx("div", { className: "h-8 bg-(--ui-surface-muted) rounded" })
+] });
+var ModalContent = ({ loading = false, children }) => {
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsx(ModalSkeleton, {}),
+      /* @__PURE__ */ jsx(Skeleton, { active: true, title: false, paragraph: { rows: 2 } })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
 var Alert = ({ type = "info", message, description, closable = false, className, classNames }) => {
   const [closed, setClosed] = useState(false);
   if (closed) {
@@ -4192,6 +4502,6 @@ function initUI(config) {
   r.style.setProperty("--ui-empty-compact-description", layout.empty.compactDescription);
 }
 
-export { ActiveTag, Alert, Avatar, Badge, Button, CheckboxInput, ColorInput, DateInput, Drawer, DrawerContent, DrawerFooter, DrawerTitle, Dropdown, Empty, ErrorProvider, FilterCheckboxInput, FilterDateInput, FilterDateRangePopover, FilterNumberInput, FilterSelectGroupPopover, FilterSelectInput, FilterTextInput, FlagTag, Grid, GridFilters, HtmlInput, InputError, InputField, InputLabel, MultiSelectInput, NotificationProvider, NumberInput, Panel, Popconfirm, Pretty, SelectInput, ServerError, Skeleton, SortDirection, Spinner, SwitchInput, Table, Tabs, Tag, TextInput, Tooltip, UploadInput, UploadProvider, getIcon, initUI, notification, registerIcons, uiTheme, useDrawer, useGrid, useNotification, useUploadConfig };
+export { ActiveTag, Alert, Avatar, Badge, Button, CheckboxInput, ColorInput, DateInput, Drawer, DrawerContent, DrawerFooter, DrawerTitle, Dropdown, Empty, ErrorProvider, FilterCheckboxInput, FilterDateInput, FilterDateRangePopover, FilterNumberInput, FilterSelectGroupPopover, FilterSelectInput, FilterTextInput, FlagTag, Grid, GridFilters, HtmlInput, InputError, InputField, InputLabel, Modal, ModalContent, ModalFooter, ModalTitle, MultiSelectInput, NotificationProvider, NumberInput, Panel, Popconfirm, Pretty, SelectInput, ServerError, Skeleton, SortDirection, Spinner, SwitchInput, Table, Tabs, Tag, TextInput, Tooltip, UploadInput, UploadProvider, getIcon, initUI, notification, registerIcons, uiTheme, useDrawer, useGrid, useModal, useNotification, useUploadConfig };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map