@qyu/reactcmp-dropdown 2.0.0 → 2.1.0

package/README.md

@@ -46,6 +46,8 @@ function DDN(props: { children: r.Children }) {
             align={"start"}
             // optional
             justify={"end"}
+            // optional
+            stretch={"min"}
         >
             {/* Used to measure content. Required for any list */}
             <ddn.Content>
@@ -87,7 +89,7 @@ const CustomButton = function () {
     // this will give you calculated value of wether your dropdown is open or not
     const open = ddn.useOpenInfer({})
 
-    // this wrapper is required, it necessary events and stuff
+    // this wrapper is required, it registers necessary events and stuff
     return <ddn.ButtonVirtual target={ref}>
         <button 
             ref={ref} 
@@ -198,6 +200,13 @@ function App() {
             // set justify directly
             justify={"end" || "start"}
 
+            // stretch to min default is "none"
+            stretch
+            // set stretch directly
+            // "min" stretches it to the size of the root if list is smaller
+            // "strict" sets the size of the root to the list
+            stretch={"none" | "min" | "strict"}
+
             // recalculate position on, optional
             // default values shown below
             rearrange={{

package/build/bundle/entry/index.js

@@ -412,6 +412,26 @@ const useFocusCaptureInfer = function (params) {
     });
 };
 
+const prop_stretch_new = function (raw) {
+    if (!raw) {
+        return "none";
+    }
+    if (raw === true) {
+        return "min";
+    }
+    return raw;
+};
+
+const stretch_apply = function (stretch, target, container) {
+    switch (stretch) {
+        case "none":
+            return target;
+        case "min":
+            return Math.max(target, container);
+        case "strict":
+            return container;
+    }
+};
 const normalize_justify$1 = function (params) {
     let axis_main;
     switch (params.direction) {
@@ -475,9 +495,10 @@ const normalize_align$1 = function (params) {
             break;
         }
     }
+    const list_size_normalized = stretch_apply(params.stretch, axis_main.list_size, axis_main.container_size);
     switch (params.align) {
         case "center": {
-            if (axis_main.list_size >= axis_main.screen_size) {
+            if (list_size_normalized >= axis_main.screen_size) {
                 params.reverse_set(false);
                 axis_main.size_set(axis_main.screen_size);
                 axis_main.flow_direct.position_set(0);
@@ -485,25 +506,26 @@ const normalize_align$1 = function (params) {
             }
             else {
                 const point = axis_main.container_pos + axis_main.container_size / 2;
+                const spacereq = list_size_normalized / 2;
                 const freespace_reverse = point;
                 const freespace_direct = axis_main.screen_size - point;
-                if (axis_main.list_size >= freespace_reverse) {
+                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);
+                    axis_main.size_set(list_size_normalized);
                 }
-                else if (axis_main.list_size >= freespace_direct) {
+                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);
+                    axis_main.size_set(list_size_normalized);
                 }
                 else {
                     params.reverse_set(false);
-                    axis_main.flow_direct.position_set(point - axis_main.list_size / 2);
+                    axis_main.flow_direct.position_set(point - spacereq);
                     axis_main.flow_reverse.position_set(null);
-                    axis_main.size_set(axis_main.list_size);
+                    axis_main.size_set(list_size_normalized);
                 }
             }
             break;
@@ -514,18 +536,18 @@ const normalize_align$1 = function (params) {
             const flow_direct = axis_main.flow_direct;
             const flow_reverse = axis_main.flow_reverse;
             const position_direct = Math.max(0, (+axis_main.container_pos
-                - Math.max(0, axis_main.list_size - freespace_direct)));
+                - Math.max(0, list_size_normalized - freespace_direct)));
             const position_reverse = Math.max(0, (+axis_main.screen_size
                 - (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) {
+                - Math.max(0, list_size_normalized - freespace_reverse)));
+            if (freespace_direct >= list_size_normalized || freespace_direct >= freespace_reverse) {
                 params.reverse_set(false);
-                axis_main.size_set(Math.min(freespace_direct, axis_main.list_size));
+                axis_main.size_set(Math.min(freespace_direct, list_size_normalized));
                 flow_direct.position_set(position_direct);
             }
             else {
                 params.reverse_set(true);
-                axis_main.size_set(Math.min(freespace_reverse, axis_main.list_size));
+                axis_main.size_set(Math.min(freespace_reverse, list_size_normalized));
                 flow_direct.position_set(null);
                 flow_reverse.position_set(position_reverse);
             }
@@ -538,18 +560,18 @@ const normalize_align$1 = function (params) {
             const flow_reverse = axis_main.flow_direct;
             const position_direct = Math.max(0, (+axis_main.screen_size
                 - (axis_main.container_pos + axis_main.container_size)
-                - Math.max(0, axis_main.list_size - freespace_direct)));
+                - Math.max(0, list_size_normalized - freespace_direct)));
             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) {
+                - Math.max(0, list_size_normalized - freespace_reverse)));
+            if (freespace_direct >= list_size_normalized || freespace_direct >= freespace_reverse) {
                 params.reverse_set(false);
-                axis_main.size_set(Math.min(freespace_direct, axis_main.list_size));
+                axis_main.size_set(Math.min(freespace_direct, list_size_normalized));
                 flow_reverse.position_set(null);
                 flow_direct.position_set(position_direct);
             }
             else {
                 params.reverse_set(true);
-                axis_main.size_set(Math.min(freespace_reverse, axis_main.list_size));
+                axis_main.size_set(Math.min(freespace_reverse, list_size_normalized));
                 flow_direct.position_set(null);
                 flow_reverse.position_set(position_reverse);
             }
@@ -558,6 +580,7 @@ const normalize_align$1 = function (params) {
     }
 };
 const useListPosApiFixed = function (params) {
+    const nprop_stretch = prop_stretch_new(params.stretch);
     const ctxstate_refs = useCtxStateRefs();
     const [align_reverse, align_reverse_set] = r.useState(false);
     const [justify_reverse, justify_reverse_set] = r.useState(false);
@@ -638,6 +661,7 @@ const useListPosApiFixed = function (params) {
                         axis_main,
                         axis_cross,
                         align: config.align,
+                        stretch: nprop_stretch,
                         direction: config.direction,
                         reverse_set: align_reverse_set,
                     });
@@ -646,7 +670,7 @@ const useListPosApiFixed = function (params) {
                     }
                 }
             },
-        }), [ctxstate_refs.rootref, params.ref_list, params.ref_content])
+        }), [ctxstate_refs.rootref, params.ref_list, params.ref_content, nprop_stretch])
     };
 };
 
@@ -898,7 +922,7 @@ const CmpListFix = r.memo(r.forwardRef((props, f_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 listapi = useListPosApiFixed({ ref_list, ref_content, clmap_content: nprop_clmap_content, stretch: props.stretch, });
     const ctxstate_content = useCtxStateInitContent({
         ref_content: l_ref_content,
     });
@@ -1247,7 +1271,7 @@ const CmpListPortal = r.memo(r.forwardRef((props, f_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 listapi = useListPosApiFixed({ ref_list, ref_content, clmap_content: nprop_clmap_content, stretch: props.stretch });
     const ctxstate_content = useCtxStateInitContent({
         ref_content: l_ref_content,
     });

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

@@ -5,12 +5,14 @@ import { prop_clmap_def_listfix } from "../../../util/prop/clmap/def/listfix.js"
 import type { PropClMap_Raw } from "../../../util/prop/clmap/type/prop.js";
 import type { PropDirection_Raw } from "../../../util/prop/direction/type/prop.js";
 import type { PropJustify_Raw } from "../../../util/prop/justify/type/prop.js";
+import type { PropStretch_Raw } from "../../../util/prop/stretch/type/prop.js";
 import * as r from "react";
 export type CmpListFix_Props = {
     readonly gap?: number;
     readonly lazy?: boolean;
     readonly align?: PropAlign_Raw;
     readonly justify?: PropJustify_Raw;
+    readonly stretch?: PropStretch_Raw;
     readonly direction?: PropDirection_Raw;
     readonly clmap?: PropClMap_Raw<keyof typeof prop_clmap_def_listfix>;
     readonly clmap_content?: PropClMap_Raw<keyof typeof prop_clmap_def_content>;

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

@@ -6,11 +6,13 @@ import type { PropClMap_Raw } from "../../../util/prop/clmap/type/prop.js";
 import type { PropDirection_Raw } from "../../../util/prop/direction/type/prop.js";
 import type { PropJustify_Raw } from "../../../util/prop/justify/type/prop.js";
 import type { PropPortal_Raw } from "../../../util/prop/portal/type/prop.js";
+import type { PropStretch_Raw } from "../../../util/prop/stretch/type/prop.js";
 import * as r from "react";
 export type CmpListPortal_Props = {
     readonly portal: NonNullable<PropPortal_Raw>;
     readonly gap?: number;
     readonly lazy?: boolean;
+    readonly stretch?: PropStretch_Raw;
     readonly align?: PropAlign_Raw;
     readonly justify?: PropJustify_Raw;
     readonly direction?: PropDirection_Raw;

package/build/declaration/hook/listpos/api/fixed.d.ts

@@ -4,6 +4,7 @@ import type { ListPosApi_Reverse } from "./type/reverse.js";
 import type { ListPosApi_Size } from "./type/size.js";
 import type { FnORefHTML } from "../../../type/fnref.js";
 import type { PropClMap_DefContent } from "../../../util/prop/clmap/def/content.js";
+import type { PropStretch_Raw } from "../../../util/prop/stretch/type/prop.js";
 export type UseListPosFixed_Return = {
     readonly api: ListPosApi_Api;
     readonly size: ListPosApi_Size;
@@ -14,5 +15,6 @@ export type UseListPosFixed_Params = {
     readonly ref_list: FnORefHTML;
     readonly ref_content: FnORefHTML;
     readonly clmap_content: PropClMap_DefContent;
+    readonly stretch?: PropStretch_Raw;
 };
 export declare const useListPosApiFixed: (params: UseListPosFixed_Params) => UseListPosFixed_Return;

package/build/declaration/util/prop/stretch/new/index.d.ts

@@ -0,0 +1,2 @@
+import type { PropStretch, PropStretch_Raw } from "../type/prop.js";
+export declare const prop_stretch_new: (raw: PropStretch_Raw) => PropStretch;

package/build/declaration/util/prop/stretch/type/prop.d.ts

@@ -0,0 +1,2 @@
+export type PropStretch = ("none" | "min" | "strict");
+export type PropStretch_Raw = (PropStretch | undefined | boolean);

package/package.json

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