@open-mercato/ui 0.6.7-develop.6676.1.7dad6df292 → 0.6.7-develop.6685.1.77c0a5591b

package/dist/backend/crud/useGroupOrder.js

@@ -24,32 +24,27 @@ function arraysEqual(a, b) {
   return true;
 }
 function useGroupOrder(pageType, defaultGroupIds) {
-  const [orderedIds, setOrderedIds] = React.useState(defaultGroupIds);
-  const mounted = React.useRef(false);
+  const [savedOrder, setSavedOrder] = React.useState(null);
   React.useEffect(() => {
-    mounted.current = true;
     const saved = readJsonFromLocalStorage(getStorageKey(pageType), null);
-    if (Array.isArray(saved)) {
-      setOrderedIds(mergeOrder(saved, defaultGroupIds));
-    }
+    setSavedOrder(Array.isArray(saved) ? saved : null);
   }, [pageType]);
-  React.useEffect(() => {
-    setOrderedIds((prev) => {
-      const merged = mergeOrder(prev, defaultGroupIds);
-      return arraysEqual(prev, merged) ? prev : merged;
-    });
-  }, [defaultGroupIds]);
+  const mergedIds = React.useMemo(
+    () => savedOrder ? mergeOrder(savedOrder, defaultGroupIds) : defaultGroupIds,
+    [defaultGroupIds, savedOrder]
+  );
+  const stableIdsRef = React.useRef(mergedIds);
+  if (!arraysEqual(stableIdsRef.current, mergedIds)) {
+    stableIdsRef.current = mergedIds;
+  }
+  const orderedIds = stableIdsRef.current;
   const reorder = React.useCallback(
     (fromIndex, toIndex) => {
-      setOrderedIds((prev) => {
-        const next = [...prev];
-        const [moved] = next.splice(fromIndex, 1);
-        next.splice(toIndex, 0, moved);
-        if (mounted.current) {
-          writeJsonToLocalStorage(getStorageKey(pageType), next);
-        }
-        return next;
-      });
+      const next = [...stableIdsRef.current];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, moved);
+      writeJsonToLocalStorage(getStorageKey(pageType), next);
+      setSavedOrder(next);
     },
     [pageType]
   );

package/dist/backend/crud/useGroupOrder.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/crud/useGroupOrder.ts"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport {\n  readJsonFromLocalStorage,\n  writeJsonToLocalStorage,\n} from '@open-mercato/shared/lib/browser/safeLocalStorage'\n\nconst STORAGE_PREFIX = 'om:group-order:'\n\nfunction getStorageKey(pageType: string) {\n  return `${STORAGE_PREFIX}${pageType}`\n}\n\nfunction mergeOrder(saved: string[], defaults: string[]): string[] {\n  const known = new Set(defaults)\n  const result = saved.filter((id) => known.has(id))\n  for (const id of defaults) {\n    if (!result.includes(id)) result.push(id)\n  }\n  return result\n}\n\nfunction arraysEqual(a: string[], b: string[]): boolean {\n  if (a.length !== b.length) return false\n  for (let i = 0; i < a.length; i += 1) {\n    if (a[i] !== b[i]) return false\n  }\n  return true\n}\n\n/**\n * Returns the group IDs in the user's preferred order.\n * Falls back to the default order when no preference is stored.\n */\nexport function useGroupOrder(pageType: string, defaultGroupIds: string[]) {\n  const [orderedIds, setOrderedIds] = React.useState<string[]>(defaultGroupIds)\n  const mounted = React.useRef(false)\n\n  React.useEffect(() => {\n    mounted.current = true\n    const saved = readJsonFromLocalStorage<string[] | null>(getStorageKey(pageType), null)\n    if (Array.isArray(saved)) {\n      setOrderedIds(mergeOrder(saved, defaultGroupIds))\n    }\n    // Intentionally only runs on mount (per pageType); defaultGroupIds changes are\n    // handled by the sync effect below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [pageType])\n\n  // Sync when defaultGroupIds changes (e.g. new groups added dynamically)\n  React.useEffect(() => {\n    setOrderedIds((prev) => {\n      const merged = mergeOrder(prev, defaultGroupIds)\n      return arraysEqual(prev, merged) ? prev : merged\n    })\n  }, [defaultGroupIds])\n\n  const reorder = React.useCallback(\n    (fromIndex: number, toIndex: number) => {\n      setOrderedIds((prev) => {\n        const next = [...prev]\n        const [moved] = next.splice(fromIndex, 1)\n        next.splice(toIndex, 0, moved)\n        if (mounted.current) {\n          writeJsonToLocalStorage(getStorageKey(pageType), next)\n        }\n        return next\n      })\n    },\n    [pageType],\n  )\n\n  return { orderedIds, reorder }\n}\n"],
-  "mappings": ";AACA,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,MAAM,iBAAiB;AAEvB,SAAS,cAAc,UAAkB;AACvC,SAAO,GAAG,cAAc,GAAG,QAAQ;AACrC;AAEA,SAAS,WAAW,OAAiB,UAA8B;AACjE,QAAM,QAAQ,IAAI,IAAI,QAAQ;AAC9B,QAAM,SAAS,MAAM,OAAO,CAAC,OAAO,MAAM,IAAI,EAAE,CAAC;AACjD,aAAW,MAAM,UAAU;AACzB,QAAI,CAAC,OAAO,SAAS,EAAE,EAAG,QAAO,KAAK,EAAE;AAAA,EAC1C;AACA,SAAO;AACT;AAEA,SAAS,YAAY,GAAa,GAAsB;AACtD,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,WAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK,GAAG;AACpC,QAAI,EAAE,CAAC,MAAM,EAAE,CAAC,EAAG,QAAO;AAAA,EAC5B;AACA,SAAO;AACT;AAMO,SAAS,cAAc,UAAkB,iBAA2B;AACzE,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAmB,eAAe;AAC5E,QAAM,UAAU,MAAM,OAAO,KAAK;AAElC,QAAM,UAAU,MAAM;AACpB,YAAQ,UAAU;AAClB,UAAM,QAAQ,yBAA0C,cAAc,QAAQ,GAAG,IAAI;AACrF,QAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,oBAAc,WAAW,OAAO,eAAe,CAAC;AAAA,IAClD;AAAA,EAIF,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,UAAU,MAAM;AACpB,kBAAc,CAAC,SAAS;AACtB,YAAM,SAAS,WAAW,MAAM,eAAe;AAC/C,aAAO,YAAY,MAAM,MAAM,IAAI,OAAO;AAAA,IAC5C,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,WAAmB,YAAoB;AACtC,oBAAc,CAAC,SAAS;AACtB,cAAM,OAAO,CAAC,GAAG,IAAI;AACrB,cAAM,CAAC,KAAK,IAAI,KAAK,OAAO,WAAW,CAAC;AACxC,aAAK,OAAO,SAAS,GAAG,KAAK;AAC7B,YAAI,QAAQ,SAAS;AACnB,kCAAwB,cAAc,QAAQ,GAAG,IAAI;AAAA,QACvD;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,EAAE,YAAY,QAAQ;AAC/B;",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport {\n  readJsonFromLocalStorage,\n  writeJsonToLocalStorage,\n} from '@open-mercato/shared/lib/browser/safeLocalStorage'\n\nconst STORAGE_PREFIX = 'om:group-order:'\n\nfunction getStorageKey(pageType: string) {\n  return `${STORAGE_PREFIX}${pageType}`\n}\n\nfunction mergeOrder(saved: string[], defaults: string[]): string[] {\n  const known = new Set(defaults)\n  const result = saved.filter((id) => known.has(id))\n  for (const id of defaults) {\n    if (!result.includes(id)) result.push(id)\n  }\n  return result\n}\n\nfunction arraysEqual(a: string[], b: string[]): boolean {\n  if (a.length !== b.length) return false\n  for (let i = 0; i < a.length; i += 1) {\n    if (a[i] !== b[i]) return false\n  }\n  return true\n}\n\n/**\n * Returns the group IDs in the user's preferred order.\n * Falls back to the default order when no preference is stored.\n *\n * State holds only the saved preference; the visible order is derived during\n * render. Syncing derived order back into state via an effect looped forever\n * when a host recreated `defaultGroupIds` with different content on every\n * render (#4386), so no effect writes state from `defaultGroupIds` here.\n */\nexport function useGroupOrder(pageType: string, defaultGroupIds: string[]) {\n  const [savedOrder, setSavedOrder] = React.useState<string[] | null>(null)\n\n  React.useEffect(() => {\n    const saved = readJsonFromLocalStorage<string[] | null>(getStorageKey(pageType), null)\n    setSavedOrder(Array.isArray(saved) ? saved : null)\n  }, [pageType])\n\n  const mergedIds = React.useMemo(\n    () => (savedOrder ? mergeOrder(savedOrder, defaultGroupIds) : defaultGroupIds),\n    [defaultGroupIds, savedOrder],\n  )\n\n  const stableIdsRef = React.useRef(mergedIds)\n  if (!arraysEqual(stableIdsRef.current, mergedIds)) {\n    stableIdsRef.current = mergedIds\n  }\n  const orderedIds = stableIdsRef.current\n\n  const reorder = React.useCallback(\n    (fromIndex: number, toIndex: number) => {\n      const next = [...stableIdsRef.current]\n      const [moved] = next.splice(fromIndex, 1)\n      next.splice(toIndex, 0, moved)\n      writeJsonToLocalStorage(getStorageKey(pageType), next)\n      setSavedOrder(next)\n    },\n    [pageType],\n  )\n\n  return { orderedIds, reorder }\n}\n"],
+  "mappings": ";AACA,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,MAAM,iBAAiB;AAEvB,SAAS,cAAc,UAAkB;AACvC,SAAO,GAAG,cAAc,GAAG,QAAQ;AACrC;AAEA,SAAS,WAAW,OAAiB,UAA8B;AACjE,QAAM,QAAQ,IAAI,IAAI,QAAQ;AAC9B,QAAM,SAAS,MAAM,OAAO,CAAC,OAAO,MAAM,IAAI,EAAE,CAAC;AACjD,aAAW,MAAM,UAAU;AACzB,QAAI,CAAC,OAAO,SAAS,EAAE,EAAG,QAAO,KAAK,EAAE;AAAA,EAC1C;AACA,SAAO;AACT;AAEA,SAAS,YAAY,GAAa,GAAsB;AACtD,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,WAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK,GAAG;AACpC,QAAI,EAAE,CAAC,MAAM,EAAE,CAAC,EAAG,QAAO;AAAA,EAC5B;AACA,SAAO;AACT;AAWO,SAAS,cAAc,UAAkB,iBAA2B;AACzE,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAA0B,IAAI;AAExE,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,yBAA0C,cAAc,QAAQ,GAAG,IAAI;AACrF,kBAAc,MAAM,QAAQ,KAAK,IAAI,QAAQ,IAAI;AAAA,EACnD,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,YAAY,MAAM;AAAA,IACtB,MAAO,aAAa,WAAW,YAAY,eAAe,IAAI;AAAA,IAC9D,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,eAAe,MAAM,OAAO,SAAS;AAC3C,MAAI,CAAC,YAAY,aAAa,SAAS,SAAS,GAAG;AACjD,iBAAa,UAAU;AAAA,EACzB;AACA,QAAM,aAAa,aAAa;AAEhC,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,WAAmB,YAAoB;AACtC,YAAM,OAAO,CAAC,GAAG,aAAa,OAAO;AACrC,YAAM,CAAC,KAAK,IAAI,KAAK,OAAO,WAAW,CAAC;AACxC,WAAK,OAAO,SAAS,GAAG,KAAK;AAC7B,8BAAwB,cAAc,QAAQ,GAAG,IAAI;AACrD,oBAAc,IAAI;AAAA,IACpB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,EAAE,YAAY,QAAQ;AAC/B;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.7-develop.6676.1.7dad6df292",
+  "version": "0.6.7-develop.6685.1.77c0a5591b",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,13 +155,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.7-develop.6676.1.7dad6df292",
+    "@open-mercato/shared": "0.6.7-develop.6685.1.77c0a5591b",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.7-develop.6676.1.7dad6df292",
+    "@open-mercato/shared": "0.6.7-develop.6685.1.77c0a5591b",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/crud/__tests__/useGroupOrder.test.ts

@@ -1,5 +1,6 @@
 /** @jest-environment jsdom */
-import { act, renderHook } from '@testing-library/react'
+import * as React from 'react'
+import { act, render, renderHook, screen } from '@testing-library/react'
 import { useGroupOrder } from '../useGroupOrder'
 
 describe('useGroupOrder', () => {
@@ -60,4 +61,31 @@ describe('useGroupOrder', () => {
     expect(spy).not.toHaveBeenCalledWith('om:group-order:p', expect.anything())
     spy.mockRestore()
   })
+
+  it('keeps a stable orderedIds identity when defaults are recreated with equal content', () => {
+    const { result, rerender } = renderHook(
+      ({ ids }) => useGroupOrder('p', ids),
+      { initialProps: { ids: ['a', 'b'] } },
+    )
+    const first = result.current.orderedIds
+    rerender({ ids: ['a', 'b'] })
+    expect(result.current.orderedIds).toBe(first)
+  })
+
+  it('does not loop when the host recreates defaults with different content on every render (#4386)', () => {
+    localStorage.setItem('om:group-order:unstable', JSON.stringify(['b', 'a']))
+    let renders = 0
+    function UnstableHost() {
+      renders += 1
+      if (renders > 50) throw new Error('render loop detected')
+      const defaults = renders % 2 === 1 ? ['a', 'b'] : ['a', 'b', `extra-${renders}`]
+      const { orderedIds } = useGroupOrder('unstable', defaults)
+      return React.createElement('div', { 'data-testid': 'order' }, orderedIds.join(','))
+    }
+
+    render(React.createElement(UnstableHost))
+
+    expect(renders).toBeLessThanOrEqual(6)
+    expect(screen.getByTestId('order').textContent).toContain('b,a')
+  })
 })

package/src/backend/crud/useGroupOrder.ts

@@ -31,41 +31,38 @@ function arraysEqual(a: string[], b: string[]): boolean {
 /**
  * Returns the group IDs in the user's preferred order.
  * Falls back to the default order when no preference is stored.
+ *
+ * State holds only the saved preference; the visible order is derived during
+ * render. Syncing derived order back into state via an effect looped forever
+ * when a host recreated `defaultGroupIds` with different content on every
+ * render (#4386), so no effect writes state from `defaultGroupIds` here.
  */
 export function useGroupOrder(pageType: string, defaultGroupIds: string[]) {
-  const [orderedIds, setOrderedIds] = React.useState<string[]>(defaultGroupIds)
-  const mounted = React.useRef(false)
+  const [savedOrder, setSavedOrder] = React.useState<string[] | null>(null)
 
   React.useEffect(() => {
-    mounted.current = true
     const saved = readJsonFromLocalStorage<string[] | null>(getStorageKey(pageType), null)
-    if (Array.isArray(saved)) {
-      setOrderedIds(mergeOrder(saved, defaultGroupIds))
-    }
-    // Intentionally only runs on mount (per pageType); defaultGroupIds changes are
-    // handled by the sync effect below.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    setSavedOrder(Array.isArray(saved) ? saved : null)
   }, [pageType])
 
-  // Sync when defaultGroupIds changes (e.g. new groups added dynamically)
-  React.useEffect(() => {
-    setOrderedIds((prev) => {
-      const merged = mergeOrder(prev, defaultGroupIds)
-      return arraysEqual(prev, merged) ? prev : merged
-    })
-  }, [defaultGroupIds])
+  const mergedIds = React.useMemo(
+    () => (savedOrder ? mergeOrder(savedOrder, defaultGroupIds) : defaultGroupIds),
+    [defaultGroupIds, savedOrder],
+  )
+
+  const stableIdsRef = React.useRef(mergedIds)
+  if (!arraysEqual(stableIdsRef.current, mergedIds)) {
+    stableIdsRef.current = mergedIds
+  }
+  const orderedIds = stableIdsRef.current
 
   const reorder = React.useCallback(
     (fromIndex: number, toIndex: number) => {
-      setOrderedIds((prev) => {
-        const next = [...prev]
-        const [moved] = next.splice(fromIndex, 1)
-        next.splice(toIndex, 0, moved)
-        if (mounted.current) {
-          writeJsonToLocalStorage(getStorageKey(pageType), next)
-        }
-        return next
-      })
+      const next = [...stableIdsRef.current]
+      const [moved] = next.splice(fromIndex, 1)
+      next.splice(toIndex, 0, moved)
+      writeJsonToLocalStorage(getStorageKey(pageType), next)
+      setSavedOrder(next)
     },
     [pageType],
   )