indas-ui 0.1.7 → 0.1.8

package/dist/cjs/components/modals/Modal.js

@@ -64,7 +64,11 @@ const modalSizes = {
  * @param breakpoint - Pixel width threshold (default 768)
  */
 function useIsMobile(breakpoint = 768) {
-    const [isMobile, setIsMobile] = React.useState(false);
+    return useMobileQuery(breakpoint) ?? false;
+}
+/** As useIsMobile, but null until the width has been read (the first render, and on the server). */
+function useMobileQuery(breakpoint) {
+    const [isMobile, setIsMobile] = React.useState(null);
     React.useEffect(() => {
         const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
         setIsMobile(mq.matches);
@@ -241,7 +245,22 @@ ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
  */
 const ModalContent = React.forwardRef(({ className, children, hideCloseButton, disableOutsideClick, size, style, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
     const stableRef = useStableRef(ref);
-    const isMobile = useIsMobile();
+    // The page and the dialog are different trees, so switching between them remounts everything
+    // inside: a form half filled in was wiped when a tablet turned, or a window was dragged, across
+    // the breakpoint. So the layout follows the screen only while closed; open, it keeps the one it
+    // opened with, and catches up once closed. The content exists only while open, so its ref says.
+    const live = useMobileQuery(768);
+    const [open, setOpen] = React.useState(false);
+    const [held, setHeld] = React.useState(null);
+    // The first reading always counts: before it the width is unknown, and a modal open at page load
+    // on a phone must still become the page.
+    if (live !== null && held !== live && (held === null || !open))
+        setHeld(live);
+    const isMobile = held ?? false;
+    const contentRef = React.useCallback((node) => {
+        stableRef(node);
+        setOpen(node !== null);
+    }, [stableRef]);
     // Nested modals must paint above their parent. Radix portals every modal to
     // <body>, so equal z-index makes stacking fall back to DOM order and the
     // child renders behind / overlapping the parent.
@@ -256,12 +275,12 @@ const ModalContent = React.forwardRef(({ className, children, hideCloseButton, d
     }, [hasOpenChild]);
     // On mobile: render as a full-screen page
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(DialogPrimitive.Content, { ref: stableRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: (0, utils_1.cn)("fixed inset-0 flex flex-col", "bg-[rgb(var(--bg-surface))]", className), 
+        return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(DialogPrimitive.Content, { ref: contentRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: (0, utils_1.cn)("fixed inset-0 flex flex-col", "bg-[rgb(var(--bg-surface))]", className), 
                 // Always block outside click on mobile — there's nothing "outside"
                 onInteractOutside: (e) => e.preventDefault(), onEscapeKeyDown: handleEscapeKeyDown, ...props, children: (0, jsx_runtime_1.jsx)(ModalMobileContext.Provider, { value: { isMobilePage: true, onClose: undefined }, children: children }) }) }));
     }
     // Desktop: unchanged Radix dialog
-    return ((0, jsx_runtime_1.jsxs)(ModalPortal, { children: [(0, jsx_runtime_1.jsx)(ModalOverlay, { style: { zIndex: zIndex - 1 } }), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: stableRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: (0, utils_1.cn)("fixed left-[50%] top-[50%] grid translate-x-[-50%] translate-y-[-50%]", "border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shadow-lg", "rounded-lg sm:rounded-lg", size ? modalSizes[size] : "max-w-lg w-full mx-4 h-auto max-h-[85vh]", 
+    return ((0, jsx_runtime_1.jsxs)(ModalPortal, { children: [(0, jsx_runtime_1.jsx)(ModalOverlay, { style: { zIndex: zIndex - 1 } }), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: contentRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: (0, utils_1.cn)("fixed left-[50%] top-[50%] grid translate-x-[-50%] translate-y-[-50%]", "border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shadow-lg", "rounded-lg sm:rounded-lg", size ? modalSizes[size] : "max-w-lg w-full mx-4 h-auto max-h-[85vh]", 
                 // Gap + padding only for standard modals — fullscreen/master/p-0 modals
                 // run their own flush header/body/footer layout, so the gap shows as bands.
                 size !== 'master' && size !== 'fullscreen' && !className?.includes('p-0') && "gap-3 sm:gap-4 p-4 sm:p-6", className), onInteractOutside: (e) => {

package/dist/components/modals/Modal.js

@@ -25,7 +25,11 @@ const modalSizes = {
  * @param breakpoint - Pixel width threshold (default 768)
  */
 export function useIsMobile(breakpoint = 768) {
-    const [isMobile, setIsMobile] = React.useState(false);
+    return useMobileQuery(breakpoint) ?? false;
+}
+/** As useIsMobile, but null until the width has been read (the first render, and on the server). */
+function useMobileQuery(breakpoint) {
+    const [isMobile, setIsMobile] = React.useState(null);
     React.useEffect(() => {
         const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
         setIsMobile(mq.matches);
@@ -198,7 +202,22 @@ ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
  */
 const ModalContent = React.forwardRef(({ className, children, hideCloseButton, disableOutsideClick, size, style, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
     const stableRef = useStableRef(ref);
-    const isMobile = useIsMobile();
+    // The page and the dialog are different trees, so switching between them remounts everything
+    // inside: a form half filled in was wiped when a tablet turned, or a window was dragged, across
+    // the breakpoint. So the layout follows the screen only while closed; open, it keeps the one it
+    // opened with, and catches up once closed. The content exists only while open, so its ref says.
+    const live = useMobileQuery(768);
+    const [open, setOpen] = React.useState(false);
+    const [held, setHeld] = React.useState(null);
+    // The first reading always counts: before it the width is unknown, and a modal open at page load
+    // on a phone must still become the page.
+    if (live !== null && held !== live && (held === null || !open))
+        setHeld(live);
+    const isMobile = held ?? false;
+    const contentRef = React.useCallback((node) => {
+        stableRef(node);
+        setOpen(node !== null);
+    }, [stableRef]);
     // Nested modals must paint above their parent. Radix portals every modal to
     // <body>, so equal z-index makes stacking fall back to DOM order and the
     // child renders behind / overlapping the parent.
@@ -213,12 +232,12 @@ const ModalContent = React.forwardRef(({ className, children, hideCloseButton, d
     }, [hasOpenChild]);
     // On mobile: render as a full-screen page
     if (isMobile) {
-        return (_jsx(DialogPrimitive.Portal, { children: _jsx(DialogPrimitive.Content, { ref: stableRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: cn("fixed inset-0 flex flex-col", "bg-[rgb(var(--bg-surface))]", className), 
+        return (_jsx(DialogPrimitive.Portal, { children: _jsx(DialogPrimitive.Content, { ref: contentRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: cn("fixed inset-0 flex flex-col", "bg-[rgb(var(--bg-surface))]", className), 
                 // Always block outside click on mobile — there's nothing "outside"
                 onInteractOutside: (e) => e.preventDefault(), onEscapeKeyDown: handleEscapeKeyDown, ...props, children: _jsx(ModalMobileContext.Provider, { value: { isMobilePage: true, onClose: undefined }, children: children }) }) }));
     }
     // Desktop: unchanged Radix dialog
-    return (_jsxs(ModalPortal, { children: [_jsx(ModalOverlay, { style: { zIndex: zIndex - 1 } }), _jsxs(DialogPrimitive.Content, { ref: stableRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: cn("fixed left-[50%] top-[50%] grid translate-x-[-50%] translate-y-[-50%]", "border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shadow-lg", "rounded-lg sm:rounded-lg", size ? modalSizes[size] : "max-w-lg w-full mx-4 h-auto max-h-[85vh]", 
+    return (_jsxs(ModalPortal, { children: [_jsx(ModalOverlay, { style: { zIndex: zIndex - 1 } }), _jsxs(DialogPrimitive.Content, { ref: contentRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: cn("fixed left-[50%] top-[50%] grid translate-x-[-50%] translate-y-[-50%]", "border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shadow-lg", "rounded-lg sm:rounded-lg", size ? modalSizes[size] : "max-w-lg w-full mx-4 h-auto max-h-[85vh]", 
                 // Gap + padding only for standard modals — fullscreen/master/p-0 modals
                 // run their own flush header/body/footer layout, so the gap shows as bands.
                 size !== 'master' && size !== 'fullscreen' && !className?.includes('p-0') && "gap-3 sm:gap-4 p-4 sm:p-6", className), onInteractOutside: (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indas-ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Indas UI — React component library for business apps: Tailwind design tokens, Radix primitives, Lucide icons, DataGrid, dashboards and charts.",
   "license": "MIT",
   "author": "Indas Analytics Pvt Ltd",