aplance-ui 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplance-ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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

@@ -86,6 +86,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 = {
@@ -124,14 +138,14 @@ export type ModalProps = {
    */
   placement?: ModalPlacement;
   /**
-   * Placement override below the `--md` breakpoint (≤ 900px).
+   * Placement override below the `--md` breakpoint (900px and below).
    * Defaults to `bottom` so modals become bottom sheets on phones.
    * Pass the same value as `placement` (or any placement) to opt out.
    */
   mobilePlacement?: ModalPlacement;
   /**
    * Entrance/exit animation. Defaults based on `placement`:
-   * center→scale, top/bottom/left/right→slide from that edge, full→fade.
+   * center -> scale, top/bottom/left/right -> slide from that edge, full -> fade.
    */
   animation?: ModalAnimation;
   scrollBehavior?: ModalScrollBehavior;
@@ -229,8 +243,8 @@ export const Modal: FC<ModalProps> = ({
   const close = useCallback(() => setIsOpen(false), [setIsOpen]);
   const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
 
-  // Open:  setShouldRender(true) → node mounts → useLayoutEffect below fires → isVisible=true → open transition
-  // Close: setIsVisible(false) immediately → close transition plays → setTimeout unmounts after duration
+  // Open: setShouldRender(true) -> node mounts -> useLayoutEffect below fires -> isVisible=true -> open transition.
+  // Close: setIsVisible(false) -> close transition plays -> setTimeout unmounts after duration.
   useEffect(() => {
     if (isOpen) {
       setShouldRender(true);
@@ -260,22 +274,28 @@ export const Modal: FC<ModalProps> = ({
     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(() => {
@@ -312,9 +332,22 @@ export const Modal: FC<ModalProps> = ({
 
   // 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.
+  // Backdrop / outside click - 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 ? (

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

@@ -453,6 +453,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}

package/registry/components/ui/data-table/data-table.module.css

@@ -114,16 +114,18 @@
   overflow-x: auto;
   overflow-y: auto;
   border: var(--border-1) solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-background);
-  position: relative;
-}
+  border-radius: var(--radius-md);
+  background: var(--color-background);
+  position: relative;
+}
 
 /* ─────────────────────────────────────────────
    Shared <table> - header wrap + body wrap.
    table-layout:fixed + identical widths = perfect column alignment.
 ───────────────────────────────────────────── */
 .table {
+  --data-table-selection-control-size: var(--spacing-9);
+
   border-collapse: separate;
   border-spacing: 0;
   table-layout: fixed;
@@ -295,6 +297,8 @@
 }
 
 .selection_checkbox {
+  --native-control-size: var(--data-table-selection-control-size);
+
   width: fit-content;
   min-width: fit-content;
   display: inline-flex;
@@ -534,14 +538,28 @@
   min-width: 0;
 }
 
-.pagination_left {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  min-width: 0;
-  flex-shrink: 1;
+.pagination_bar_loading {
+  flex-wrap: wrap;
+  row-gap: var(--spacing-4);
 }
 
+.loading_select_skeleton {
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+}
+
+.pagination_left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+.pagination_left_loading {
+  overflow: hidden;
+}
+
 .pagination_count {
   font-size: var(--font-size-sm);
   color: var(--color-muted-foreground);
@@ -557,15 +575,56 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-8);
-  flex-shrink: 0;
+  min-width: 0;
+  flex-shrink: 1;
 }
 
-.page_size_wrap {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-5);
+.pagination_controls_loading {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 100%;
+  row-gap: var(--spacing-4);
+}
+
+.pagination_controls_loading > * {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.pagination_text_skeleton {
+  height: 1em;
+  min-width: 0;
+  max-width: 100%;
+  flex: 0 1 auto;
+}
+
+.pagination_select_skeleton,
+.pagination_button_skeleton {
+  width: var(--spacing-11);
+  height: var(--spacing-11);
+  min-width: 0;
+}
+
+.pagination_select_skeleton {
+  flex: 0 1 auto;
 }
 
+.pagination_button_skeleton {
+  flex: 0 0 auto;
+}
+
+.page_size_wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-5);
+  min-width: 0;
+  flex-shrink: 1;
+  max-width: 100%;
+}
+
 .page_size_label {
   font-size: var(--font-size-sm);
   color: var(--color-muted-foreground);
@@ -585,8 +644,18 @@
   }
 }
 
-.page_nav {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
+.page_nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-shrink: 0;
+}
+
+.page_nav_loading {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  row-gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+  flex-shrink: 1;
+}