@qyu/reactcmp-dropdown 1.2.0 → 2.0.1

package/build/bundle/entry/index.js

@@ -1,69 +1,224 @@
 import * as r from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as rdom from 'react-dom';
 
 const CmpCtxState_Open = r.createContext(null);
 
-const CmpButton = props => {
-    const ctxstate = r.useContext(CmpCtxState_Open);
-    if (!ctxstate) {
-        throw new Error(`Using DropdownStateOpen dependend component outside of DropdownStateOpen Context`);
+const CmpCtxState_Refs = r.createContext(null);
+
+const CmpCtxState_Content = r.createContext(null);
+
+const CmpCtxState_Config = r.createContext(null);
+
+const useCtxStateOpen = function () {
+    const ctxstate_open = r.useContext(CmpCtxState_Open);
+    if (!ctxstate_open) {
+        throw new Error(`Using DDN dependend component outside of DDNOpen Context`);
     }
-    const event_click = r.useCallback(() => {
-        ctxstate.open_set(t => !t);
-    }, []);
-    return jsx("button", { onClick: event_click, className: props.className, children: props.children });
+    return ctxstate_open;
 };
 
-const useDropdownCloseEvents = function (params) {
-    const nconfig_blur = params.config?.blur ?? true;
-    const nconfig_click = params.config?.click ?? true;
-    const nconfig_scroll = params.config?.scroll ?? true;
-    const nconfig_resize = params.config?.resize ?? true;
-    const nconfig_escape = params.config?.escape ?? true;
-    r.useEffect(() => {
-        const container = params.ref();
-        if (params.open && container) {
-            const controller = new AbortController();
-            if (nconfig_blur) {
-                container.addEventListener("focusout", ev => {
-                    if (!(ev.relatedTarget instanceof Element) || !container.contains(ev.relatedTarget)) {
-                        params.open_set(false);
+const useCtxStateRefs = function () {
+    const ctxstate_open = r.useContext(CmpCtxState_Refs);
+    if (!ctxstate_open) {
+        throw new Error(`Using DDN dependend component outside of DDNRefs Context`);
+    }
+    return ctxstate_open;
+};
+
+const useCtxStateContent = function () {
+    const ctxstate_content = r.useContext(CmpCtxState_Content);
+    if (!ctxstate_content) {
+        throw new Error(`Using DDN dependend component outside of DDNContent Context`);
+    }
+    return ctxstate_content;
+};
+
+const useCtxStateConfig = function () {
+    const ctxstate_open = r.useContext(CmpCtxState_Config);
+    if (!ctxstate_open) {
+        throw new Error(`Using DDN dependend component outside of DDNConfig Context`);
+    }
+    return ctxstate_open;
+};
+
+const useCtxStateInitOpen = function (params) {
+    const ctxstate_open = r.useContext(CmpCtxState_Open);
+    const [l_open, l_open_set] = r.useState(false);
+    const open = params.open ?? l_open;
+    const open_set = params.open_set ?? l_open_set;
+    return r.useMemo(() => {
+        return {
+            open_local: open,
+            open_inherited: open && (ctxstate_open?.open_inherited ?? true),
+            open_set
+        };
+    }, [open, open_set, ctxstate_open?.open_inherited]);
+};
+
+const useCascade = function () {
+    const [cascade, cascade_set] = r.useState(0);
+    const ctxstate_refs = r.useContext(CmpCtxState_Refs);
+    return [
+        cascade,
+        r.useMemo(() => {
+            return {
+                increment: () => {
+                    cascade_set(n => n + 1);
+                    ctxstate_refs?.cascade_api?.increment();
+                },
+                decrement: () => {
+                    cascade_set(n => n - 1);
+                    ctxstate_refs?.cascade_api?.decrement();
+                },
+            };
+        }, [ctxstate_refs?.cascade_api])
+    ];
+};
+const useRegister = function () {
+    const ctxstate_refs = r.useContext(CmpCtxState_Refs);
+    const l_register_local = r.useMemo(() => new Set(), []);
+    const l_register_down = r.useMemo(() => new Set(), []);
+    return r.useMemo(() => {
+        return {
+            add_own: ref => {
+                l_register_local.add(ref);
+                ctxstate_refs?.register.add_down(ref);
+            },
+            delete_own: ref => {
+                l_register_local.delete(ref);
+                ctxstate_refs?.register.delete_down(ref);
+            },
+            add_down: ref => {
+                l_register_down.add(ref);
+                ctxstate_refs?.register.add_down(ref);
+            },
+            delete_down: ref => {
+                l_register_down.delete(ref);
+                ctxstate_refs?.register.delete_down(ref);
+            },
+            it_full: {
+                [Symbol.iterator]: function* () {
+                    if (ctxstate_refs) {
+                        yield* ctxstate_refs.register.it_up;
+                        yield* ctxstate_refs.register.it_context;
                     }
-                }, { signal: controller.signal });
-            }
-            if (nconfig_click) {
-                document.addEventListener("click", ev => {
-                    const path = ev.composedPath();
-                    if (!container || !path.includes(container)) {
-                        params.open_set(false);
+                    yield* l_register_local;
+                    yield* l_register_down;
+                }
+            },
+            it_local: {
+                [Symbol.iterator]: function* () {
+                    yield* l_register_local;
+                }
+            },
+            it_up: {
+                [Symbol.iterator]: function* () {
+                    if (ctxstate_refs) {
+                        yield* ctxstate_refs.register.it_up;
+                        yield* ctxstate_refs.register.it_context;
                     }
-                }, { signal: controller.signal });
+                }
+            },
+            it_down: {
+                [Symbol.iterator]: function* () {
+                    yield* l_register_down;
+                }
+            },
+            it_context: {
+                [Symbol.iterator]: function* () {
+                    yield* l_register_local;
+                    yield* l_register_down;
+                }
             }
-            if (nconfig_escape) {
-                document.addEventListener("keydown", ev => {
-                    if (!ev.defaultPrevented && ev.key.toLowerCase() === "escape") {
-                        params.open_set(false);
-                        ev.preventDefault();
+        };
+    }, [ctxstate_refs?.register, l_register_local, l_register_down]);
+};
+const useCtxStateInitRefs = function (params) {
+    const register = useRegister();
+    const [cascade, cascade_api] = useCascade();
+    const [rootref, rootref_set] = r.useState(() => new Set());
+    const shardevt_scroll = r.useMemo(() => new Set(), []);
+    return r.useMemo(() => {
+        return {
+            register,
+            container_real: params.container_real,
+            shardevt_scroll,
+            rootref,
+            rootref_set,
+            cascade,
+            cascade_api,
+        };
+    }, [params.container_real, register, rootref, shardevt_scroll, cascade, cascade_api]);
+};
+
+const useCtxStateInitContent = function (params) {
+    return r.useMemo(() => {
+        return {
+            ref_content: params.ref_content,
+        };
+    }, [params.ref_content]);
+};
+
+const useCtxStateInitConfig = function (params) {
+    const nprop_focus = r.useMemo(() => params.focus ?? {}, [params.focus]);
+    const nprop_closeevt = r.useMemo(() => params.closeevt ?? {}, [params.closeevt]);
+    return r.useMemo(() => {
+        return {
+            focus: nprop_focus,
+            closeevt: nprop_closeevt,
+        };
+    }, [nprop_closeevt, nprop_focus]);
+};
+
+const useDDNRoot = function (params) {
+    const { ctxstate_refs } = params;
+    r.useLayoutEffect(() => {
+        if (params.active) {
+            ctxstate_refs.rootref_set(old_rootref => {
+                const now_rootref = new Set(old_rootref);
+                now_rootref.add(params.ref);
+                return now_rootref;
+            });
+            return () => {
+                ctxstate_refs.rootref_set(old_rootref => {
+                    const now_rootref = new Set(old_rootref);
+                    now_rootref.delete(params.ref);
+                    return now_rootref;
+                });
+            };
+        }
+    }, [ctxstate_refs.rootref_set, params.ref, params.active]);
+};
+
+const useDDNRootInfer = function (params) {
+    const ctxstate_refs = useCtxStateRefs();
+    useDDNRoot({
+        ...params,
+        ctxstate_refs,
+    });
+};
+
+const useCloseEvtShard = function (params) {
+    const { ctxstate_refs, ctxstate_open, ctxstate_config, } = params;
+    const nconfig_scroll = ctxstate_config.closeevt.scroll ?? true;
+    r.useEffect(() => {
+        if (params.active) {
+            const element = params.ref();
+            const controller = new AbortController();
+            if (element) {
+                let parent = element.parentElement;
+                const scroll_handler = (event) => {
+                    if (nconfig_scroll) {
+                        ctxstate_open.open_set(false);
                     }
-                }, { signal: controller.signal });
-            }
-            if (nconfig_resize) {
-                window.addEventListener("resize", () => {
-                    params.open_set(false);
-                }, { signal: controller.signal });
-            }
-            if (nconfig_scroll) {
-                let parent = container.parentElement;
+                    ctxstate_refs.shardevt_scroll.forEach(cb => cb(event));
+                };
                 while (parent) {
-                    parent.addEventListener("scroll", () => {
-                        params.open_set(false);
-                    }, { signal: controller.signal });
+                    parent.addEventListener("scroll", scroll_handler, { signal: controller.signal });
                     parent = parent.parentElement;
                 }
-                document.addEventListener("scroll", () => {
-                    params.open_set(false);
-                }, { signal: controller.signal });
+                document.addEventListener("scroll", scroll_handler, { signal: controller.signal });
             }
             return () => {
                 controller.abort();
@@ -71,126 +226,192 @@ const useDropdownCloseEvents = function (params) {
         }
     }, [
         params.ref,
-        params.open,
-        params.open_set,
-        nconfig_click,
+        params.active,
+        ctxstate_open.open_set,
         nconfig_scroll,
-        nconfig_resize,
-        nconfig_escape
+        ctxstate_refs.shardevt_scroll,
     ]);
 };
 
-const cl = function (...clnames) {
-    let result = [];
-    for (const clname of clnames) {
-        if (clname) {
-            result.push(clname);
+const useDDNShard = function (params) {
+    const { ctxstate_open, ctxstate_refs, ctxstate_config } = params;
+    useCloseEvtShard({
+        ref: params.ref,
+        active: params.isolated || !ctxstate_refs.container_real,
+        ctxstate_open,
+        ctxstate_refs,
+        ctxstate_config,
+    });
+    r.useLayoutEffect(() => {
+        if (params.isolated || !ctxstate_refs.container_real) {
+            ctxstate_refs.register.add_own(params.ref);
+            return () => {
+                ctxstate_refs.register.delete_own(params.ref);
+            };
         }
-    }
-    return result.join(" ");
+    }, [ctxstate_refs.register, ctxstate_refs.container_real, params.isolated, params.ref]);
 };
 
-const stylemap_new_remap = function (def, remap) {
-    const result = {};
-    for (const clname of Object.keys(def)) {
-        const remaped = remap[clname];
-        if (remaped !== undefined) {
-            result[clname] = remaped;
-            continue;
+const useDDNShardInfer = function (params) {
+    const ctxstate_open = useCtxStateOpen();
+    const ctxstate_refs = useCtxStateRefs();
+    const ctxstate_config = useCtxStateConfig();
+    useDDNShard({
+        ...params,
+        ctxstate_refs,
+        ctxstate_open,
+        ctxstate_config,
+    });
+};
+
+const ref_use = function (ref, value) {
+    if (ref) {
+        if (typeof ref === "object") {
+            ref.current = value;
         }
-        {
-            result[clname] = clname;
+        else {
+            ref(value);
         }
     }
-    return result;
 };
 
-const stylemap$2 = {
-    container: "container"
+const useRefMerge = function (...refs) {
+    return r.useCallback((value) => {
+        for (const ref of refs) {
+            ref_use(ref, value);
+        }
+    }, refs);
+};
+
+const render_view_default$5 = function (props) {
+    return jsx("button", { ...props });
 };
-const CmpContainer = r.memo(r.forwardRef((props, ref) => {
-    const nprop_style = r.useMemo(() => (props.stylemodule ? stylemap_new_remap(stylemap$2, props.stylemodule) : stylemap$2), [props.stylemodule]);
+const CmpButton = r.memo(r.forwardRef((props, f_ref) => {
+    const nprop_render_view = props.render_view ?? render_view_default$5;
+    const ctxstate_refs = useCtxStateRefs();
+    const ctxstate_open = useCtxStateOpen();
     const l_ref = r.useRef(null);
-    const [open, open_set] = r.useState(false);
-    const l_open = props.open ?? open;
-    const l_open_set = props.open_set ?? open_set;
-    const ctxstate = r.useMemo(() => {
-        return {
-            open: l_open,
-            ref: l_ref,
-            open_set: l_open_set,
-        };
-    }, [l_open, l_open_set]);
-    const mref = r.useMemo(() => {
-        return (element) => {
-            l_ref.current = element;
-            if (ref) {
-                if (typeof ref === "object") {
-                    ref.current = element;
-                }
-                else {
-                    ref(element);
-                }
-            }
-        };
-    }, [ref]);
-    useDropdownCloseEvents({
-        config: props.closeevents,
+    const event_click = r.useCallback(() => {
+        ctxstate_open.open_set(t => !t);
+    }, []);
+    useDDNShardInfer({
+        isolated: false,
         ref: r.useCallback(() => l_ref.current, []),
-        open: ctxstate.open,
-        open_set: ctxstate.open_set,
     });
-    return jsx("div", { ref: mref, className: cl("__qyuddn", props.className, nprop_style.container), children: jsx(CmpCtxState_Open.Provider, { value: ctxstate, children: props.children }) });
+    useDDNRootInfer({
+        ref: r.useCallback(() => l_ref.current, []),
+        active: props.isroot ?? !ctxstate_refs.container_real,
+    });
+    const ref = useRefMerge(l_ref, f_ref);
+    return nprop_render_view({
+        ref,
+        onClick: event_click,
+        disabled: props.disabled,
+        children: props.children,
+        className: props.className,
+    });
 }));
 
-const nprop_align_new = function (raw) {
-    if (!raw) {
-        return "start";
-    }
-    if (raw === true) {
-        return "end";
-    }
-    return raw;
+const CmpButtonVirtual = r.memo(props => {
+    const { target: ref_target } = props;
+    const ctxstate_refs = useCtxStateRefs();
+    useDDNShardInfer({
+        ref: ref_target,
+        isolated: false,
+    });
+    useDDNRootInfer({
+        ref: ref_target,
+        active: props.isroot ?? !ctxstate_refs.container_real,
+    });
+    return props.children;
+});
+
+const useDDNList = function (params) {
+    const { ctxstate_refs } = params;
+    r.useEffect(() => {
+        if (params.visible) {
+            ctxstate_refs.cascade_api.increment();
+            return () => {
+                ctxstate_refs.cascade_api.decrement();
+            };
+        }
+    }, [params.visible, ctxstate_refs.cascade_api]);
 };
-const nprop_justify_new = function (raw) {
-    if (!raw) {
-        return "end";
-    }
-    if (raw === true) {
-        return "start";
-    }
-    return raw;
+
+const useDDNListInfer = function (params) {
+    const ctxstate_refs = useCtxStateRefs();
+    useDDNList({
+        ...params,
+        ctxstate_refs,
+    });
 };
-const nprop_direction_new = function (raw) {
-    if (!raw) {
-        return "ver";
-    }
-    if (raw === true) {
-        return "hor";
+
+const refs_unpack$1 = function* (src) {
+    for (const ref of src) {
+        const element = ref();
+        if (element) {
+            yield element;
+        }
     }
-    return raw;
 };
-const nprop_portal_new = function (portal) {
-    if (typeof portal === "string") {
-        return document.getElementById(portal) ?? null;
-    }
-    if (portal) {
-        return portal;
+const element_inside = function (element, shards) {
+    for (const ref of shards) {
+        if (ref === element || ref.contains(element)) {
+            return true;
+        }
     }
-    return null;
+    return false;
 };
+function useFocusCapture(params) {
+    const { ctxstate_config, ctxstate_refs } = params;
+    const nprop_move = ctxstate_config.focus.capture ?? true;
+    const nprop_restore = ctxstate_config.focus.capture ?? true;
+    const nprop_capture_options = r.useMemo(() => {
+        return ctxstate_config.focus.capture_options ?? {
+            preventScroll: true,
+        };
+    }, [ctxstate_config.focus.capture_options]);
+    const nprop_restore_options = r.useMemo(() => {
+        return ctxstate_config.focus.restore_options ?? {
+            preventScroll: true,
+        };
+    }, [ctxstate_config.focus.restore_options]);
+    const ref_restorecapture = r.useRef(null);
+    r.useLayoutEffect(() => {
+        if (params.open) {
+            if (document.activeElement instanceof HTMLElement) {
+                ref_restorecapture.current = document.activeElement;
+            }
+            if (nprop_move) {
+                params.ref_target()?.focus(nprop_capture_options);
+            }
+        }
+        else {
+            const active = document.activeElement;
+            const restorecapture = ref_restorecapture.current;
+            {
+                ref_restorecapture.current = null;
+            }
+            if (nprop_restore && restorecapture && active instanceof HTMLElement) {
+                const active_inside = element_inside(active, refs_unpack$1(ctxstate_refs.register.it_context));
+                if (active_inside) {
+                    restorecapture.focus(nprop_restore_options);
+                }
+            }
+        }
+    }, [params.open]);
+}
 
-const stylemap$1 = {
-    listfix: "listfix",
-    listfix_open: "listfix_open",
-    listfix_justify_start: "listfix_justify_start",
-    listfix_justify_end: "listfix_justify_end",
-    listfix_align_start: "listfix_align_start",
-    listfix_align_end: "listfix_align_end",
-    listfix_align_center: "listfix_align_center",
-    listfix_vertical: "listfix_vertical",
-    listfix_horizontal: "listfix_horizontal",
+const useFocusCaptureInfer = function (params) {
+    const ctxstate_refs = useCtxStateRefs();
+    const ctxstate_config = useCtxStateConfig();
+    useFocusCapture({
+        ...params,
+        ctxstate_refs,
+        ctxstate_config,
+    });
 };
+
 const normalize_justify$1 = function (params) {
     let axis_main;
     switch (params.direction) {
@@ -229,27 +450,15 @@ const normalize_justify$1 = function (params) {
             break;
         }
     }
-    if (freespace_direct >= axis_main.list_size) {
-        params.reverse_justify_set(false);
-        axis_main.space_set(null);
-        flow_direct.position_set(position_direct);
-        flow_reverse.position_set(null);
-    }
-    else if (freespace_reverse >= axis_main.list_size) {
-        params.reverse_justify_set(true);
-        axis_main.space_set(null);
-        flow_direct.position_set(null);
-        flow_reverse.position_set(position_reverse);
-    }
-    else if (freespace_direct >= freespace_reverse) {
-        params.reverse_justify_set(false);
-        axis_main.space_set(freespace_direct);
+    if (freespace_direct >= axis_main.list_size || freespace_direct >= freespace_reverse) {
+        params.reverse_set(false);
+        axis_main.size_set(Math.min(freespace_direct, axis_main.list_size));
         flow_direct.position_set(position_direct);
         flow_reverse.position_set(null);
     }
     else {
-        params.reverse_justify_set(true);
-        axis_main.space_set(freespace_reverse);
+        params.reverse_set(true);
+        axis_main.size_set(Math.min(freespace_reverse, axis_main.list_size));
         flow_direct.position_set(null);
         flow_reverse.position_set(position_reverse);
     }
@@ -266,13 +475,38 @@ const normalize_align$1 = function (params) {
             break;
         }
     }
-    axis_main.space_set(null);
     switch (params.align) {
         case "center": {
-            const offset = (axis_main.list_size - axis_main.container_size) / 2;
-            params.reverse_align_set(false);
-            axis_main.flow_reverse.position_set(null);
-            axis_main.flow_direct.position_set(Math.max(0, axis_main.container_pos - offset));
+            if (axis_main.list_size >= axis_main.screen_size) {
+                params.reverse_set(false);
+                axis_main.size_set(axis_main.screen_size);
+                axis_main.flow_direct.position_set(0);
+                axis_main.flow_reverse.position_set(null);
+            }
+            else {
+                const point = axis_main.container_pos + axis_main.container_size / 2;
+                const spacereq = axis_main.list_size / 2;
+                const freespace_reverse = point;
+                const freespace_direct = axis_main.screen_size - point;
+                if (spacereq >= freespace_reverse) {
+                    params.reverse_set(false);
+                    axis_main.flow_direct.position_set(0);
+                    axis_main.flow_reverse.position_set(null);
+                    axis_main.size_set(axis_main.list_size);
+                }
+                else if (spacereq >= freespace_direct) {
+                    params.reverse_set(true);
+                    axis_main.flow_reverse.position_set(0);
+                    axis_main.flow_direct.position_set(null);
+                    axis_main.size_set(axis_main.list_size);
+                }
+                else {
+                    params.reverse_set(false);
+                    axis_main.flow_direct.position_set(point - spacereq);
+                    axis_main.flow_reverse.position_set(null);
+                    axis_main.size_set(axis_main.list_size);
+                }
+            }
             break;
         }
         case "start": {
@@ -286,12 +520,13 @@ const normalize_align$1 = function (params) {
                 - (axis_main.container_pos + axis_main.container_size)
                 - Math.max(0, axis_main.list_size - freespace_reverse)));
             if (freespace_direct >= axis_main.list_size || freespace_direct >= freespace_reverse) {
-                params.reverse_align_set(false);
-                flow_reverse.position_set(null);
+                params.reverse_set(false);
+                axis_main.size_set(Math.min(freespace_direct, axis_main.list_size));
                 flow_direct.position_set(position_direct);
             }
             else {
-                params.reverse_align_set(true);
+                params.reverse_set(true);
+                axis_main.size_set(Math.min(freespace_reverse, axis_main.list_size));
                 flow_direct.position_set(null);
                 flow_reverse.position_set(position_reverse);
             }
@@ -308,12 +543,14 @@ const normalize_align$1 = function (params) {
             const position_reverse = Math.max(0, (+axis_main.container_pos
                 - Math.max(0, axis_main.list_size - freespace_reverse)));
             if (freespace_direct >= axis_main.list_size || freespace_direct >= freespace_reverse) {
-                params.reverse_align_set(false);
+                params.reverse_set(false);
+                axis_main.size_set(Math.min(freespace_direct, axis_main.list_size));
                 flow_reverse.position_set(null);
                 flow_direct.position_set(position_direct);
             }
             else {
-                params.reverse_align_set(true);
+                params.reverse_set(true);
+                axis_main.size_set(Math.min(freespace_reverse, axis_main.list_size));
                 flow_direct.position_set(null);
                 flow_reverse.position_set(position_reverse);
             }
@@ -321,142 +558,417 @@ const normalize_align$1 = function (params) {
         }
     }
 };
-const CmpListFix = r.memo(r.forwardRef((props, ref) => {
-    const nprop_gap = props.gap ?? 0;
-    const nprop_lazy = props.lazy ?? false;
-    const nprop_align = nprop_align_new(props.align);
-    const nprop_portal = nprop_portal_new(props.portal);
-    const nprop_justify = nprop_justify_new(props.justify);
-    const nprop_direction = nprop_direction_new(props.direction);
-    const nprop_style = r.useMemo(() => (props.stylemodule ? stylemap_new_remap(stylemap$1, props.stylemodule) : stylemap$1), [props.stylemodule]);
-    const ctxstate = r.useContext(CmpCtxState_Open);
-    if (!ctxstate) {
-        throw new Error(`Using DDN dependend component outside of DDN Context`);
-    }
-    const l_ref = r.useRef(null);
-    const [visible, visible_set] = r.useState(false);
-    const [revalign, revalign_set] = r.useState(false);
-    const [revjustify, revjustify_set] = r.useState(false);
-    const [maxheight, maxheight_set] = r.useState(null);
-    const [maxwidth, maxwidth_set] = r.useState(null);
+const useListPosApiFixed = function (params) {
+    const ctxstate_refs = useCtxStateRefs();
+    const [align_reverse, align_reverse_set] = r.useState(false);
+    const [justify_reverse, justify_reverse_set] = r.useState(false);
+    let [width, width_set] = r.useState(null);
+    let [height, height_set] = r.useState(null);
     const [top, top_set] = r.useState(null);
     const [left, left_set] = r.useState(null);
     const [right, right_set] = r.useState(null);
     const [bottom, bottom_set] = r.useState(null);
+    return {
+        reverse: r.useMemo(() => ({
+            align: align_reverse,
+            justify: justify_reverse,
+        }), [align_reverse, justify_reverse]),
+        size: r.useMemo(() => ({
+            width: width,
+            height: height,
+        }), [width, height]),
+        position: r.useMemo(() => ({
+            top,
+            left,
+            right,
+            bottom,
+        }), [top, left, right, bottom]),
+        api: r.useMemo(() => ({
+            clear: () => {
+                align_reverse_set(false);
+                justify_reverse_set(false);
+                top_set(null);
+                left_set(null);
+                right_set(null);
+                bottom_set(null);
+            },
+            rearrange: config => {
+                const list = params.ref_list();
+                const content = params.ref_content();
+                const container = [...ctxstate_refs.rootref].map(ref => ref()).find(el => el !== null);
+                if (list && container && content) {
+                    if (params.clmap_content._tracking) {
+                        content.classList.add(params.clmap_content._tracking);
+                    }
+                    const container_rect = container.getBoundingClientRect();
+                    const axis_main = {
+                        list_size: content.offsetHeight,
+                        screen_size: document.documentElement.clientHeight,
+                        container_pos: container_rect.y,
+                        container_size: container_rect.height,
+                        size_set: height_set,
+                        flow_direct: {
+                            position_set: top_set
+                        },
+                        flow_reverse: {
+                            position_set: bottom_set
+                        },
+                    };
+                    const axis_cross = {
+                        list_size: content.offsetWidth,
+                        screen_size: document.documentElement.clientWidth,
+                        container_pos: container_rect.x,
+                        container_size: container_rect.width,
+                        size_set: width_set,
+                        flow_direct: {
+                            position_set: left_set
+                        },
+                        flow_reverse: {
+                            position_set: right_set
+                        },
+                    };
+                    normalize_justify$1({
+                        axis_main,
+                        axis_cross,
+                        gap: config.gap,
+                        justify: config.justify,
+                        direction: config.direction,
+                        reverse_set: justify_reverse_set,
+                    });
+                    normalize_align$1({
+                        axis_main,
+                        axis_cross,
+                        align: config.align,
+                        direction: config.direction,
+                        reverse_set: align_reverse_set,
+                    });
+                    if (params.clmap_content._tracking) {
+                        content.classList.remove(params.clmap_content._tracking);
+                    }
+                }
+            },
+        }), [ctxstate_refs.rootref, params.ref_list, params.ref_content])
+    };
+};
+
+const useListPosRearrange = function (params) {
+    const nprop_rearrange_open = params.rearrange_config?.open ?? true;
+    const nprop_rearrange_scroll = params.rearrange_config?.scroll ?? true;
+    const nprop_rearrange_resize = params.rearrange_config?.resize ?? true;
+    const nprop_rearrange_polling = params.rearrange_config?.polling ?? false;
+    const ctxstate_refs = useCtxStateRefs();
+    const rearrange = r.useCallback(() => {
+        params.api.rearrange(params.api_config);
+    }, [
+        params.api,
+        params.api_config.gap,
+        params.api_config.align,
+        params.api_config.justify,
+        params.api_config.direction,
+    ]);
     r.useLayoutEffect(() => {
-        const list = l_ref.current;
-        const container = ctxstate.ref.current;
-        if (list && container && ctxstate.open) {
-            const container_rect = container.getBoundingClientRect();
-            const axis_main = {
-                list_size: list.offsetHeight,
-                space_set: maxheight_set,
-                screen_size: document.documentElement.clientHeight,
-                container_pos: container_rect.y,
-                container_size: container_rect.height,
-                flow_direct: {
-                    position_set: top_set
-                },
-                flow_reverse: {
-                    position_set: bottom_set
-                },
+        if (params.rearrange_config?.deps && params.open) {
+            rearrange();
+        }
+    }, [...params.rearrange_config?.deps ?? []]);
+    r.useLayoutEffect(() => {
+        if (nprop_rearrange_open && params.open) {
+            rearrange();
+        }
+    }, [rearrange, params.open]);
+    r.useLayoutEffect(() => {
+        if (nprop_rearrange_resize && params.active) {
+            document.addEventListener("resize", rearrange);
+            return () => {
+                document.addEventListener("resize", rearrange);
             };
-            const axis_cross = {
-                list_size: list.offsetWidth,
-                space_set: maxwidth_set,
-                screen_size: document.documentElement.clientWidth,
-                container_pos: container_rect.x,
-                container_size: container_rect.width,
-                flow_direct: {
-                    position_set: left_set
-                },
-                flow_reverse: {
-                    position_set: right_set
-                },
+        }
+    }, [rearrange, params.active, nprop_rearrange_resize]);
+    r.useLayoutEffect(() => {
+        if (nprop_rearrange_scroll && params.active) {
+            ctxstate_refs.shardevt_scroll.add(rearrange);
+            return () => {
+                ctxstate_refs.shardevt_scroll.delete(rearrange);
             };
-            normalize_justify$1({
-                axis_main,
-                axis_cross,
-                gap: nprop_gap,
-                justify: nprop_justify,
-                direction: nprop_direction,
-                reverse_align_set: revalign_set,
-                reverse_justify_set: revjustify_set,
-            });
-            normalize_align$1({
-                axis_main,
-                axis_cross,
-                align: nprop_align,
-                direction: nprop_direction,
-                reverse_align_set: revalign_set,
-                reverse_justify_set: revjustify_set,
-            });
         }
-    }, [ctxstate.open, ctxstate.ref, nprop_gap, nprop_align, nprop_justify, nprop_direction]);
-    const mref = r.useMemo(() => {
-        return (element) => {
-            l_ref.current = element;
-            if (ref) {
-                if (typeof ref === "object") {
-                    ref.current = element;
-                }
-                else {
-                    ref(element);
-                }
+    }, [rearrange, params.active, nprop_rearrange_scroll]);
+    r.useLayoutEffect(() => {
+        if (nprop_rearrange_polling && params.active) {
+            let frame_id;
+            const frame_cb = () => {
+                rearrange();
+                frame_id = requestAnimationFrame(frame_cb);
+            };
+            requestAnimationFrame(frame_cb);
+            return () => {
+                cancelAnimationFrame(frame_id);
+            };
+        }
+    }, [rearrange, params.active, nprop_rearrange_polling, ctxstate_refs]);
+};
+
+const useOpen = function (params) {
+    const { ctxstate_open, ctxstate_refs } = params;
+    return r.useMemo(() => {
+        return ctxstate_open.open_inherited || ctxstate_refs.cascade > 1;
+    }, [ctxstate_open.open_inherited, ctxstate_refs.cascade]);
+};
+
+const useOpenInfer = function (params) {
+    const ctxstate_refs = useCtxStateRefs();
+    const ctxstate_open = useCtxStateOpen();
+    return useOpen({
+        ...params,
+        ctxstate_open,
+        ctxstate_refs,
+    });
+};
+
+const useRefO = function (ref) {
+    return r.useCallback(() => ref.current, [ref]);
+};
+
+const cl = function (...names) {
+    let result = [];
+    for (const name of names) {
+        if (name) {
+            result.push(name);
+        }
+    }
+    if (result.length === 0) {
+        return undefined;
+    }
+    return result.join(" ");
+};
+
+const cssprops_new_position = function (params) {
+    const result = {};
+    if (params.top !== null) {
+        result.top = `${params.top}px`;
+    }
+    if (params.left !== null) {
+        result.left = `${params.left}px`;
+    }
+    if (params.right !== null) {
+        result.right = `${params.right}px`;
+    }
+    if (params.bottom !== null) {
+        result.bottom = `${params.bottom}px`;
+    }
+    return result;
+};
+
+const cssprops_new_size = function (params) {
+    const result = {};
+    switch (params.direction) {
+        case "hor": {
+            if (params.open) {
+                result.width = params.size.width ?? 1;
             }
-        };
-    }, [ref]);
+            else {
+                result.width = 1;
+            }
+            if (params.size.height) {
+                result.height = params.size.height;
+            }
+            break;
+        }
+        case "ver": {
+            if (params.open) {
+                result.height = params.size.height ?? 1;
+            }
+            else {
+                result.height = 1;
+            }
+            if (params.size.width) {
+                result.width = params.size.width;
+            }
+            break;
+        }
+    }
+    return result;
+};
+
+const prop_align_new = function (raw) {
+    if (!raw) {
+        return "start";
+    }
+    if (raw === true) {
+        return "end";
+    }
+    return raw;
+};
+
+const prop_align_new_reversed = function (src_align) {
+    switch (src_align) {
+        case "start":
+            return "end";
+        case "end":
+            return "start";
+    }
+    return src_align;
+};
+
+const prop_clmap_def_content = {
+    __qyuddn: "__qyuddn",
+    content: "content",
+    _tracking: "_tracking",
+    focusguard: "focusguard",
+};
+
+const prop_clmap_def_listfix = {
+    __qyuddn: "__qyuddn",
+    listfix: "listfix",
+    _transition_nopos: "_transition_nopos",
+    _transition_nosize: "_transition_nosize",
+    _open: "_open",
+    _justify_start: "_justify_start",
+    _justify_end: "_justify_end",
+    _align_start: "_align_start",
+    _align_end: "_align_end",
+    _align_center: "_align_center",
+    _vertical: "_vertical",
+    _horizontal: "_horizontal",
+};
+
+const prop_clmap_new = function (stylemap, def) {
+    if (!stylemap) {
+        return def;
+    }
+    const result = {};
+    for (const clname of Object.keys(def)) {
+        const remaped = stylemap[clname];
+        if (remaped !== undefined) {
+            result[clname] = remaped;
+            continue;
+        }
+        {
+            result[clname] = clname;
+        }
+    }
+    return result;
+};
+
+const prop_direction_new = function (raw) {
+    if (!raw) {
+        return "ver";
+    }
+    if (raw === true) {
+        return "hor";
+    }
+    return raw;
+};
+
+const prop_justify_new = function (raw) {
+    if (!raw) {
+        return "end";
+    }
+    if (raw === true) {
+        return "start";
+    }
+    return raw;
+};
+
+const prop_justify_new_reversed = function (src_justify) {
+    switch (src_justify) {
+        case "start":
+            return "end";
+        case "end":
+            return "start";
+    }
+    return src_justify;
+};
+
+const render_view_default$4 = function (props) {
+    return jsx("div", { ...props });
+};
+const CmpListFix = r.memo(r.forwardRef((props, f_ref) => {
+    const nprop_gap = props.gap ?? 0;
+    const nprop_lazy = props.lazy ?? false;
+    const nprop_align = prop_align_new(props.align);
+    const nprop_justify = prop_justify_new(props.justify);
+    const nprop_direction = prop_direction_new(props.direction);
+    const nprop_transition_nopos = props.transition_nopos ?? false;
+    const nprop_transition_nosize = props.transition_nosize ?? false;
+    const nprop_render_view = props.render_view ?? render_view_default$4;
+    const nprop_clmap = r.useMemo(() => prop_clmap_new(props.clmap, prop_clmap_def_listfix), [props.clmap]);
+    const nprop_clmap_content = r.useMemo(() => prop_clmap_new(props.clmap_content, prop_clmap_def_content), [props.clmap_content]);
+    const l_ref = r.useRef(null);
+    const l_ref_content = r.useRef(null);
+    const ref_list = useRefO(l_ref);
+    const ref_content = useRefO(l_ref_content);
+    const open = useOpenInfer({});
+    const [visible, visible_set] = r.useState(false);
+    const listapi = useListPosApiFixed({ ref_list, ref_content, clmap_content: nprop_clmap_content });
+    const ctxstate_content = useCtxStateInitContent({
+        ref_content: l_ref_content,
+    });
+    useDDNListInfer({
+        visible,
+    });
+    useDDNShardInfer({
+        isolated: false,
+        ref: useRefO(l_ref),
+    });
+    useListPosRearrange({
+        open,
+        api: listapi.api,
+        active: visible || open,
+        rearrange_config: props.rearrange,
+        api_config: {
+            gap: nprop_gap,
+            align: nprop_align,
+            justify: nprop_justify,
+            direction: nprop_direction,
+        },
+    });
+    useFocusCaptureInfer({
+        open,
+        ref_target: useRefO(ctxstate_content.ref_content),
+    });
+    const ref = useRefMerge(l_ref, f_ref);
     const children = r.useMemo(() => {
-        if (!nprop_lazy || visible || ctxstate.open) {
+        if (!nprop_lazy || visible || open) {
             if (typeof props.children === "function") {
                 return props.children();
             }
             return props.children;
         }
         return null;
-    }, [nprop_lazy, visible, ctxstate.open, props.children]);
-    const element = jsx("div", { ref: mref, tabIndex: props.tabIndex, className: cl("__qyuddn", props.className, nprop_style.listfix, ctxstate.open && nprop_style.listfix_open, ((nprop_align === "end" && !revalign) || (nprop_align === "start" && revalign)) && nprop_style.listfix_align_end, ((nprop_align === "start" && !revalign) || (nprop_align === "end" && revalign)) && nprop_style.listfix_align_start, nprop_align === "center" && nprop_style.listfix_align_center, ((nprop_justify === "end") !== revjustify) && nprop_style.listfix_justify_end, ((nprop_justify === "start") !== revjustify) && nprop_style.listfix_justify_start, nprop_direction === "hor" && nprop_style.listfix_horizontal, nprop_direction === "ver" && nprop_style.listfix_vertical), style: {
-            ["--gap"]: `${nprop_gap}px`,
-            top: top !== null ? `${top}px` : null,
-            left: left !== null ? `${left}px` : null,
-            right: right !== null ? `${right}px` : null,
-            bottom: bottom !== null ? `${bottom}px` : null,
-            maxWidth: maxwidth === null ? undefined : `${maxwidth}px`,
-            maxHeight: maxheight === null ? undefined : `${maxheight}px`,
-        }, onTransitionStart: ev => {
-            if (ev.nativeEvent.propertyName === "opacity" && ctxstate.open) {
-                visible_set(true);
-            }
-        }, onTransitionEnd: ev => {
-            if (ev.nativeEvent.propertyName === "opacity" && !ctxstate.open) {
-                revalign_set(false);
-                revjustify_set(false);
-                maxwidth_set(null);
-                maxheight_set(null);
-                visible_set(false);
-                top_set(null);
-                bottom_set(null);
-                left_set(null);
-                right_set(null);
-            }
-        }, children: children });
-    if (nprop_portal) {
-        return rdom.createPortal(element, nprop_portal);
-    }
-    return element;
+    }, [nprop_lazy, visible, open, props.children]);
+    const view_align = listapi.reverse.align ? prop_align_new_reversed(nprop_align) : nprop_align;
+    const view_justify = listapi.reverse.justify ? prop_justify_new_reversed(nprop_justify) : nprop_justify;
+    return jsx(CmpCtxState_Content.Provider, { value: ctxstate_content, children: nprop_render_view({
+            ref,
+            children,
+            className: cl(nprop_clmap.__qyuddn, nprop_clmap.listfix, open && nprop_clmap._open, nprop_transition_nopos && nprop_clmap._transition_nopos, nprop_transition_nosize && nprop_clmap._transition_nosize, view_align === "end" && nprop_clmap._align_end, view_align === "start" && nprop_clmap._align_start, view_align === "center" && nprop_clmap._align_center, view_justify === "end" && nprop_clmap._justify_end, view_justify === "start" && nprop_clmap._justify_start, nprop_direction === "hor" && nprop_clmap._horizontal, nprop_direction === "ver" && nprop_clmap._vertical, props.className),
+            style: {
+                ["--gap"]: `${nprop_gap}px`,
+                ...cssprops_new_position(listapi.position),
+                ...cssprops_new_size({
+                    size: listapi.size,
+                    open: open,
+                    direction: nprop_direction,
+                }),
+            },
+            onTransitionStart: ev => {
+                props.event_transition_change?.(ev.nativeEvent.propertyName, true);
+                if (ev.nativeEvent.propertyName === "opacity" && open) {
+                    visible_set(true);
+                    props.event_visible_change?.(true);
+                }
+            },
+            onTransitionEnd: ev => {
+                props.event_transition_change?.(ev.nativeEvent.propertyName, false);
+                if (ev.nativeEvent.propertyName === "opacity" && !open) {
+                    listapi.api.clear();
+                    visible_set(false);
+                    props.event_visible_change?.(false);
+                }
+            },
+        }) });
 }));
 
-const stylemap = {
-    listabs: "listabs",
-    listabs_open: "listabs_open",
-    listabs_justify_start: "listabs_justify_start",
-    listabs_justify_end: "listabs_justify_end",
-    listabs_align_start: "listabs_align_start",
-    listabs_align_end: "listabs_align_end",
-    listabs_align_center: "listabs_align_center",
-    listabs_vertical: "listabs_vertical",
-    listabs_horizontal: "listabs_horizontal",
-};
 const normalize_justify = function (params) {
     let axis_main;
     switch (params.direction) {
@@ -483,21 +995,13 @@ const normalize_justify = function (params) {
             break;
         }
     }
-    if (freespace_direct >= axis_main.list_size) {
-        params.reverse_justify_set(false);
-        axis_main.space_set(null);
-    }
-    else if (freespace_reverse >= axis_main.list_size) {
-        params.reverse_justify_set(true);
-        axis_main.space_set(null);
-    }
-    else if (freespace_direct >= freespace_reverse) {
-        params.reverse_justify_set(false);
-        axis_main.space_set(freespace_direct);
+    if (freespace_direct >= axis_main.list_size || freespace_direct >= freespace_reverse) {
+        params.reverse_set(false);
+        axis_main.size_set(Math.min(freespace_direct, axis_main.list_size));
     }
     else {
-        params.reverse_justify_set(true);
-        axis_main.space_set(freespace_reverse);
+        params.reverse_set(true);
+        axis_main.size_set(Math.min(freespace_reverse, axis_main.list_size));
     }
 };
 const normalize_align = function (params) {
@@ -516,8 +1020,10 @@ const normalize_align = function (params) {
     let freespace_reverse;
     switch (params.align) {
         case "center": {
-            params.reverse_align_set(false);
-            axis_main.space_set(null);
+            const point = axis_main.container_pos + (axis_main.container_size / 2);
+            const freespace = Math.max(Math.min(point, axis_main.screen_size - point), 0) * 2;
+            params.reverse_set(false);
+            axis_main.size_set(Math.min(freespace, axis_main.list_size));
             return;
         }
         case "start": {
@@ -531,117 +1037,480 @@ const normalize_align = function (params) {
             break;
         }
     }
-    if (freespace_direct >= axis_main.list_size) {
-        params.reverse_align_set(false);
-        axis_main.space_set(null);
-    }
-    else if (freespace_reverse >= axis_main.list_size) {
-        params.reverse_align_set(true);
-        axis_main.space_set(null);
-    }
-    else if (freespace_direct >= freespace_reverse) {
-        params.reverse_align_set(false);
-        axis_main.space_set(freespace_direct);
+    if (freespace_direct >= axis_main.list_size || freespace_direct >= freespace_reverse) {
+        params.reverse_set(false);
+        axis_main.size_set(Math.min(freespace_direct, axis_main.list_size));
     }
     else {
-        params.reverse_align_set(true);
-        axis_main.space_set(freespace_reverse);
+        params.reverse_set(true);
+        axis_main.size_set(Math.min(freespace_reverse, axis_main.list_size));
     }
 };
-const CmpListAbs = r.memo(r.forwardRef((props, ref) => {
+const useListPosApiAbsolute = function (params) {
+    const ctxstate_refs = useCtxStateRefs();
+    const [align_reverse, align_reverse_set] = r.useState(false);
+    const [justify_reverse, justify_reverse_set] = r.useState(false);
+    const [width, width_set] = r.useState(null);
+    const [height, height_set] = r.useState(null);
+    return {
+        size: r.useMemo(() => ({
+            width: width,
+            height: height,
+        }), [width, height]),
+        reverse: r.useMemo(() => ({
+            align: align_reverse,
+            justify: justify_reverse,
+        }), [align_reverse, justify_reverse]),
+        api: r.useMemo(() => ({
+            clear: () => {
+                align_reverse_set(false);
+                justify_reverse_set(false);
+                width_set(null);
+                height_set(null);
+            },
+            rearrange: config => {
+                const list = params.ref_list();
+                const content = params.ref_content();
+                const container = [...ctxstate_refs.rootref].map(ref => ref()).find(el => el !== null);
+                if (list && container && content) {
+                    if (params.clmap_content._tracking) {
+                        content.classList.add(params.clmap_content._tracking);
+                    }
+                    const container_rect = container.getBoundingClientRect();
+                    const axis_main = {
+                        size_set: height_set,
+                        list_size: content.offsetHeight,
+                        screen_size: document.documentElement.clientHeight,
+                        container_pos: container_rect.y,
+                        container_size: container_rect.height,
+                    };
+                    const axis_cross = {
+                        size_set: width_set,
+                        list_size: content.offsetWidth,
+                        screen_size: document.documentElement.clientWidth,
+                        container_pos: container_rect.x,
+                        container_size: container_rect.width,
+                    };
+                    normalize_justify({
+                        axis_main,
+                        axis_cross,
+                        gap: config.gap,
+                        justify: config.justify,
+                        direction: config.direction,
+                        reverse_set: justify_reverse_set,
+                    });
+                    normalize_align({
+                        axis_main,
+                        axis_cross,
+                        align: config.align,
+                        direction: config.direction,
+                        reverse_set: align_reverse_set,
+                    });
+                    if (params.clmap_content._tracking) {
+                        content.classList.remove(params.clmap_content._tracking);
+                    }
+                }
+            },
+        }), [ctxstate_refs.rootref, params.ref_list, params.ref_content, params.clmap_content])
+    };
+};
+
+const prop_clmap_def_listabs = {
+    __qyuddn: "__qyuddn",
+    listabs: "listabs",
+    _transition_nosize: "_transition_nosize",
+    _open: "_open",
+    _justify_start: "_justify_start",
+    _justify_end: "_justify_end",
+    _align_start: "_align_start",
+    _align_end: "_align_end",
+    _align_center: "_align_center",
+    _vertical: "_vertical",
+    _horizontal: "_horizontal",
+};
+
+const render_view_default$3 = function (props) {
+    return jsx("div", { ...props });
+};
+const CmpListAbs = r.memo(r.forwardRef((props, f_ref) => {
     const nprop_gap = props.gap ?? 0;
-    const nprop_lazy = props.lazy ?? false;
-    const nprop_align = nprop_align_new(props.align);
-    const nprop_justify = nprop_justify_new(props.justify);
-    const nprop_direction = nprop_direction_new(props.direction);
-    const nprop_style = r.useMemo(() => (props.stylemodule ? stylemap_new_remap(stylemap, props.stylemodule) : stylemap), [props.stylemodule]);
-    const ctxstate = r.useContext(CmpCtxState_Open);
-    if (!ctxstate) {
-        throw new Error(`Using DDN dependend component outside of DDN Context`);
-    }
+    const nprop_lazy = props.lazy ?? true;
+    const nprop_align = prop_align_new(props.align);
+    const nprop_justify = prop_justify_new(props.justify);
+    const nprop_direction = prop_direction_new(props.direction);
+    const nprop_render_view = props.render_view ?? render_view_default$3;
+    const nprop_clmap = r.useMemo(() => prop_clmap_new(props.clmap, prop_clmap_def_listabs), [props.clmap]);
+    const nprop_clmap_content = r.useMemo(() => prop_clmap_new(props.clmap_content, prop_clmap_def_content), [props.clmap_content]);
+    const nprop_transition_nosize = props.transition_nosize ?? false;
     const l_ref = r.useRef(null);
+    const l_ref_content = r.useRef(null);
+    const ref_list = useRefO(l_ref);
+    const ref_content = useRefO(l_ref_content);
+    const open = useOpenInfer({});
     const [visible, visible_set] = r.useState(false);
-    const [revalign, revalign_set] = r.useState(false);
-    const [revjustify, revjustify_set] = r.useState(false);
-    const [maxheight, maxheight_set] = r.useState(null);
-    const [maxwidth, maxwidth_set] = r.useState(null);
-    r.useLayoutEffect(() => {
-        const list = l_ref.current;
-        const container = ctxstate.ref.current;
-        if (list && container && ctxstate.open) {
-            const container_rect = container.getBoundingClientRect();
-            const axis_main = {
-                list_size: list.offsetHeight,
-                space_set: maxheight_set,
-                screen_size: document.documentElement.clientHeight,
-                container_pos: container_rect.y,
-                container_size: container_rect.height,
-            };
-            const axis_cross = {
-                list_size: list.offsetWidth,
-                space_set: maxwidth_set,
-                screen_size: document.documentElement.clientWidth,
-                container_pos: container_rect.x,
-                container_size: container_rect.width,
-            };
-            normalize_justify({
-                axis_main,
-                axis_cross,
-                gap: nprop_gap,
-                justify: nprop_justify,
-                direction: nprop_direction,
-                reverse_align_set: revalign_set,
-                reverse_justify_set: revjustify_set,
-            });
-            normalize_align({
-                axis_main,
-                axis_cross,
-                align: nprop_align,
-                direction: nprop_direction,
-                reverse_align_set: revalign_set,
-                reverse_justify_set: revjustify_set,
-            });
+    const listapi = useListPosApiAbsolute({ ref_list, ref_content, clmap_content: nprop_clmap_content });
+    const ctxstate_content = useCtxStateInitContent({
+        ref_content: l_ref_content,
+    });
+    useDDNListInfer({
+        visible,
+    });
+    useDDNShardInfer({
+        isolated: false,
+        ref: useRefO(l_ref),
+    });
+    useListPosRearrange({
+        open,
+        api: listapi.api,
+        active: visible || open,
+        rearrange_config: props.rearrange,
+        api_config: {
+            gap: nprop_gap,
+            align: nprop_align,
+            justify: nprop_justify,
+            direction: nprop_direction,
+        },
+    });
+    useFocusCaptureInfer({
+        open,
+        ref_target: useRefO(ctxstate_content.ref_content),
+    });
+    const ref = useRefMerge(l_ref, f_ref);
+    const children = r.useMemo(() => {
+        if (!nprop_lazy || visible || open) {
+            if (typeof props.children === "function") {
+                return props.children();
+            }
+            return props.children;
         }
-    }, [ctxstate.open, ctxstate.ref, nprop_gap, nprop_align, nprop_justify, nprop_direction]);
-    const mref = r.useMemo(() => {
-        return (element) => {
-            l_ref.current = element;
-            if (ref) {
-                if (typeof ref === "object") {
-                    ref.current = element;
+        return null;
+    }, [nprop_lazy, visible, open, props.children]);
+    const view_align = listapi.reverse.align ? prop_align_new_reversed(nprop_align) : nprop_align;
+    const view_justify = listapi.reverse.justify ? prop_justify_new_reversed(nprop_justify) : nprop_justify;
+    return jsx(CmpCtxState_Content, { value: ctxstate_content, children: nprop_render_view({
+            ref,
+            children,
+            className: cl(nprop_clmap.__qyuddn, nprop_clmap.listabs, open && nprop_clmap._open, nprop_transition_nosize && nprop_clmap._transition_nosize, view_align === "end" && nprop_clmap._align_end, view_align === "start" && nprop_clmap._align_start, view_align === "center" && nprop_clmap._align_center, view_justify === "end" && nprop_clmap._justify_end, view_justify === "start" && nprop_clmap._justify_start, nprop_direction === "hor" && nprop_clmap._horizontal, nprop_direction === "ver" && nprop_clmap._vertical, props.className),
+            style: {
+                ["--gap"]: `${nprop_gap}px`,
+                ...cssprops_new_size({
+                    size: listapi.size,
+                    open: open,
+                    direction: nprop_direction,
+                }),
+            },
+            onTransitionStart: ev => {
+                props.event_transition_change?.(ev.nativeEvent.propertyName, true);
+                if (ev.nativeEvent.propertyName === "opacity" && open) {
+                    visible_set(true);
+                    props.event_visible_change?.(true);
                 }
-                else {
-                    ref(element);
+            },
+            onTransitionEnd: ev => {
+                props.event_transition_change?.(ev.nativeEvent.propertyName, false);
+                if (ev.nativeEvent.propertyName === "opacity" && !open) {
+                    listapi.api.clear();
+                    visible_set(false);
+                    props.event_visible_change?.(false);
                 }
-            }
-        };
-    }, [ref]);
+            },
+        }) });
+}));
+
+const prop_portal_new = function (portal) {
+    if (typeof portal === "string") {
+        return document.getElementById(portal) ?? null;
+    }
+    if (portal) {
+        return portal;
+    }
+    return null;
+};
+
+const render_view_default$2 = function (props) {
+    return jsx("div", { ...props });
+};
+const CmpListPortal = r.memo(r.forwardRef((props, f_ref) => {
+    const nprop_gap = props.gap ?? 0;
+    const nprop_lazy = props.lazy ?? true;
+    const nprop_align = prop_align_new(props.align);
+    const nprop_portal = prop_portal_new(props.portal);
+    const nprop_justify = prop_justify_new(props.justify);
+    const nprop_direction = prop_direction_new(props.direction);
+    const nprop_transition_nopos = props.transition_nopos ?? false;
+    const nprop_transition_nosize = props.transition_nosize ?? false;
+    const nprop_render_view = props.render_view ?? render_view_default$2;
+    const nprop_clmap = r.useMemo(() => prop_clmap_new(props.clmap, prop_clmap_def_listfix), [props.clmap]);
+    const nprop_clmap_content = r.useMemo(() => prop_clmap_new(props.clmap_content, prop_clmap_def_content), [props.clmap_content]);
+    const l_ref = r.useRef(null);
+    const l_ref_content = r.useRef(null);
+    const ref_list = useRefO(l_ref);
+    const ref_content = useRefO(l_ref_content);
+    const open = useOpenInfer({});
+    const [visible, visible_set] = r.useState(false);
+    const listapi = useListPosApiFixed({ ref_list, ref_content, clmap_content: nprop_clmap_content });
+    const ctxstate_content = useCtxStateInitContent({
+        ref_content: l_ref_content,
+    });
+    useDDNListInfer({
+        visible: visible || open,
+    });
+    useDDNShardInfer({
+        isolated: true,
+        ref: useRefO(l_ref),
+    });
+    useListPosRearrange({
+        open,
+        api: listapi.api,
+        active: visible || open,
+        rearrange_config: props.rearrange,
+        api_config: {
+            gap: nprop_gap,
+            align: nprop_align,
+            justify: nprop_justify,
+            direction: nprop_direction,
+        },
+    });
+    useFocusCaptureInfer({
+        open,
+        ref_target: useRefO(ctxstate_content.ref_content),
+    });
+    const ref = useRefMerge(l_ref, f_ref);
     const children = r.useMemo(() => {
-        if (!nprop_lazy || visible || ctxstate.open) {
+        if (!nprop_lazy || visible || open) {
             if (typeof props.children === "function") {
                 return props.children();
             }
             return props.children;
         }
         return null;
-    }, [nprop_lazy, visible, ctxstate.open, props.children]);
-    return jsx("div", { ref: mref, tabIndex: props.tabIndex, className: cl("__qyuddn", props.className, nprop_style.listabs, ctxstate.open && nprop_style.listabs_open, ((nprop_align === "end" && !revalign) || (nprop_align === "start" && revalign)) && nprop_style.listabs_align_end, ((nprop_align === "start" && !revalign) || (nprop_align === "end" && revalign)) && nprop_style.listabs_align_start, nprop_align === "center" && nprop_style.listabs_align_center, ((nprop_justify === "end") !== revjustify) && nprop_style.listabs_justify_end, ((nprop_justify === "start") !== revjustify) && nprop_style.listabs_justify_start, nprop_direction === "hor" && nprop_style.listabs_horizontal, nprop_direction === "ver" && nprop_style.listabs_vertical), style: {
-            ["--gap"]: `${nprop_gap}px`,
-            maxWidth: maxwidth === null ? undefined : `${maxwidth}px`,
-            maxHeight: maxheight === null ? undefined : `${maxheight}px`,
-        }, onTransitionStart: ev => {
-            if (ev.nativeEvent.propertyName === "opacity" && ctxstate.open) {
-                visible_set(true);
+    }, [nprop_lazy, visible, open, props.children]);
+    const view_align = listapi.reverse.align ? prop_align_new_reversed(nprop_align) : nprop_align;
+    const view_justify = listapi.reverse.justify ? prop_justify_new_reversed(nprop_justify) : nprop_justify;
+    if (nprop_portal) {
+        return rdom.createPortal(jsx(CmpCtxState_Content.Provider, { value: ctxstate_content, children: nprop_render_view({
+                ref,
+                children,
+                className: cl(nprop_clmap.__qyuddn, nprop_clmap.listfix, open && nprop_clmap._open, nprop_transition_nopos && nprop_clmap._transition_nopos, nprop_transition_nosize && nprop_clmap._transition_nosize, view_align === "end" && nprop_clmap._align_end, view_align === "start" && nprop_clmap._align_start, view_align === "center" && nprop_clmap._align_center, view_justify === "end" && nprop_clmap._justify_end, view_justify === "start" && nprop_clmap._justify_start, nprop_direction === "hor" && nprop_clmap._horizontal, nprop_direction === "ver" && nprop_clmap._vertical, props.className),
+                style: {
+                    ["--gap"]: `${nprop_gap}px`,
+                    ...cssprops_new_position(listapi.position),
+                    ...cssprops_new_size({
+                        size: listapi.size,
+                        open: open,
+                        direction: nprop_direction,
+                    }),
+                },
+                onTransitionStart: ev => {
+                    props.event_transition_change?.(ev.nativeEvent.propertyName, true);
+                    if (ev.nativeEvent.propertyName === "opacity" && open) {
+                        visible_set(true);
+                        props.event_visible_change?.(true);
+                    }
+                },
+                onTransitionEnd: ev => {
+                    props.event_transition_change?.(ev.nativeEvent.propertyName, false);
+                    if (ev.nativeEvent.propertyName === "opacity" && !open) {
+                        listapi.api.clear();
+                        visible_set(false);
+                        props.event_visible_change?.(false);
+                    }
+                },
+            }) }), nprop_portal);
+    }
+    return null;
+}));
+
+const render_view_default$1 = function (props) {
+    return jsx("div", { ...props });
+};
+const CmpContent = r.memo(r.forwardRef((props, f_ref) => {
+    const nprop_container = props.render_view ?? render_view_default$1;
+    const nprop_clmap = r.useMemo(() => prop_clmap_new(props.clmap, prop_clmap_def_content), [props.clmap]);
+    const ctxstate_content = useCtxStateContent();
+    const ref = useRefMerge(f_ref, ctxstate_content.ref_content);
+    return jsxs(Fragment, { children: [props.focus_noguards
+                ? null
+                : jsx("input", { "data-focusguard": true, tabIndex: 0, className: cl(nprop_clmap.__qyuddn, nprop_clmap.focusguard) }), nprop_container({
+                ref: ref,
+                children: props.children,
+                tabIndex: 0,
+                className: cl(nprop_clmap.__qyuddn, nprop_clmap.content, props.className),
+            }), props.focus_noguards
+                ? null
+                : jsx("input", { "data-focusguard": true, tabIndex: 0, className: cl(nprop_clmap.__qyuddn, nprop_clmap.focusguard) })] });
+}));
+
+const refs_unpack = function* (src) {
+    for (const ref of src) {
+        const element = ref();
+        if (element) {
+            yield element;
+        }
+    }
+};
+const element_outside = function (element, shards) {
+    for (const ref of shards) {
+        if (ref === element || ref.contains(element)) {
+            return false;
+        }
+    }
+    return true;
+};
+const useCloseEvtRoot = function (params) {
+    const { ctxstate_open, ctxstate_refs, ctxstate_config } = params;
+    const nconfig_blur = ctxstate_config.closeevt.blur ?? true;
+    const nconfig_click = ctxstate_config.closeevt.click ?? true;
+    const nconfig_resize = ctxstate_config.closeevt.resize ?? true;
+    const nconfig_escape = ctxstate_config.closeevt.escape ?? true;
+    const open = useOpen({ ctxstate_open, ctxstate_refs, });
+    r.useEffect(() => {
+        if (params.active && open) {
+            const controller = new AbortController();
+            if (nconfig_blur) {
+                document.addEventListener("focusin", ev => {
+                    if (ev.target instanceof Element) {
+                        if (ev.target.hasAttribute("data-focusguard")) {
+                            if (element_outside(ev.target, refs_unpack(ctxstate_refs.register.it_down))) {
+                                ctxstate_open.open_set(false);
+                            }
+                        }
+                        else if (element_outside(ev.target, refs_unpack(ctxstate_refs.register.it_context))) {
+                            ctxstate_open.open_set(false);
+                        }
+                    }
+                }, { signal: controller.signal });
+            }
+            if (nconfig_click) {
+                document.addEventListener("click", ev => {
+                    const shards = refs_unpack(ctxstate_refs.register.it_context);
+                    if (ev.target instanceof Element) {
+                        if (element_outside(ev.target, shards)) {
+                            ctxstate_open.open_set(false);
+                        }
+                    }
+                }, { signal: controller.signal });
+            }
+            if (nconfig_escape) {
+                document.addEventListener("keydown", ev => {
+                    if (ev.key.toLowerCase() === "escape") {
+                        ctxstate_open.open_set(false);
+                    }
+                }, { signal: controller.signal });
             }
-        }, onTransitionEnd: ev => {
-            if (ev.nativeEvent.propertyName === "opacity" && !ctxstate.open) {
-                revalign_set(false);
-                revjustify_set(false);
-                maxwidth_set(null);
-                maxheight_set(null);
-                visible_set(false);
+            if (nconfig_resize) {
+                window.addEventListener("resize", () => {
+                    ctxstate_open.open_set(false);
+                }, { signal: controller.signal });
             }
-        }, children: children });
+            return () => {
+                controller.abort();
+            };
+        }
+    }, [
+        open,
+        ctxstate_refs.register,
+        ctxstate_open.open_set,
+        params.active,
+        nconfig_click,
+        nconfig_resize,
+        nconfig_escape,
+        nconfig_blur,
+    ]);
+};
+
+const prop_clmap_def_container = {
+    __qyuddn: "__qyuddn",
+    container: "container",
+};
+
+const render_view_default = function (props) {
+    return jsx("div", { ...props });
+};
+const CmpContainer = r.memo(r.forwardRef((props, f_ref) => {
+    const nprop_clmap = r.useMemo(() => prop_clmap_new(props.clmap, prop_clmap_def_container), [props.clmap]);
+    const nprop_render_view = props.render_view ?? render_view_default;
+    const l_ref = r.useRef(null);
+    const ctxstate_open = useCtxStateInitOpen({
+        open: props.open,
+        open_set: props.open_set,
+    });
+    const ctxstate_refs = useCtxStateInitRefs({
+        container_real: true
+    });
+    const ctxstate_config = useCtxStateInitConfig({
+        focus: props.focus,
+        closeevt: props.closeevt,
+    });
+    useDDNRoot({
+        active: true,
+        ref: useRefO(l_ref),
+        ctxstate_refs,
+    });
+    useDDNShard({
+        isolated: true,
+        ref: useRefO(l_ref),
+        ctxstate_refs,
+        ctxstate_open,
+        ctxstate_config,
+    });
+    useCloseEvtRoot({
+        active: true,
+        ctxstate_open,
+        ctxstate_refs,
+        ctxstate_config,
+    });
+    const ref = useRefMerge(l_ref, f_ref);
+    return jsx(CmpCtxState_Config.Provider, { value: ctxstate_config, children: jsx(CmpCtxState_Open.Provider, { value: ctxstate_open, children: jsx(CmpCtxState_Refs.Provider, { value: ctxstate_refs, children: nprop_render_view({
+                    ref,
+                    children: props.children,
+                    className: cl(nprop_clmap.__qyuddn, nprop_clmap.container, props.className),
+                }) }) }) });
 }));
 
-export { CmpButton, CmpContainer, CmpCtxState_Open, CmpListAbs, CmpListFix, useDropdownCloseEvents };
+const CmpContainerVirtual = r.memo((props) => {
+    const ctxstate_open = useCtxStateInitOpen({
+        open: props.open,
+        open_set: props.open_set,
+    });
+    const ctxstate_refs = useCtxStateInitRefs({
+        container_real: false,
+    });
+    const ctxstate_config = useCtxStateInitConfig({
+        focus: props.focus,
+        closeevt: props.closeevt,
+    });
+    useCloseEvtRoot({
+        active: true,
+        ctxstate_refs,
+        ctxstate_open,
+        ctxstate_config,
+    });
+    return jsx(CmpCtxState_Config.Provider, { value: ctxstate_config, children: jsx(CmpCtxState_Open.Provider, { value: ctxstate_open, children: jsx(CmpCtxState_Refs.Provider, { value: ctxstate_refs, children: props.children }) }) });
+});
+
+const useCloseEvtRootInfer = function (params) {
+    const ctxstate_refs = useCtxStateRefs();
+    const ctxstate_open = useCtxStateOpen();
+    const ctxstate_config = useCtxStateConfig();
+    useCloseEvtRoot({
+        ...params,
+        ctxstate_refs,
+        ctxstate_open,
+        ctxstate_config,
+    });
+};
+
+const useCloseEvtShardInfer = function (params) {
+    const ctxstate_refs = useCtxStateRefs();
+    const ctxstate_open = useCtxStateOpen();
+    const ctxstate_config = useCtxStateConfig();
+    useCloseEvtShard({
+        ...params,
+        ctxstate_refs,
+        ctxstate_open,
+        ctxstate_config,
+    });
+};
+
+export { CmpButton, CmpButtonVirtual, CmpContainer, CmpContainerVirtual, CmpContent, CmpCtxState_Config, CmpCtxState_Content, CmpCtxState_Open, CmpCtxState_Refs, CmpListAbs, CmpListFix, CmpListPortal, cssprops_new_position, cssprops_new_size, prop_align_new, prop_align_new_reversed, prop_clmap_def_container, prop_clmap_def_content, prop_clmap_def_listabs, prop_clmap_def_listfix, prop_clmap_new, prop_direction_new, prop_justify_new, prop_justify_new_reversed, prop_portal_new, useCloseEvtRoot, useCloseEvtRootInfer, useCloseEvtShard, useCloseEvtShardInfer, useCtxStateConfig, useCtxStateContent, useCtxStateInitConfig, useCtxStateInitContent, useCtxStateInitOpen, useCtxStateInitRefs, useCtxStateOpen, useCtxStateRefs, useDDNList, useDDNListInfer, useDDNRoot, useDDNRootInfer, useDDNShard, useDDNShardInfer, useFocusCapture, useFocusCaptureInfer, useListPosApiAbsolute, useListPosApiFixed, useListPosRearrange, useOpen, useOpenInfer };