@enigmax/primitives 0.26.0 → 0.28.0

package/src/react/select/root.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { Slot } from "@/react/slot";
+import { createPortal } from "react-dom";
 import { groupRows } from "@/core/palette";
 import { shortenQuery } from "@/core/search";
 import { SELECT_STYLES } from "@/react/select/styles";
+import { tabOut, useFloating } from "@/react/floating";
 import { SelectContext, useSelectContext, type SelectItem } from "@/react/select/context";
 import { createSelect, type SelectInstance, type SelectMoveKey, type SelectOptions, type SelectState } from "@/core/select";
 import {
@@ -174,6 +176,9 @@ export function SelectRoot(props: SelectRootProps): ReactNode {
     const triggerRef = useRef<HTMLButtonElement | null>(null);
     const fieldRef = useRef<HTMLInputElement | null>(null);
     const rootRef = useRef<HTMLDivElement | null>(null);
+    const contentRef = useRef<HTMLDivElement | null>(null);
+    /** The root or the portaled panel: both are the select, only one is its DOM subtree. */
+    const owns = useCallback((node: Node | null) => Boolean(node && (rootRef.current?.contains(node) || contentRef.current?.contains(node))), []);
 
     // Kept in a ref so the instance - built once - always calls the CURRENT props rather
     // than the ones it closed over on the first render.
@@ -304,10 +309,10 @@ export function SelectRoot(props: SelectRootProps): ReactNode {
         // Whatever closed it was inside the panel - a row, or Enter in the search field -
         // and the panel is about to unmount with the focus still in it. Focus goes back to
         // the trigger rather than to the body, exactly as Escape does it.
-        const held = rootRef.current?.contains(document.activeElement);
+        const held = owns(document.activeElement);
         setOpen(false);
         if (held) triggerRef.current?.focus();
-    }, [state.open, open, setOpen]);
+    }, [state.open, open, setOpen, owns]);
 
     const close = useCallback(() => {
         setOpen(false);
@@ -321,12 +326,12 @@ export function SelectRoot(props: SelectRootProps): ReactNode {
     useEffect(() => {
         if (!open) return;
         const onPointerDown = (event: PointerEvent) => {
-            if (rootRef.current?.contains(event.target as Node)) return;
+            if (owns(event.target as Node)) return;
             setOpen(false);
         };
         document.addEventListener("pointerdown", onPointerDown, true);
         return () => document.removeEventListener("pointerdown", onPointerDown, true);
-    }, [open, setOpen]);
+    }, [open, setOpen, owns]);
 
     const onListKeyDown = useCallback((event: KeyboardEvent) => {
         const move = MOVE_KEYS[event.key];
@@ -351,6 +356,9 @@ export function SelectRoot(props: SelectRootProps): ReactNode {
             return;
         }
         if (event.key === "Tab" && open) {
+            // The search field is in the portaled panel, at the end of the page: off it, Tab
+            // goes where it would have from beside the trigger, not to the browser chrome.
+            if (contentRef.current?.contains(event.target as Node)) tabOut(event, contentRef.current, triggerRef.current);
             setOpen(false);
             return;
         }
@@ -399,6 +407,7 @@ export function SelectRoot(props: SelectRootProps): ReactNode {
         optionId: (index: number) => `${id}-option-${index}`,
         triggerRef,
         fieldRef,
+        contentRef,
         close,
         onListKeyDown
     }), [instance, state, setOpen, disabled, clearable, multiple, isSearchable, isEmpty, loading, emptyLabel, loadingLabel, ids, id, close, onListKeyDown]);
@@ -614,9 +623,7 @@ export interface SelectContentProps extends ComponentPropsWithoutRef<"div"> {
 
 export function SelectContent({ closeDuration = 120, children, ...props }: SelectContentProps): ReactNode {
     const select = useSelectContext("Select.Content");
-    const ref = useRef<HTMLDivElement | null>(null);
     const [mounted, setMounted] = useState(select.state.open);
-    const [side, setSide] = useState<"top" | "bottom">("bottom");
 
     useEffect(() => {
         if (select.state.open) { setMounted(true); return; }
@@ -625,33 +632,38 @@ export function SelectContent({ closeDuration = 120, children, ...props }: Selec
         return () => clearTimeout(timer);
     }, [select.state.open, closeDuration]);
 
-    // Which way it opens is measured, not assumed: a select near the bottom of the window
-    // opens upwards, or its list is off the screen and unreachable.
-    useLayoutEffect(() => {
-        if (!select.state.open || !ref.current) return;
-        const trigger = select.triggerRef.current?.getBoundingClientRect();
-        if (!trigger) return;
-        const height = ref.current.offsetHeight;
-        const below = window.innerHeight - trigger.bottom;
-        setSide(below < height && trigger.top > below ? "top" : "bottom");
-    }, [select.state.open, select.state.visible.length, select.triggerRef]);
+    /**
+     * Portaled and placed against the trigger, never left in the tree.
+     *
+     * An absolute panel inside the root is clipped by any `overflow: hidden` ancestor and
+     * stacked under any dialog - which is where a select usually sits. So it goes to `<body>`
+     * (or into the dialog it was opened from - see `react/floating.ts`), measured against the
+     * trigger: below it, flipped above when there is more room there, and capped to the room
+     * it has with the list scrolling inside, because a list off the screen is unreachable.
+     */
+    const container = useFloating({
+        open: mounted && select.state.open,
+        anchorRef: select.triggerRef,
+        panelRef: select.contentRef,
+        deps: [select.state.visible.length]
+    });
 
-    if (!mounted) return null;
+    if (!mounted || !container) return null;
 
-    return (
+    return createPortal(
         <div
             {...props}
-            ref={ref}
+            ref={select.contentRef}
             data-enigma-select-content=""
             data-state={select.state.open ? "open" : "closed"}
-            data-side={side}
             onKeyDown={(event) => {
                 props.onKeyDown?.(event);
                 if (!event.defaultPrevented) select.onListKeyDown(event);
             }}
         >
             {children}
-        </div>
+        </div>,
+        container
     );
 }
 

package/src/react/select/styles.ts

@@ -27,12 +27,17 @@ export const SELECT_STYLES = `
     --enigma-select-panel-border: #333333;
     --enigma-select-panel-radius: 0.625rem;
     --enigma-select-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
-    --enigma-select-panel-width: 100%;
     --enigma-select-list-height: 15rem;
 
     --enigma-select-active-bg: #2a2a2a;
     --enigma-select-accent: #fbbf24;
     --enigma-select-tag-bg: #2a2a2a;
+
+    /* The layer every portaled popup shares: above the lightbox (9999), because a popup is
+       opened FROM whatever is on top. The select, the colour picker and the context menu
+       each declare it with the same value, so overriding it once moves all three. Here and
+       not in the light-scheme block, or half the readers get an invalid z-index. */
+    --enigma-floating-z: 10000;
 }
 
 @media (prefers-color-scheme: light) {
@@ -137,11 +142,24 @@ export const SELECT_STYLES = `
 [data-enigma-select-trigger][data-clearable]:focus [data-enigma-select-caret] { opacity: 0; }
 [data-enigma-select-clear]:hover { color: var(--enigma-select-text); background: var(--enigma-select-active-bg); }
 
+/* Portaled to <body> and placed in viewport coordinates against the trigger (see
+   react/floating.ts), so no ancestor's overflow can clip it and no dialog can stack over it.
+   left, top, max-height and data-side are written by the placement: below the trigger,
+   flipped above when there is more room there, and capped to the room it has. The column
+   is what makes the cap shrink the LIST, which scrolls, instead of cutting off the panel. */
 [data-enigma-select-content] {
-    position: absolute; z-index: 50;
-    top: calc(100% + 0.25rem); left: 0;
-    min-width: var(--enigma-select-panel-width); box-sizing: border-box;
+    position: fixed; z-index: var(--enigma-floating-z);
+    display: flex; flex-direction: column;
+    /* As wide as the trigger, measured - 100% would now be a percentage of the window - and
+       wider only for content that cannot shrink. min-content is what keeps the rest at the
+       trigger's width: fixed, the panel's room is the whole window, and a long label or a
+       long "Nothing matches" would otherwise widen it to max-width. --enigma-select-panel-width
+       overrides the trigger's width. */
+    width: min-content;
+    min-width: var(--enigma-select-panel-width, var(--enigma-anchor-width, auto)); box-sizing: border-box;
     padding: 0.25rem;
+    color: var(--enigma-select-text);
+    font-size: var(--enigma-select-font-size);
     background: var(--enigma-select-panel-bg);
     border: 1px solid var(--enigma-select-panel-border);
     border-radius: var(--enigma-select-panel-radius);
@@ -152,9 +170,6 @@ export const SELECT_STYLES = `
        trigger wider than this, which is what it is for. */
     max-width: min(28rem, calc(100vw - 2rem));
 }
-/* Opening upwards is not a variant, it is the same panel measured against the window: near
-   the bottom of the screen the list would otherwise be unreachable. */
-[data-enigma-select-content][data-side="top"] { top: auto; bottom: calc(100% + 0.25rem); }
 [data-enigma-select-content][data-state="closed"] { animation: enigma-select-out 120ms ease-in forwards; pointer-events: none; }
 
 @keyframes enigma-select-in {
@@ -186,6 +201,8 @@ export const SELECT_STYLES = `
 
 [data-enigma-select-list] {
     max-height: var(--enigma-select-list-height);
+    /* Allowed below its content, so the panel's placement cap shrinks it and it scrolls. */
+    min-height: 0; flex: 0 1 auto;
     margin-top: 0.25rem;
     overflow-y: auto; overscroll-behavior: contain;
 }

package/src/react/video/index.tsx

@@ -531,7 +531,14 @@ export function Video(props: VideoProps): ReactNode {
                 playsInline={rest.playsInline ?? true}
                 onClick={() => { if (clickToPlay) toggle(); }}
             >
-                {typeof src !== "string" && sources.map((source) => <source key={source.src} src={source.src} type={source.type} />)}
+                {typeof src !== "string" && sources.map((source) => (
+                    // The type is what lets the browser SKIP a file it cannot play without
+                    // fetching it, which is the only reason to list several. Read from the
+                    // extension when it was not given, and left off when the extension means
+                    // nothing - a wrong type is worse than none, because the source is then
+                    // skipped and the video does not play at all.
+                    <source key={source.src} src={source.src} type={source.type ?? player.sourceType(source.src)} />
+                ))}
                 {tracks?.map((track) => (
                     <track
                         key={track.src}

package/src/react/video/types.ts

@@ -12,7 +12,13 @@ import type { ContextMenuItem, ContextMenuNode } from "@/react/context-menu/cont
 
 export interface VideoSource {
     src: string;
-    /** `video/mp4`, `video/webm`. The browser picks the first one it can play. */
+    /**
+     * `video/mp4`, `video/webm`. The browser picks the first one it can play.
+     *
+     * Inferred from the file extension when it is left out, and left off entirely when the
+     * extension means nothing - the browser then fetches and sniffs, which always works. A
+     * WRONG type is the expensive mistake: the source is skipped without being tried.
+     */
     type?: string;
 }
 

package/dist/viewer-73LSE6RR.js

@@ -1,3 +0,0 @@
-export { ImageViewer, MenuButton } from './chunk-ISXB5RUH.js';
-import './chunk-QIIV2QSV.js';
-import './chunk-EYZ366LP.js';