@qyu/reactcmp-dropdown 1.1.0 → 1.2.0

package/README.md

@@ -50,6 +50,7 @@ function App() {
         </ddn.CmpButton>
 
         <ddn.CmpListAbs
+            tabIndex={0}
             className={""}
             stylemodule={stylemodule}
 
@@ -79,6 +80,7 @@ function App() {
 
         {/* Same as CmpListAbs, but uses fixed positioning */}
         <ddn.CmpListFix
+            tabIndex={0}
             className={""}
             stylemodule={stylemodule}
 
@@ -102,6 +104,10 @@ function App() {
             justify
             // set justify directly
             jystify={"end" || "start"}
+
+            // when string - finds portal by id
+            // when HTMLElement - uses element for portal
+            portal={"dropdowns" || document.getElementById("dropdowns")}
         >
             Your Content Here
         </ddn.CmpListFix>

package/build/bundle/entry/index.js

@@ -1,5 +1,6 @@
 import * as r from 'react';
 import { jsx } from 'react/jsx-runtime';
+import * as rdom from 'react-dom';
 
 const CmpCtxState_Open = r.createContext(null);
 
@@ -169,6 +170,15 @@ const nprop_direction_new = function (raw) {
     }
     return raw;
 };
+const nprop_portal_new = function (portal) {
+    if (typeof portal === "string") {
+        return document.getElementById(portal) ?? null;
+    }
+    if (portal) {
+        return portal;
+    }
+    return null;
+};
 
 const stylemap$1 = {
     listfix: "listfix",
@@ -315,6 +325,7 @@ 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]);
@@ -404,7 +415,7 @@ const CmpListFix = r.memo(r.forwardRef((props, ref) => {
         }
         return null;
     }, [nprop_lazy, visible, ctxstate.open, props.children]);
-    return 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: {
+    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,
@@ -429,6 +440,10 @@ const CmpListFix = r.memo(r.forwardRef((props, ref) => {
                 right_set(null);
             }
         }, children: children });
+    if (nprop_portal) {
+        return rdom.createPortal(element, nprop_portal);
+    }
+    return element;
 }));
 
 const stylemap = {

package/build/declaration/component/list-fix/element/view.d.ts

@@ -21,6 +21,7 @@ export type CmpListFix_Props = Readonly<{
     tabIndex?: number;
     justify?: JustifyRaw;
     direction?: DirectionRaw;
+    portal?: string | HTMLElement;
     className?: string;
     stylemodule?: CmpListFix_StyleModule;
     children?: r.ReactNode | (() => r.ReactNode);
@@ -32,6 +33,7 @@ export declare const CmpListFix: r.NamedExoticComponent<Readonly<{
     tabIndex?: number;
     justify?: JustifyRaw;
     direction?: DirectionRaw;
+    portal?: string | HTMLElement;
     className?: string;
     stylemodule?: CmpListFix_StyleModule;
     children?: r.ReactNode | (() => r.ReactNode);

package/build/declaration/util/nprop/index.d.ts

@@ -2,3 +2,4 @@ import type { Align, AlignRaw, Direction, DirectionRaw, Justify, JustifyRaw } fr
 export declare const nprop_align_new: (raw: AlignRaw) => Align;
 export declare const nprop_justify_new: (raw: JustifyRaw) => Justify;
 export declare const nprop_direction_new: (raw: DirectionRaw) => Direction;
+export declare const nprop_portal_new: (portal: string | HTMLElement | undefined | null) => HTMLElement | null;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@qyu/reactcmp-dropdown",
     "type": "module",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "main": "./build/bundle/entry/index.js",
     "description": "React Components for Dropdown Positioning",
     "keywords": [