@rowsncolumns/ui 16.0.3 → 16.0.5

package/dist/esm/hooks/use-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-dropdown.d.ts","sourceRoot":"","sources":["../../../hooks/use-dropdown.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB,KAAK,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,uBAAuB,EAAE,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB;;;;;OAKG;IACH,cAAc,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,UAAU,EACnD,GAAG,KAAK,CAAC,CAAC,CAAC,EACX,GAAG,KAAK,CAAC,CAAC,CAAC,eAQZ,CAAC;AAuDF,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,WACtB,CAAC;AAE9B,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,UAAU,EAAE,2JAY/C,gBAAgB,CAAC,CAAC,CAAC;;;mBAgGd,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;sBAd/B,CAAC;;;sBAoGgC,MAAM;;;;CAoBlD,CAAC"}
+{"version":3,"file":"use-dropdown.d.ts","sourceRoot":"","sources":["../../../hooks/use-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAExD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB,KAAK,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB,EAAE,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;IACrB,gFAAgF;IAChF,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB;;;;;OAKG;IACH,cAAc,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,UAAU,EACnD,GAAG,KAAK,CAAC,CAAC,CAAC,EACX,GAAG,KAAK,CAAC,CAAC,CAAC,eAQZ,CAAC;AAuDF,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,WACtB,CAAC;AAK9B,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,UAAU,EAAE,gIAU/C,gBAAgB,CAAC,CAAC,CAAC;;;mBA8Jd,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;sBAd/B,CAAC;;;sBA2EgC,MAAM;;;;CAoBlD,CAAC"}

package/dist/esm/hooks/use-dropdown.js

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.ts";
 import { matchSorter } from "match-sorter";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.ts";
 export const sortByUnderscore = (a, b) => {
     const aUnderscore = String(a?.title)?.startsWith("_");
     const bUnderscore = String(b?.title)?.startsWith("_");
@@ -58,34 +58,50 @@ const reorderByPriority = (list) => {
     ];
 };
 export const sanitizeDropdownQuery = (value) => value.replace(/["'`]/g, "");
-export const useDropdown = ({ initialOpen, initialHighlightedIndex, initialQuery, onChange, items = [], isNewValue, itemToString, limit = 10, showAllIfEmpty, itemsWhenEmpty, isItemSelected, }) => {
-    const [isOpen, setIsOpen] = useState(initialOpen);
+const areSameItems = (a, b) => a === b || (a.length === b.length && a.every((item, i) => item === b[i]));
+export const useDropdown = ({ initialHighlightedIndex, initialQuery, onChange, items = [], isNewValue, limit = 10, showAllIfEmpty, itemsWhenEmpty, isItemSelected, }) => {
     const [query, setQuery] = useState(initialQuery ?? "");
     const [highlightedIndex, setHighlightedIndex] = useState(initialHighlightedIndex);
-    const openMenu = useCallback(() => setIsOpen(true), []);
-    const closeMenu = useCallback(() => setIsOpen(false), []);
+    // The item set the menu was dismissed (Escape) for. The menu is open exactly
+    // when it has items and was not dismissed for that set; any change to the
+    // set (a keystroke re-filtering it) or an explicit `openMenu` lifts the
+    // dismissal.
+    const [dismissedItems, setDismissedItems] = useState(null);
     // Refs
     const isDirty = useRef(isNewValue);
-    const initialQueryRef = useRef(undefined);
+    const initialQueryRef = useRef(initialQuery ?? "");
     const highlightedIndexRef = useRef(undefined);
     const queryRef = useRef(undefined);
-    const filteredItemsRef = useRef(undefined);
     useIsomorphicLayoutEffect(() => {
         queryRef.current = query;
     }, [query]);
     useIsomorphicLayoutEffect(() => {
         highlightedIndexRef.current = highlightedIndex;
     }, [highlightedIndex]);
-    useIsomorphicLayoutEffect(() => {
+    // Re-seed for a new editing session. The hosting editor stays mounted
+    // (hidden) between sessions, so the query must follow `initialQuery` when a
+    // new session starts — otherwise the previous session's filter narrows the
+    // next dropdown open.
+    //
+    // Derived during render (React re-runs the component before committing),
+    // deliberately NOT from an effect. The in-cell editor passes the live cell
+    // text as `initialQuery`, so an effect here ran after every keystroke and
+    // scheduled a second render from the commit phase; together with the
+    // open/close effect below that left a render pending at the tail of every
+    // commit, which in a typing burst never let React's nested-update counter
+    // reset and threw "Maximum update depth exceeded" (Minified React error
+    // #185) — dropping the keystroke whose update threw.
+    const [seed, setSeed] = useState(() => ({ initialQuery, isNewValue }));
+    if (seed.initialQuery !== initialQuery || seed.isNewValue !== isNewValue) {
+        setSeed({ initialQuery, isNewValue });
         initialQueryRef.current = initialQuery ?? "";
         isDirty.current = Boolean(isNewValue);
-        // The hosting editor stays mounted (hidden) between editing sessions, so
-        // the query must be re-seeded when a new session starts — otherwise the
-        // previous session's filter narrows the next dropdown open.
-        setQuery(initialQuery ?? "");
-    }, [initialQuery, isNewValue]);
+        if (query !== (initialQuery ?? "")) {
+            setQuery(initialQuery ?? "");
+        }
+    }
     // Filtered items
-    const filteredItems = useMemo(() => {
+    const computedFilteredItems = useMemo(() => {
         if (!query) {
             if (itemsWhenEmpty?.length) {
                 return reorderByPriority([...itemsWhenEmpty]);
@@ -121,10 +137,43 @@ export const useDropdown = ({ initialOpen, initialHighlightedIndex, initialQuery
             baseSort: dropdownBaseSort,
         });
         return reorderByPriority(sorted).slice(0, limit);
-    }, [items, query, limit, itemToString, showAllIfEmpty, itemsWhenEmpty]);
-    useIsomorphicLayoutEffect(() => {
-        filteredItemsRef.current = filteredItems;
-    }, [filteredItems]);
+    }, [items, query, limit, showAllIfEmpty, itemsWhenEmpty]);
+    // Identity follows content: the open state and the highlight bookkeeping
+    // below key off "the item set changed", and a caller re-creating `items`
+    // per render must not read as a change (it would reopen a dismissed menu
+    // on every render and never let the render-phase derivations settle).
+    const filteredItemsRef = useRef(computedFilteredItems);
+    const filteredItems = areSameItems(filteredItemsRef.current, computedFilteredItems)
+        ? filteredItemsRef.current
+        : computedFilteredItems;
+    filteredItemsRef.current = filteredItems;
+    const isOpen = filteredItems.length > 0 && dismissedItems !== filteredItems;
+    const openMenu = useCallback(() => setDismissedItems(null), []);
+    const closeMenu = useCallback(() => setDismissedItems(filteredItemsRef.current), []);
+    // Highlight bookkeeping for a changed query / item set, derived during
+    // render for the same reason as the re-seed above (an effect-scheduled
+    // setState per keystroke): clearing the query drops the highlight, and a
+    // pristine session pre-selects the item matching the current value (e.g. a
+    // data-validation dropdown highlighting the cell's current entry — Excel
+    // behavior); once the user types, the filter owns the highlight. The
+    // pre-select wins over the clear, as the former effect ordering did.
+    const [highlightSync, setHighlightSync] = useState(null);
+    if (highlightSync === null ||
+        highlightSync.query !== query ||
+        highlightSync.filteredItems !== filteredItems ||
+        highlightSync.isItemSelected !== isItemSelected) {
+        setHighlightSync({ query, filteredItems, isItemSelected });
+        let nextHighlightedIndex = highlightedIndex;
+        if (!query) {
+            nextHighlightedIndex = -1;
+        }
+        if (isItemSelected && !isDirty.current) {
+            nextHighlightedIndex = filteredItems.findIndex(isItemSelected);
+        }
+        if (nextHighlightedIndex !== highlightedIndex) {
+            setHighlightedIndex(nextHighlightedIndex);
+        }
+    }
     // User selects a value from the dropdown
     const onSelect = useCallback((value) => {
         onChange?.(value);
@@ -190,30 +239,6 @@ export const useDropdown = ({ initialOpen, initialHighlightedIndex, initialQuery
             }
         }
     }, [isOpen, openMenu, onSelect, closeMenu]);
-    useEffect(() => {
-        if (filteredItems.length) {
-            openMenu();
-        }
-        else {
-            closeMenu();
-        }
-        // If user clears the
-        if (!query) {
-            setHighlightedIndex(-1);
-        }
-    }, [query, filteredItems, closeMenu, openMenu]);
-    // Pre-select the item matching the current value (e.g. a data-validation
-    // dropdown highlighting the cell's current entry — Excel behavior). Runs
-    // only while the session is pristine (`isDirty` flips on the first typed
-    // change, handing the highlight to the filter). Declared AFTER the reset
-    // effect above so the seed wins the mount-time ordering when the query is
-    // empty (a blank cell selecting the list's empty/text-prefix entry).
-    useEffect(() => {
-        if (!isItemSelected || isDirty.current) {
-            return;
-        }
-        setHighlightedIndex(filteredItems.findIndex(isItemSelected));
-    }, [filteredItems, isItemSelected]);
     const handleSetQuery = useCallback((value) => {
         setQuery(value);
         setHighlightedIndex(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rowsncolumns/ui",
-  "version": "16.0.3",
+  "version": "16.0.5",
   "author": "Vinay M",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "./dist/cjs/index.js",
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-select": "^2.2.5",
@@ -63,7 +63,7 @@
     "@rowsncolumns/functions": ">=15.0.2",
     "@rowsncolumns/grid": ">=13.2.35",
     "@rowsncolumns/icons": ">=7.2.33",
-    "@rowsncolumns/utils": ">=9.5.1",
+    "@rowsncolumns/utils": ">=9.5.2",
     "@types/lodash": "^4.17.17",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"