@open-mercato/ui 0.6.7-develop.6595.1.e93ecd3cfa → 0.6.7-develop.6600.1.49a5df927f

package/dist/backend/utils/viewport.js

@@ -0,0 +1,9 @@
+function computeMenuViewportShiftX(rect, viewportWidth, margin = 8) {
+  if (rect.left < margin) return Math.ceil(margin - rect.left);
+  if (rect.right > viewportWidth - margin) return Math.floor(viewportWidth - margin - rect.right);
+  return 0;
+}
+export {
+  computeMenuViewportShiftX
+};
+//# sourceMappingURL=viewport.js.map

package/dist/backend/utils/viewport.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/utils/viewport.ts"],
+  "sourcesContent": ["// Horizontal shift (px) needed to keep an overlay fully inside the viewport.\n// Positive shifts right (overlay bleeds off the left edge), negative shifts left\n// (bleeds off the right edge), 0 when it already fits. Keeps a small margin.\n//\n// The two branches are mutually exclusive for any overlay narrower than the\n// viewport (minus the margins): clearing the left edge cannot then push the\n// right edge off-screen. Callers that could exceed the viewport width MUST cap\n// the overlay (e.g. `max-w-[calc(100vw-1rem)]`) \u2014 for a genuinely too-wide\n// overlay this falls back to left-aligning it, which is the sane default.\nexport function computeMenuViewportShiftX(\n  rect: { left: number; right: number },\n  viewportWidth: number,\n  margin = 8,\n): number {\n  if (rect.left < margin) return Math.ceil(margin - rect.left)\n  if (rect.right > viewportWidth - margin) return Math.floor(viewportWidth - margin - rect.right)\n  return 0\n}\n"],
+  "mappings": "AASO,SAAS,0BACd,MACA,eACA,SAAS,GACD;AACR,MAAI,KAAK,OAAO,OAAQ,QAAO,KAAK,KAAK,SAAS,KAAK,IAAI;AAC3D,MAAI,KAAK,QAAQ,gBAAgB,OAAQ,QAAO,KAAK,MAAM,gBAAgB,SAAS,KAAK,KAAK;AAC9F,SAAO;AACT;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.7-develop.6595.1.e93ecd3cfa",
+  "version": "0.6.7-develop.6600.1.49a5df927f",
   "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.6595.1.e93ecd3cfa",
+    "@open-mercato/shared": "0.6.7-develop.6600.1.49a5df927f",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.7-develop.6595.1.e93ecd3cfa",
+    "@open-mercato/shared": "0.6.7-develop.6600.1.49a5df927f",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/DataTable.tsx

@@ -36,6 +36,7 @@ import { apiCall, withScopedApiRequestHeaders } from './utils/apiCall'
 import { buildOptimisticLockHeader } from './utils/optimisticLock'
 import { useGuardedMutation } from './injection/useGuardedMutation'
 import { raiseCrudError } from './utils/serverErrors'
+import { computeMenuViewportShiftX } from './utils/viewport'
 import { PerspectiveSidebar } from './PerspectiveSidebar'
 import { Popover, PopoverTrigger, PopoverContent } from '../primitives/popover'
 import { formatWithPublicDateFormat, normalizeDateFormatPattern } from '../primitives/date-format'
@@ -707,9 +708,33 @@ function ExportMenu({ config, sections }: { config: DataTableExportConfig; secti
   const disabled = Boolean(config.disabled)
   const hasSections = sections.length > 0
   const [open, setOpen] = React.useState(false)
+  const [menuOffsetX, setMenuOffsetX] = React.useState(0)
   const buttonRef = React.useRef<HTMLButtonElement>(null)
   const menuRef = React.useRef<HTMLDivElement>(null)
 
+  // Keep the menu inside the viewport on narrow screens: the trigger can sit
+  // near the left edge, and a `right-0` menu would otherwise render off-screen.
+  // Measure the untransformed rect and shift it back on-screen, re-measuring on
+  // resize/orientation change while the menu stays open.
+  React.useLayoutEffect(() => {
+    if (!open) {
+      setMenuOffsetX(0)
+      return
+    }
+    const measure = () => {
+      const el = menuRef.current
+      if (!el || typeof window === 'undefined') return
+      const previousTransform = el.style.transform
+      el.style.transform = 'none'
+      const rect = el.getBoundingClientRect()
+      el.style.transform = previousTransform
+      setMenuOffsetX(computeMenuViewportShiftX(rect, window.innerWidth))
+    }
+    measure()
+    window.addEventListener('resize', measure)
+    return () => window.removeEventListener('resize', measure)
+  }, [open])
+
   React.useEffect(() => {
     if (!open || !hasSections) return
     const onDocClick = (event: MouseEvent) => {
@@ -790,7 +815,8 @@ function ExportMenu({ config, sections }: { config: DataTableExportConfig; secti
         <div
           ref={menuRef}
           role="menu"
-          className="absolute right-0 mt-2 w-60 rounded-md border bg-background py-2 shadow z-dropdown"
+          className="absolute right-0 mt-2 w-60 max-w-[calc(100vw-1rem)] rounded-md border bg-background py-2 shadow z-dropdown"
+          style={menuOffsetX ? { transform: `translateX(${menuOffsetX}px)` } : undefined}
         >
           {sections.map((section, idx) => (
             <div key={section.key} className={idx > 0 ? 'mt-2 border-t pt-3' : ''}>

package/src/backend/utils/__tests__/viewport.test.ts

@@ -0,0 +1,26 @@
+import { computeMenuViewportShiftX } from '../viewport'
+
+describe('computeMenuViewportShiftX', () => {
+  const viewport = 390
+
+  it('returns 0 when the overlay already fits within the viewport', () => {
+    expect(computeMenuViewportShiftX({ left: 100, right: 340 }, viewport)).toBe(0)
+  })
+
+  it('shifts right when the overlay bleeds off the left edge', () => {
+    // Export dropdown reproduction: left:-38 on a narrow phone.
+    expect(computeMenuViewportShiftX({ left: -38, right: 202 }, viewport)).toBe(46)
+  })
+
+  it('shifts left (negative) when the overlay bleeds off the right edge', () => {
+    expect(computeMenuViewportShiftX({ left: 200, right: 440 }, viewport)).toBe(-58)
+  })
+
+  it('respects a custom margin', () => {
+    expect(computeMenuViewportShiftX({ left: 2, right: 200 }, viewport, 16)).toBe(14)
+  })
+
+  it('leaves overlays flush to the margin untouched', () => {
+    expect(computeMenuViewportShiftX({ left: 8, right: 382 }, viewport)).toBe(0)
+  })
+})

package/src/backend/utils/viewport.ts

@@ -0,0 +1,18 @@
+// Horizontal shift (px) needed to keep an overlay fully inside the viewport.
+// Positive shifts right (overlay bleeds off the left edge), negative shifts left
+// (bleeds off the right edge), 0 when it already fits. Keeps a small margin.
+//
+// The two branches are mutually exclusive for any overlay narrower than the
+// viewport (minus the margins): clearing the left edge cannot then push the
+// right edge off-screen. Callers that could exceed the viewport width MUST cap
+// the overlay (e.g. `max-w-[calc(100vw-1rem)]`) — for a genuinely too-wide
+// overlay this falls back to left-aligning it, which is the sane default.
+export function computeMenuViewportShiftX(
+  rect: { left: number; right: number },
+  viewportWidth: number,
+  margin = 8,
+): number {
+  if (rect.left < margin) return Math.ceil(margin - rect.left)
+  if (rect.right > viewportWidth - margin) return Math.floor(viewportWidth - margin - rect.right)
+  return 0
+}