@stacksjs/defaults 0.75.98 → 0.75.99

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.98",
+  "version": "0.75.99",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.98",
+  "version": "0.75.99",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "^0.75.98",
+    "@stacksjs/mobile": "^0.75.99",
     "@stacksjs/sanitizer": "^0.2.406",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/resources/components/NativeComponents.test.ts

@@ -102,6 +102,14 @@ describe('Native components', () => {
     expect(sheet).toContain("useModel('open'")
   })
 
+  it('covers the tab bar while up, and closes when its screen is left', () => {
+    const sheet = read('NativeSheet')
+    expect(sheet).toContain('coverTabBar(element, true)')
+    expect(sheet).toContain('coverTabBar(element, false)')
+    expect(sheet).toContain("useEventListener('stx:navigate'")
+    expect(sheet).toContain('if (to !== openedOn) close()')
+  })
+
   it('refreshes through the shared gesture and hands the page done()', () => {
     const refresh = read('NativePullToRefresh')
     expect(refresh).toContain('observePullToRefresh(')

package/resources/components/NativeNavBar.stx

@@ -18,7 +18,7 @@ const { title = '', back = '', backLabel = 'Back', large = true } = defineProps<
 </script>
 
 <script client>
-import { backLabelFor, canGoBack, enterNavTrail, goBack, haptics, navTrail, observeLargeTitle } from '@stacksjs/mobile'
+import { backLabelFor, canGoBack, enterNavTrail, goBack, haptics, navTrail, observeLargeTitle, previousScreenPath, trailEntryFor } from '@stacksjs/mobile'
 
 const isLarge = useReactiveProp<boolean>('large', true)
 const onScroll = useReactiveProp<boolean>('titleOnScroll', false)
@@ -59,7 +59,11 @@ onMount(() => {
   const { current, previous } = enterNavTrail(navTrail(), window.location.pathname + window.location.search)
   here = current
   current.title = navTitle()
-  if (previous && canGoBack()) previousTitle.set(previous.title)
+  // With a stack per tab the router knows where back goes; the trail only
+  // knows what was entered last, which may be another tab's screen.
+  const backPath = previousScreenPath()
+  const returnsTo = backPath === undefined ? previous : backPath ? trailEntryFor(navTrail(), backPath) : null
+  if (returnsTo && canGoBack()) previousTitle.set(returnsTo.title)
 })
 onDestroy(() => stopScroll?.())
 

package/resources/components/NativeSheet.stx

@@ -1,6 +1,6 @@
 <script client>
 import type { SheetDetent } from '@stacksjs/mobile'
-import { liftToBody, lockBackground, observeSheetDrag, presentPageAsCard, trapFocus } from '@stacksjs/mobile'
+import { coverTabBar, liftToBody, lockBackground, observeSheetDrag, presentPageAsCard, trapFocus } from '@stacksjs/mobile'
 
 /**
  * A bottom sheet: a task that belongs to this screen, raised over it.
@@ -14,6 +14,11 @@ import { liftToBody, lockBackground, observeSheetDrag, presentPageAsCard, trapFo
  * the screen or all of it and is dragged between them, the first named being
  * where it opens. At large the page behind shrinks back into a card, as iOS
  * presents a page sheet. Without `detents` it is as tall as its content.
+ *
+ * As on iOS it covers the tab bar: in the app the native bar steps aside while
+ * it is up. It belongs to the screen it was opened on, so leaving that screen
+ * (a link from outside, a tab switch) closes it rather than carrying it over
+ * the next one.
  */
 const emit = defineEmits()
 const open = useModel('open', { default: false })
@@ -41,6 +46,11 @@ let putBackTimer: ReturnType<typeof setTimeout> | null = null
 let previousFocus: HTMLElement | null = null
 let carded = false
 let stopDrag: (() => void) | null = null
+let openedOn = ''
+
+function currentPath(): string {
+  return root()?.ownerDocument.defaultView?.location.pathname ?? ''
+}
 
 function root(): HTMLElement | null {
   return sheetRoot.current as HTMLElement | null
@@ -57,10 +67,14 @@ function present(): void {
   // scales the page), and everything else made inert behind it.
   putBack ??= liftToBody(element)
   releaseBackground = lockBackground(element)
+  openedOn = currentPath()
+  coverTabBar(element, true)
   void nextTick(() => (panel.current as HTMLElement | null)?.focus())
 }
 
 function dismissed(): void {
+  const element = root()
+  if (element) coverTabBar(element, false)
   releaseBackground?.()
   releaseBackground = null
   previousFocus?.focus?.()
@@ -118,11 +132,20 @@ onDestroy(() => {
   stopDrag?.()
   releaseBackground?.()
   const element = root()
+  if (element && open()) coverTabBar(element, false)
   if (carded && element) presentPageAsCard(element.ownerDocument, false)
   if (putBackTimer) clearTimeout(putBackTimer)
   putBack?.()
 })
 
+// The router moved to another screen while this one's sheet was up.
+useEventListener('stx:navigate', (event: CustomEvent<{ url?: string }>) => {
+  if (!open()) return
+  const location = root()?.ownerDocument.defaultView?.location
+  const to = event.detail?.url ? new URL(event.detail.url, location?.href).pathname : currentPath()
+  if (to !== openedOn) close()
+})
+
 useEventListener('keydown', (event: KeyboardEvent) => {
   if (!open()) return
   if (event.key === 'Escape') close()