@qyu/reactcmp-dropdown 2.1.1 → 2.2.0

package/README.md

@@ -170,6 +170,12 @@ function App() {
             clmap={clmap}
             clmap_content={clmap}
             render_view={props => <div {...props} />}
+            // how to measure content
+            // offset (default) will use .offsetHeight and .offsetWidth
+            // precise will use .getBoundingClientRect()
+            // offset properties are integers, so they cut the floating point
+            // .getBoundingClientRect() uses floats, but also measures after transforms
+            measurement_kind={"offset" || "precise"}
 
             // specify the portal
             portal={"domid"}

package/build/bundle/entry/index.js

@@ -412,6 +412,24 @@ const useFocusCaptureInfer = function (params) {
     });
 };
 
+const measurement_new = function (element, config) {
+    switch (config.kind) {
+        case "offset": {
+            return {
+                width: element.offsetWidth,
+                height: element.offsetHeight,
+            };
+        }
+        case "precise": {
+            const rect = element.getBoundingClientRect();
+            return {
+                width: rect.width,
+                height: rect.height,
+            };
+        }
+    }
+};
+
 const prop_stretch_new = function (raw) {
     if (!raw) {
         return "none";
@@ -623,8 +641,9 @@ const useListPosApiFixed = function (params) {
                         content.classList.add(params.clmap_content._tracking);
                     }
                     const container_rect = container.getBoundingClientRect();
+                    const content_rect = measurement_new(content, { kind: params.measurement_kind });
                     const axis_main = {
-                        list_size: content.offsetHeight,
+                        list_size: content_rect.height,
                         screen_size: document.documentElement.clientHeight,
                         container_pos: container_rect.y,
                         container_size: container_rect.height,
@@ -637,7 +656,7 @@ const useListPosApiFixed = function (params) {
                         },
                     };
                     const axis_cross = {
-                        list_size: content.offsetWidth,
+                        list_size: content_rect.width,
                         screen_size: document.documentElement.clientWidth,
                         container_pos: container_rect.x,
                         container_size: container_rect.width,
@@ -670,7 +689,7 @@ const useListPosApiFixed = function (params) {
                     }
                 }
             },
-        }), [ctxstate_refs.rootref, params.ref_list, params.ref_content, nprop_stretch])
+        }), [ctxstate_refs.rootref, params.ref_list, params.ref_content, nprop_stretch, params.measurement_kind])
     };
 };
 
@@ -907,12 +926,13 @@ const render_view_default$4 = function (props) {
 };
 const CmpListFix = r.memo(r.forwardRef((props, f_ref) => {
     const nprop_gap = props.gap ?? 0;
-    const nprop_lazy = props.lazy ?? false;
+    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_transition_nopos = props.transition_nopos ?? false;
     const nprop_transition_nosize = props.transition_nosize ?? false;
+    const nprop_measurement_kind = props.measurement_kind ?? "offset";
     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]);
@@ -922,7 +942,13 @@ 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, stretch: props.stretch, });
+    const listapi = useListPosApiFixed({
+        ref_list,
+        ref_content,
+        clmap_content: nprop_clmap_content,
+        stretch: props.stretch,
+        measurement_kind: nprop_measurement_kind,
+    });
     const ctxstate_content = useCtxStateInitContent({
         ref_content: l_ref_content,
     });
@@ -1100,16 +1126,17 @@ const useListPosApiAbsolute = function (params) {
                         content.classList.add(params.clmap_content._tracking);
                     }
                     const container_rect = container.getBoundingClientRect();
+                    const content_rect = measurement_new(content, { kind: params.measurement_kind });
                     const axis_main = {
                         size_set: height_set,
-                        list_size: content.offsetHeight,
+                        list_size: content_rect.height,
                         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,
+                        list_size: content_rect.width,
                         screen_size: document.documentElement.clientWidth,
                         container_pos: container_rect.x,
                         container_size: container_rect.width,
@@ -1134,7 +1161,7 @@ const useListPosApiAbsolute = function (params) {
                     }
                 }
             },
-        }), [ctxstate_refs.rootref, params.ref_list, params.ref_content, params.clmap_content])
+        }), [ctxstate_refs.rootref, params.ref_list, params.ref_content, params.clmap_content, params.measurement_kind])
     };
 };
 
@@ -1161,6 +1188,7 @@ const CmpListAbs = r.memo(r.forwardRef((props, f_ref) => {
     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_measurement_kind = props.measurement_kind ?? "offset";
     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]);
@@ -1171,7 +1199,12 @@ const CmpListAbs = 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 = useListPosApiAbsolute({ ref_list, ref_content, clmap_content: nprop_clmap_content });
+    const listapi = useListPosApiAbsolute({
+        ref_list,
+        ref_content,
+        clmap_content: nprop_clmap_content,
+        measurement_kind: nprop_measurement_kind,
+    });
     const ctxstate_content = useCtxStateInitContent({
         ref_content: l_ref_content,
     });
@@ -1262,6 +1295,7 @@ const CmpListPortal = r.memo(r.forwardRef((props, f_ref) => {
     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_measurement_kind = props.measurement_kind ?? "offset";
     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]);
@@ -1271,7 +1305,13 @@ 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, stretch: props.stretch });
+    const listapi = useListPosApiFixed({
+        ref_list,
+        ref_content,
+        clmap_content: nprop_clmap_content,
+        stretch: props.stretch,
+        measurement_kind: nprop_measurement_kind,
+    });
     const ctxstate_content = useCtxStateInitContent({
         ref_content: l_ref_content,
     });
@@ -1536,4 +1576,4 @@ const useCloseEvtShardInfer = function (params) {
     });
 };
 
-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 };
+export { CmpButton, CmpButtonVirtual, CmpContainer, CmpContainerVirtual, CmpContent, CmpCtxState_Config, CmpCtxState_Content, CmpCtxState_Open, CmpCtxState_Refs, CmpListAbs, CmpListFix, CmpListPortal, cssprops_new_position, cssprops_new_size, measurement_new, 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 };

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

@@ -1,4 +1,5 @@
 import type { ListPosRearrange_Config } from "../../../hook/listpos/rearrange/type/config.js";
+import type { Measurement_New_Kind } from "../../../util/measurement/new.js";
 import type { PropAlign_Raw } from "../../../util/prop/align/type/prop.js";
 import { prop_clmap_def_content } from "../../../util/prop/clmap/def/content.js";
 import { prop_clmap_def_listabs } from "../../../util/prop/clmap/def/listabs.js";
@@ -9,6 +10,7 @@ import * as r from "react";
 export type CmpListAbs_Props = {
     readonly gap?: number;
     readonly lazy?: boolean;
+    readonly measurement_kind?: Measurement_New_Kind;
     readonly align?: PropAlign_Raw;
     readonly justify?: PropJustify_Raw;
     readonly direction?: PropDirection_Raw;

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

@@ -1,4 +1,5 @@
 import type { ListPosRearrange_Config } from "../../../hook/listpos/rearrange/type/config.js";
+import type { Measurement_New_Kind } from "../../../util/measurement/new.js";
 import type { PropAlign_Raw } from "../../../util/prop/align/type/prop.js";
 import { prop_clmap_def_content } from "../../../util/prop/clmap/def/content.js";
 import { prop_clmap_def_listfix } from "../../../util/prop/clmap/def/listfix.js";
@@ -10,6 +11,7 @@ import * as r from "react";
 export type CmpListFix_Props = {
     readonly gap?: number;
     readonly lazy?: boolean;
+    readonly measurement_kind?: Measurement_New_Kind;
     readonly align?: PropAlign_Raw;
     readonly justify?: PropJustify_Raw;
     readonly stretch?: PropStretch_Raw;

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

@@ -1,4 +1,5 @@
 import type { ListPosRearrange_Config } from "../../../hook/listpos/rearrange/type/config.js";
+import type { Measurement_New_Kind } from "../../../util/measurement/new.js";
 import type { PropAlign_Raw } from "../../../util/prop/align/type/prop.js";
 import { prop_clmap_def_content } from "../../../util/prop/clmap/def/content.js";
 import { prop_clmap_def_listfix } from "../../../util/prop/clmap/def/listfix.js";
@@ -10,6 +11,7 @@ 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 measurement_kind?: Measurement_New_Kind;
     readonly gap?: number;
     readonly lazy?: boolean;
     readonly stretch?: PropStretch_Raw;

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

@@ -1,6 +1,7 @@
 import type { ListPosApi_Api } from "./type/api.js";
 import type { ListPosApi_Reverse } from "./type/reverse.js";
 import type { ListPosApi_Size } from "./type/size.js";
+import { type Measurement_New_Kind } from "../../../util/measurement/new.js";
 import type { PropClMap_DefContent } from "../../../util/prop/clmap/def/content.js";
 export type UseListPosAbsolute_Return = {
     readonly api: ListPosApi_Api;
@@ -11,5 +12,6 @@ export type UseListPosAbsolute_Params = {
     readonly ref_list: () => HTMLElement | null;
     readonly ref_content: () => HTMLElement | null;
     readonly clmap_content: PropClMap_DefContent;
+    readonly measurement_kind: Measurement_New_Kind;
 };
 export declare const useListPosApiAbsolute: (params: UseListPosAbsolute_Params) => UseListPosAbsolute_Return;

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

@@ -3,6 +3,7 @@ import type { ListPosApi_Position } from "./type/position.js";
 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 Measurement_New_Kind } from "../../../util/measurement/new.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 = {
@@ -15,6 +16,7 @@ export type UseListPosFixed_Params = {
     readonly ref_list: FnORefHTML;
     readonly ref_content: FnORefHTML;
     readonly clmap_content: PropClMap_DefContent;
+    readonly measurement_kind: Measurement_New_Kind;
     readonly stretch?: PropStretch_Raw;
 };
 export declare const useListPosApiFixed: (params: UseListPosFixed_Params) => UseListPosFixed_Return;

package/build/declaration/index.d.ts

@@ -62,3 +62,4 @@ export * from "./util/prop/clmap/def/container.js";
 export * from "./util/prop/clmap/def/content.js";
 export * from "./util/cssprops/new/size.js";
 export * from "./util/cssprops/new/position.js";
+export * from "./util/measurement/new.js";

package/build/declaration/util/measurement/new.d.ts

@@ -0,0 +1,9 @@
+export type Measurement_New_Kind = ("offset" | "precise");
+export type Measurement_New_Config = {
+    readonly kind: Measurement_New_Kind;
+};
+export type Measurement_New_Result = {
+    readonly width: number;
+    readonly height: number;
+};
+export declare const measurement_new: (element: HTMLElement, config: Measurement_New_Config) => Measurement_New_Result;

package/package.json

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