@sigmela/router 0.7.2 → 0.9.0

package/dist/navigationHistory.d.ts

@@ -6,7 +6,7 @@ export interface NavigationHistorySnapshot {
     historyCommit?: string;
     presentation: string;
     splitNavigation?: {
-        operation: 'selection' | 'push' | 'replace';
+        operation: 'selection' | 'push' | 'replace' | 'pop';
     };
     route: {
         id: string;

package/dist/navigationHistory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigationHistory.d.ts","sourceRoot":"","sources":["../src/navigationHistory.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE;QAChB,SAAS,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;KAC7C,CAAC;IACF,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;CACH;AA4BD,wBAAgB,qBAAqB,CAAC,SAAS,SAAS,yBAAyB,EAC/E,OAAO,EAAE,SAAS,EAAE,EACpB,QAAQ,EAAE,SAAS,GAClB,SAAS,EAAE,CA2Cb;AAED,wBAAgB,2BAA2B,CAAC,SAAS,SAAS,yBAAyB,EACrF,OAAO,EAAE,SAAS,EAAE,EACpB,QAAQ,EAAE,SAAS,GAAG,SAAS,GAC9B,SAAS,GAAG,SAAS,CAQvB"}
+{"version":3,"file":"navigationHistory.d.ts","sourceRoot":"","sources":["../src/navigationHistory.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE;QAChB,SAAS,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC;KACrD,CAAC;IACF,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;CACH;AA4BD,wBAAgB,qBAAqB,CAAC,SAAS,SAAS,yBAAyB,EAC/E,OAAO,EAAE,SAAS,EAAE,EACpB,QAAQ,EAAE,SAAS,GAClB,SAAS,EAAE,CA2Cb;AAED,wBAAgB,2BAA2B,CAAC,SAAS,SAAS,yBAAyB,EACrF,OAAO,EAAE,SAAS,EAAE,EACpB,QAAQ,EAAE,SAAS,GAAG,SAAS,GAC9B,SAAS,GAAG,SAAS,CAQvB"}

package/dist/router.css

@@ -191,6 +191,10 @@
   transform: translateX(0);
 }
 
+.screen-stack-item.push.pop-enter.transition-preEnter {
+  transform: translateX(-25%);
+}
+
 .screen-stack-item.none {
   transform: translate3d(0, 0, 0) !important;
   transition: none !important;
@@ -219,7 +223,14 @@
   isolation: isolate;
 }
 
+/* Positioned here as well as by SheetSurface's utility classes, so the scrim
+   still covers the shell in apps without Tailwind. */
 .router-modal-backdrop {
+  pointer-events: auto;
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
   background: var(--router-scrim);
   z-index: 0;
 }
@@ -238,7 +249,8 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: calc(100dvh - env(safe-area-inset-top, 0px));
+  height: var(--router-modal-height, calc(100dvh - env(safe-area-inset-top, 0px)));
+  max-height: calc(100dvh - env(safe-area-inset-top, 0px));
   overflow: hidden;
   border-radius: 33px 33px 0 0;
   background: var(--router-bg);
@@ -469,23 +481,50 @@ html[data-router-shell='desktop-fullscreen'] #root {
   }
 
   .router-overlay-shell[data-router-shell='desktop-fullscreen'] .router-modal-surface {
-    width: 600px;
+    width: min(var(--router-modal-width, 600px), calc(100vw - 48px));
     max-width: calc(100vw - 48px);
-    height: 75dvh;
+    height: min(var(--router-modal-height, 75dvh), calc(100dvh - 48px));
     max-height: calc(100dvh - 48px);
     border-radius: 38px;
   }
 
   .router-overlay-shell[data-router-shell='desktop-fullscreen']
     .router-modal-surface.router-modal-surface--wide {
-    width: 860px;
-    height: 86dvh;
+    width: min(var(--router-modal-width, 860px), calc(100vw - 48px));
+    height: min(var(--router-modal-height, 86dvh), calc(100dvh - 48px));
   }
 
   .router-overlay-shell[data-router-shell='desktop-fullscreen']
     .router-modal-surface--content-sized {
     height: auto;
   }
+
+  /* A right panel anchors to the viewport edge in either shell mode, so it
+     escapes the contained column. Modal.tsx only adds these classes at this
+     width; below it the surface is the regular fullscreen modal. */
+  .router-overlay-shell.router-modal-shell.router-modal-shell--right {
+    inset: 0;
+    width: auto;
+    max-width: none;
+    margin-inline: 0;
+    align-items: stretch;
+    justify-content: flex-end;
+  }
+
+  .router-modal-shell--right > .router-modal-backdrop {
+    background: var(--router-scrim);
+  }
+
+  .router-overlay-shell.router-modal-shell--right
+    .router-modal-surface.router-modal-surface--right {
+    flex: 0 0 auto;
+    width: min(var(--router-modal-width, 393px), calc(100vw - 36px));
+    max-width: calc(100vw - 36px);
+    height: calc(100dvh - 36px);
+    max-height: calc(100dvh - 36px);
+    margin: 18px;
+    border-radius: 16px;
+  }
 }
 
 /* ==================== SPLIT VIEW ==================== */
@@ -583,8 +622,10 @@ html[data-router-shell='desktop-fullscreen'] #root {
   --sigmela-drawer-item-active-bg: var(--router-drawer-active-bg);
   --sigmela-drawer-label: var(--router-drawer-text);
   --sigmela-drawer-overlay: var(--router-drawer-overlay-color);
-  --sigmela-drawer-transition: 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  --sigmela-drawer-duration: 300ms;
+  --sigmela-drawer-transition: var(--sigmela-drawer-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
   --sigmela-drawer-width: 280px;
+  --sigmela-drawer-rail-width: 56px;
 
   position: relative;
   display: flex;
@@ -812,7 +853,10 @@ html[data-router-shell='desktop-fullscreen'] #root {
     left: 0;
     z-index: 101;
     transform: translateX(calc(-1 * var(--sigmela-drawer-width)));
-    transition: transform var(--sigmela-drawer-transition);
+    visibility: hidden;
+    transition:
+      transform var(--sigmela-drawer-transition),
+      visibility 0s linear var(--sigmela-drawer-duration);
   }
 
   .sigmela-drawer__main {
@@ -835,6 +879,10 @@ html[data-router-shell='desktop-fullscreen'] #root {
 
   .sigmela-drawer[data-drawer-open='true'] .sigmela-drawer__sidebar {
     transform: translateX(0);
+    visibility: visible;
+    transition:
+      transform var(--sigmela-drawer-transition),
+      visibility 0s;
   }
 
   .sigmela-drawer[data-drawer-open='true'] .sigmela-drawer__main {
@@ -863,16 +911,54 @@ html[data-router-shell='desktop-fullscreen'] #root {
 @media (min-width: 641px) {
   .sigmela-drawer__sidebar {
     border-right: 1px solid var(--router-divider);
-    transition: margin-left var(--sigmela-drawer-transition);
+    transition:
+      margin-left var(--sigmela-drawer-transition),
+      width var(--sigmela-drawer-transition),
+      flex-basis var(--sigmela-drawer-transition),
+      visibility var(--sigmela-drawer-transition);
   }
 
-  .sigmela-drawer[data-drawer-open='true'] .sigmela-drawer__sidebar {
+  .sigmela-drawer[data-drawer-collapsed="true"]:not(
+      [data-drawer-desktop="icon"]
+    )
+    > .sigmela-drawer__sidebar {
     margin-left: calc(-1 * var(--sigmela-drawer-width));
     border-right: none;
+    visibility: hidden;
+  }
+
+  .sigmela-drawer[data-drawer-collapsed="true"][data-drawer-desktop="icon"]
+    > .sigmela-drawer__sidebar {
+    width: var(--sigmela-drawer-rail-width);
+    flex-basis: var(--sigmela-drawer-rail-width);
+  }
+
+  .sigmela-drawer[data-drawer-collapsed="true"][data-drawer-desktop="icon"]
+    .sigmela-drawer__item {
+    padding-inline: 0;
+    justify-content: center;
+  }
+
+  .sigmela-drawer[data-drawer-collapsed="true"][data-drawer-desktop="icon"]
+    :is(
+      .sigmela-drawer__item-label,
+      .sigmela-drawer__item-badge,
+      .sigmela-drawer__section-label,
+      .sigmela-drawer__group-chevron,
+      .sigmela-drawer__group-items,
+      .sigmela-drawer__footer
+    ) {
+    display: none;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .sigmela-drawer > .sigmela-drawer__sidebar,
+  .sigmela-drawer > .sigmela-drawer__main,
+  .sigmela-drawer > .sigmela-drawer__overlay {
+    transition: none;
+  }
+
   .screen-stack > .screen-stack-item {
     transform: translate3d(0, 0, 0) !important;
     transition: none !important;

package/dist/utils/useMediaQuery.d.ts

@@ -0,0 +1,5 @@
+export declare function useMediaQuery(query: string): boolean;
+export declare function useMinWidth(minWidth: number): boolean;
+/** Read once, at the moment an animation starts. */
+export declare function prefersReducedMotion(): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/utils/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/utils/useMediaQuery.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CA+BpD;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,oDAAoD;AACpD,wBAAgB,oBAAoB,IAAI,OAAO,CAM9C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "description": "Native-feeling router for React web apps: screen stacks with gesture-driven back, modals, sheets, tab bars, drawers and split views.",
   "license": "MIT",
   "author": "Sigmela",