aplance-ui 1.2.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplance-ui",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "The aplance-ui CLI - scaffold the design system and copy components into your project as source.",
   "keywords": [
     "react",

package/registry/components/primitives/modal/modal.tsx

@@ -22,6 +22,7 @@ import {
   type ButtonLayout,
 } from "../../ui/button/button";
 import { useFocusOutside } from "../../../hooks/useFocusOutside";
+import { useHasMounted } from "../../../hooks/useHasMounted";
 import { ModalContext, useModal } from "./modal-context";
 import s from "./modal.module.css";
 import { Icon } from "../icon/icon";
@@ -86,6 +87,20 @@ const releaseScrollLock = () => {
   }
 };
 
+// Module-level stack of open modal ids. Only the topmost modal reacts to
+// Escape / backdrop-click - without this, dismissing a child modal (media
+// picker, upload, etc.) also closes the parent it was opened from.
+const _modalStack: string[] = [];
+const pushModal = (id: string) => {
+  _modalStack.push(id);
+};
+const popModal = (id: string) => {
+  const index = _modalStack.lastIndexOf(id);
+  if (index >= 0) _modalStack.splice(index, 1);
+};
+const isTopModal = (id: string): boolean =>
+  _modalStack[_modalStack.length - 1] === id;
+
 // ─── Shared button passthrough ────────────────────────────────────────────────
 
 export type ButtonPassthroughProps = {
@@ -187,6 +202,8 @@ export const Modal: FC<ModalProps> = ({
   // Always starts false so the element is in the DOM before the transition fires
   const [isVisible, setIsVisible] = useState(false);
 
+  const mounted = useHasMounted();
+
   const contentRef = useRef<HTMLDivElement>(null);
   const modalId = useId();
 
@@ -249,33 +266,39 @@ export const Modal: FC<ModalProps> = ({
   // registers the closed CSS state before we flip to open - same trick
   // Popover uses with isMeasured + ResizeObserver.
   useLayoutEffect(() => {
-    if (shouldRender && contentRef.current) {
+    if (shouldRender && mounted && contentRef.current) {
       void contentRef.current.offsetHeight; // flush reflow
       setIsVisible(isOpen);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shouldRender]); // only run when node mounts, not on every isOpen change
+  }, [shouldRender, mounted]); // only run when node mounts or mounted state changes
 
   useEffect(() => {
     if (isOpen) onOpenRef.current?.();
   }, [isOpen]);
 
-  // Body scroll lock - reference-counted across stacked modals
+  // Body scroll lock + open-modal stack registration (both reference-counted
+  // across stacked modals).
   useEffect(() => {
     if (!isOpen) return;
     acquireScrollLock();
-    return releaseScrollLock;
-  }, [isOpen]);
+    pushModal(modalId);
+    return () => {
+      releaseScrollLock();
+      popModal(modalId);
+    };
+  }, [isOpen, modalId]);
 
-  // ESC key
+  // ESC key - only the topmost modal closes, so Escape inside a child modal
+  // doesn't also dismiss its parent.
   useEffect(() => {
     if (!closeOnEsc || !isOpen) return;
     const handler = (e: globalThis.KeyboardEvent) => {
-      if (e.key === "Escape") close();
+      if (e.key === "Escape" && isTopModal(modalId)) close();
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [isOpen, closeOnEsc, close]);
+  }, [isOpen, closeOnEsc, close, modalId]);
 
   // Focus trap
   useLayoutEffect(() => {
@@ -308,13 +331,25 @@ export const Modal: FC<ModalProps> = ({
     };
     el.addEventListener("keydown", trap);
     return () => el.removeEventListener("keydown", trap);
-  }, [isOpen]);
+  }, [isOpen, mounted]);
 
   // Close when a click lands outside the dialog panel - mirrors Popover's
   // outside-click pattern so the component family stays consistent.
-  useFocusOutside([contentRef], close, {
-    enabled: closeOnOverlayClick && isOpen,
-  });
+  // `ignoreSelector` exempts portaled popover menus (CustomSelect, DatePicker,
+  // RowActionsPopover, etc.): their menus portal to document.body so they're
+  // outside `contentRef`, but a click on a dropdown option must NOT dismiss
+  // the dialog it was opened from. Gated on being the topmost modal so a click
+  // that dismisses a child modal doesn't bubble into closing its parent.
+  useFocusOutside(
+    [contentRef],
+    () => {
+      if (isTopModal(modalId)) close();
+    },
+    {
+      enabled: closeOnOverlayClick && isOpen,
+      ignoreSelector: "[data-popover-menu]",
+    },
+  );
 
   // ── Dialog panel ──────────────────────────────────────────────────────────
   const dialog = shouldRender ? (
@@ -359,7 +394,11 @@ export const Modal: FC<ModalProps> = ({
   ) : null;
 
   const portal =
-    renderOnPortal && dialog ? createPortal(dialog, document.body) : dialog;
+    renderOnPortal && dialog
+      ? mounted
+        ? createPortal(dialog, document.body)
+        : null
+      : dialog;
 
   // Hoisted triggers sit outside the portal so they stay visible while closed;
   // dialog content lives inside the portal.

package/registry/components/primitives/popover/popover-context.ts

@@ -15,6 +15,7 @@ export type PopoverContextType = {
   position: Position;
   hoverTimeoutRef: RefObject<ReturnType<typeof setTimeout> | null>;
   renderOnPortal: boolean;
+  mounted: boolean;
 };
 
 export const PopoverContext = createContext<PopoverContextType | undefined>(

package/registry/components/primitives/popover/popover.tsx

@@ -14,6 +14,7 @@ import { createPortal } from "react-dom";
 import s from "./popover.module.css";
 import { PopoverContext, usePopover } from "./popover-context";
 import { useFocusOutside } from "../../../hooks/useFocusOutside";
+import { useHasMounted } from "../../../hooks/useHasMounted";
 
 // Types
 export type Position = "top" | "bottom" | "left" | "right";
@@ -82,6 +83,8 @@ export const Popover: FC<PopoverProps> = ({
   // For hover trigger
   const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const mounted = useHasMounted();
+
   const [coords, setCoords] = useState<Coords>({ top: 0, left: 0 });
   const [shouldRender, setShouldRender] = useState(false);
   const [isMeasured, setIsMeasured] = useState(false);
@@ -178,7 +181,7 @@ export const Popover: FC<PopoverProps> = ({
         setIsMeasured(false);
       };
     }
-  }, [shouldRender, calculatePosition]);
+  }, [shouldRender, mounted, calculatePosition]);
 
   // Clear any pending hover-close timer when the Popover unmounts so the
   // delayed setIsOpen never fires on a stale instance.
@@ -265,6 +268,7 @@ export const Popover: FC<PopoverProps> = ({
         hoverTimeoutRef,
         renderOnPortal,
         position,
+        mounted,
       }}
     >
       <div
@@ -387,6 +391,7 @@ export const PopoverMenu: FC<PopoverMenuProps> = ({
     position,
     hoverTimeoutRef,
     renderOnPortal,
+    mounted,
   } = usePopover();
 
   const handleMouseEnter = () => {
@@ -453,6 +458,12 @@ export const PopoverMenu: FC<PopoverMenuProps> = ({
     <div
       ref={menuRef}
       className={clsx(s.menu_wrapper, className)}
+      // Stable marker for portaled-layer detection. A `Popover` menu portals
+      // to `document.body`, escaping its host's DOM subtree - hosts with
+      // outside-click dismissal (Modal/Drawer) match this selector via
+      // `useFocusOutside({ ignoreSelector })` so clicking a menu option
+      // doesn't dismiss the host.
+      data-popover-menu=""
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       style={menuStyles}
@@ -461,5 +472,5 @@ export const PopoverMenu: FC<PopoverMenuProps> = ({
     </div>
   );
 
-  return renderOnPortal ? createPortal(menu, document.body) : menu;
+  return renderOnPortal ? (mounted ? createPortal(menu, document.body) : null) : menu;
 };

package/registry/components/primitives/slider/slider.module.css

@@ -4,11 +4,11 @@
    ─────────────────────────────────────────────────────────────────────────── */
 
 .container {
-  --slider-nav-size: var(--spacing-12);
+  --slider-nav-size: var(--spacing-11);
   --slider-nav-bg: color-mix(in srgb, var(--color-foreground) 56%, transparent);
   --slider-nav-bg-hover: color-mix(in srgb, var(--color-foreground) 78%, transparent);
   --slider-nav-fg: var(--color-background);
-  --slider-dot-size: var(--spacing-6);
+  --slider-dot-size: var(--spacing-5);
   --slider-dot-bg: color-mix(in srgb, var(--color-foreground) 28%, transparent);
   --slider-dot-bg-active: var(--color-primary);
 
@@ -39,6 +39,10 @@
   transition: height var(--transition-base);
 }
 
+.viewport_coverflow {
+  perspective: 72rem;
+}
+
 .track {
   display: flex;
   min-width: 0;
@@ -48,11 +52,21 @@
 }
 
 .track_fade,
-.track_scale {
+.track_scale,
+.track_flip {
   display: grid;
   transform: none;
 }
 
+.track_flip {
+  perspective: 72rem;
+  transform-style: preserve-3d;
+}
+
+.track_coverflow {
+  transform-style: preserve-3d;
+}
+
 .slide {
   min-width: 0;
   flex-grow: 0;
@@ -75,14 +89,45 @@
   }
 }
 
+.slide_cards,
+.slide_coverflow {
+  will-change: transform, opacity;
+  transition:
+    opacity var(--slider-transition-duration) var(--slider-transition-easing),
+    transform var(--slider-transition-duration) var(--slider-transition-easing);
+}
+
+.slide_cards {
+  transform:
+    translateY(var(--slider-slide-offset))
+    scale(var(--slider-slide-scale));
+}
+
+.slide_coverflow {
+  transform:
+    translateY(var(--slider-slide-offset))
+    translateZ(var(--slider-slide-depth))
+    rotateY(var(--slider-slide-rotate))
+    scale(var(--slider-slide-scale));
+  transform-style: preserve-3d;
+}
+
+.container_dragging,
+.container_no_transition {
+  .slide_cards,
+  .slide_coverflow {
+    transition: none;
+  }
+}
+
 .slide_overlay {
   grid-area: 1 / 1;
   width: 100%;
   opacity: 0;
   pointer-events: none;
   transition:
-    opacity var(--transition-base),
-    transform var(--transition-base);
+    opacity var(--slider-transition-duration) var(--slider-transition-easing),
+    transform var(--slider-transition-duration) var(--slider-transition-easing);
 }
 
 .track_fade .slide_overlay {
@@ -93,12 +138,22 @@
   transform: scale(0.96);
 }
 
+.track_flip .slide_overlay {
+  backface-visibility: hidden;
+  transform: rotateY(90deg) scale(0.96);
+  transform-style: preserve-3d;
+}
+
 .slide_active {
   opacity: 1;
   pointer-events: auto;
   transform: scale(1);
 }
 
+.slide_overlay.slide_active {
+  transform: scale(1);
+}
+
 /* ─── Built-in nav arrows ───────────────────────────────────────────────────
    `data-slider-no-drag` is set in TSX so `dragIgnoreSelector` does not start
    a track drag when the user clicks the chevron.
@@ -294,6 +349,8 @@
 @media (--motion-reduce) {
   .track,
   .slide_overlay,
+  .slide_cards,
+  .slide_coverflow,
   .progress_bar {
     transition: none;
   }