@sigmela/router 0.7.1 → 0.8.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;
@@ -238,7 +242,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,17 +474,17 @@ 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']
@@ -583,8 +588,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 +819,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 +845,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 +877,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.7.1",
+  "version": "0.8.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",