@xh/hoist 72.0.0-SNAPSHOT.1737150473558 → 72.0.0-SNAPSHOT.1737472364423

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## v72.0.0-SNAPSHOT - unreleased
 
+### 💥 Breaking Changes
+
+* Mobile `Navigator` no longer supports `animation` prop, and `NavigatorModel` no longer supports
+  `swipeToGoBack`. Both of these properties are now managed internally by the `Navigator` component.
+
+### 🎁 New Features
+
+* Mobile `Navigator` has been rebuilt to support smooth swipe-based navigation. The API remains
+  largely the same, notwithstanding the minor breaking changes detailed above.
+
 ### 🐞 Bug Fixes
 
 * Fixed `ViewManagerModel` unique name validation.
@@ -11,7 +21,6 @@
 
 * Added support for providing custom `PersistenceProvider` implementations to `PersistOptions`.
 
-
 ### ⚙️ Typescript API Adjustments
 
 * Improved signature of `HoistBase.markPersist`.

package/build/types/kit/onsen/index.d.ts

@@ -4,5 +4,5 @@ import 'onsenui/css/onsenui.css';
 import { FunctionComponent } from 'react';
 import './styles.scss';
 import './theme.scss';
-export declare const button: ElementFactory, Button: FunctionComponent<{}>, checkbox: ElementFactory, Checkbox: FunctionComponent<{}>, gestureDetector: ElementFactory, GestureDetector: FunctionComponent<{}>, input: ElementFactory, Input: FunctionComponent<{}>, navigator: ElementFactory, Navigator: FunctionComponent<{}>, searchInput: ElementFactory, SearchInput: FunctionComponent<{}>, select: ElementFactory, Select: FunctionComponent<{}>, switchControl: ElementFactory, SwitchControl: FunctionComponent<{}>;
+export declare const button: ElementFactory, Button: FunctionComponent<{}>, checkbox: ElementFactory, Checkbox: FunctionComponent<{}>, gestureDetector: ElementFactory, GestureDetector: FunctionComponent<{}>, input: ElementFactory, Input: FunctionComponent<{}>, searchInput: ElementFactory, SearchInput: FunctionComponent<{}>, select: ElementFactory, Select: FunctionComponent<{}>, switchControl: ElementFactory, SwitchControl: FunctionComponent<{}>;
 export declare const dialog: ElementFactory, Dialog: FunctionComponent<{}>, listItem: ElementFactory, ListItem: FunctionComponent<{}>, page: ElementFactory, Page: FunctionComponent<{}>, tab: ElementFactory, Tab: FunctionComponent<{}>, tabbar: ElementFactory, Tabbar: FunctionComponent<{}>, toast: ElementFactory, Toast: FunctionComponent<{}>, toolbar: ElementFactory, Toolbar: FunctionComponent<{}>, bottomToolbar: ElementFactory, BottomToolbar: FunctionComponent<{}>;

package/build/types/kit/swiper/index.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { EffectCreative } from 'swiper/modules';
+import './styles.scss';
+export { Swiper, SwiperSlide, EffectCreative };
+export declare const swiper: import("@xh/hoist/core").ElementFactory<import("react").RefAttributes<import("swiper/react").SwiperRef> & Omit<import("react").HTMLAttributes<HTMLElement>, "onClick" | "onKeyPress" | "onProgress" | "onResize" | "onDoubleClick" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onScroll" | "onTransitionEnd"> & import("swiper/types").SwiperOptions & {
+    tag?: string;
+    wrapperTag?: string;
+    onSwiper?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onAutoplayStart?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onAutoplayStop?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onAutoplayPause?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onAutoplayResume?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onAutoplayTimeLeft?: (swiper: import("swiper/types/swiper-class").default, timeLeft: number, percentage: number) => void;
+    onAutoplay?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onHashChange?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onHashSet?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onKeyPress?: (swiper: import("swiper/types/swiper-class").default, keyCode: string) => void;
+    onScroll?: (swiper: import("swiper/types/swiper-class").default, event: WheelEvent) => void;
+    onScrollbarDragStart?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onScrollbarDragMove?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onScrollbarDragEnd?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onNavigationHide?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onNavigationShow?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onNavigationPrev?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onNavigationNext?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onPaginationRender?: (swiper: import("swiper/types/swiper-class").default, paginationEl: HTMLElement) => void;
+    onPaginationUpdate?: (swiper: import("swiper/types/swiper-class").default, paginationEl: HTMLElement) => void;
+    onPaginationHide?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onPaginationShow?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onZoomChange?: (swiper: import("swiper/types/swiper-class").default, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
+    onInit?: (swiper: import("swiper/types/swiper-class").default) => any;
+    onBeforeDestroy?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlidesUpdated?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlideChange?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlideChangeTransitionStart?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlideChangeTransitionEnd?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlideNextTransitionStart?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlideNextTransitionEnd?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlidePrevTransitionStart?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlidePrevTransitionEnd?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onTransitionStart?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onTransitionEnd?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onTouchStart?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onTouchMove?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onTouchMoveOpposite?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onSliderMove?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onTouchEnd?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onClick?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onTap?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onDoubleTap?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onProgress?: (swiper: import("swiper/types/swiper-class").default, progress: number) => void;
+    onReachBeginning?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onReachEnd?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onToEdge?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onFromEdge?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSetTranslate?: (swiper: import("swiper/types/swiper-class").default, translate: number) => void;
+    onSetTransition?: (swiper: import("swiper/types/swiper-class").default, transition: number) => void;
+    onResize?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onObserverUpdate?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onBeforeLoopFix?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onLoopFix?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onBreakpoint?: (swiper: import("swiper/types/swiper-class").default, breakpointParams: import("swiper/types").SwiperOptions) => void;
+    _beforeBreakpoint?: (swiper: import("swiper/types/swiper-class").default, breakpointParams: import("swiper/types").SwiperOptions) => void;
+    _containerClasses?: (swiper: import("swiper/types/swiper-class").default, classNames: string) => void;
+    _slideClass?: (swiper: import("swiper/types/swiper-class").default, slideEl: HTMLElement, classNames: string) => void;
+    _slideClasses?: (swiper: import("swiper/types/swiper-class").default, slides: {
+        slideEl: HTMLElement;
+        classNames: string;
+        index: number;
+    }[]) => void;
+    _swiper?: (swiper: import("swiper/types/swiper-class").default) => void;
+    _freeModeNoMomentumRelease?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onActiveIndexChange?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSnapIndexChange?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onRealIndexChange?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onAfterInit?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onBeforeInit?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onBeforeResize?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onBeforeSlideChangeStart?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onBeforeTransitionStart?: (swiper: import("swiper/types/swiper-class").default, speed: number, internal: any) => void;
+    onChangeDirection?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onDoubleClick?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onDestroy?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onMomentumBounce?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onOrientationchange?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlideResetTransitionStart?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlideResetTransitionEnd?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSliderFirstMove?: (swiper: import("swiper/types/swiper-class").default, event: TouchEvent) => void;
+    onSlidesLengthChange?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSlidesGridLengthChange?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onSnapGridLengthChange?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onUpdate?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onLock?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onUnlock?: (swiper: import("swiper/types/swiper-class").default) => void;
+} & {
+    children?: import("react").ReactNode;
+}>, swiperSlide: import("@xh/hoist/core").ElementFactory<import("swiper/react").SwiperSlideProps>;

package/build/types/mobile/cmp/navigator/Navigator.d.ts

@@ -1,13 +1,9 @@
 /// <reference types="react" />
-import { HoistProps } from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
+import './Navigator.scss';
 import { NavigatorModel } from './NavigatorModel';
-export interface NavigatorProps extends HoistProps<NavigatorModel> {
-    /** Set animation style or turn off, default 'slide'. */
-    animation?: 'slide' | 'lift' | 'fade' | 'none';
-}
 /**
  * Top-level Component within an application, responsible for rendering a stack of
  * pages and managing transitions between pages.
  */
-export declare const Navigator: import("react").FC<NavigatorProps>, navigator: import("@xh/hoist/core").ElementFactory<NavigatorProps>;
+export declare const Navigator: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<NavigatorModel>>, navigator: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<NavigatorModel>>;

package/build/types/mobile/cmp/navigator/NavigatorModel.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { HoistModel, RefreshMode, RenderMode } from '@xh/hoist/core';
+import { Swiper } from 'swiper/types';
 import '@xh/hoist/mobile/register';
 import { PageConfig, PageModel } from './PageModel';
 export interface NavigatorConfig {
@@ -10,10 +10,13 @@ export interface NavigatorConfig {
      * Viewing of each page will be tracked with the `oncePerSession` flag, to avoid duplication.
      */
     track?: boolean;
-    /** True to enable 'swipe to go back' functionality. */
-    swipeToGoBack?: boolean;
     /** True to enable 'pull down to refresh' functionality. */
     pullDownToRefresh?: boolean;
+    /**
+     * Time (in milliseconds) for the transition between pages on route change.
+     * Defaults to 500.
+     */
+    transitionMs?: number;
     /**
      * Strategy for rendering pages. Can be set per-page via `PageModel.renderMode`.
      * See enum for description of supported modes.
@@ -26,7 +29,7 @@ export interface NavigatorConfig {
     refreshMode?: RefreshMode;
 }
 /**
- * Model for handling stack-based navigation between Onsen pages.
+ * Model for handling stack-based navigation between pages.
  * Provides support for routing based navigation.
  */
 export declare class NavigatorModel extends HoistModel {
@@ -34,22 +37,26 @@ export declare class NavigatorModel extends HoistModel {
     stack: PageModel[];
     pages: PageConfig[];
     track: boolean;
-    swipeToGoBack: boolean;
     pullDownToRefresh: boolean;
+    transitionMs: number;
     renderMode: RenderMode;
     refreshMode: RefreshMode;
-    private _navigator;
+    private _swiper;
     private _callback;
-    private _prevKeyStack;
+    private _touchStartX;
     get activePageId(): string;
     get activePage(): PageModel;
-    constructor({ pages, track, swipeToGoBack, pullDownToRefresh, renderMode, refreshMode }: NavigatorConfig);
+    get activePageIdx(): number;
+    get allowSlideNext(): boolean;
+    get allowSlidePrev(): boolean;
+    constructor({ pages, track, pullDownToRefresh, transitionMs, renderMode, refreshMode }: NavigatorConfig);
     /**
      * @param callback - function to execute (once) after the next page transition.
      */
     setCallback(callback: () => void): void;
-    private onRouteChange;
-    private onStackChangeAsync;
-    renderPage: (model: any, navigator: any) => import("react").ReactElement<import("@xh/hoist/core").DefaultHoistProps<PageModel>, any>;
+    /** @internal */
+    setSwiper(swiper: Swiper): void;
+    /** @internal */
     onPageChange: () => void;
+    private onRouteChange;
 }

package/build/types/mobile/cmp/navigator/impl/GestureRefresh.d.ts

@@ -0,0 +1,8 @@
+import './GestureRefresh.scss';
+import { GestureRefreshModel } from './GestureRefreshModel';
+/**
+ * Wrap the Navigator with gesture that triggers a refresh by pulling down.
+ *
+ * @internal
+ */
+export declare const gestureRefresh: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<GestureRefreshModel>>;

package/build/types/mobile/cmp/navigator/impl/{swipe/SwiperModel.d.ts → GestureRefreshModel.d.ts}

@@ -1,16 +1,10 @@
 import { HoistModel } from '@xh/hoist/core';
-import './Swiper.scss';
 /**
  * @internal
  */
-export declare class SwiperModel extends HoistModel {
+export declare class GestureRefreshModel extends HoistModel {
     navigatorModel: any;
-    backProgress: any;
     refreshProgress: any;
-    get backStarted(): boolean;
-    get backCompleted(): boolean;
-    backStart(): void;
-    backEnd(): void;
     get refreshStarted(): boolean;
     get refreshCompleted(): boolean;
     refreshStart(): void;
@@ -19,5 +13,4 @@ export declare class SwiperModel extends HoistModel {
     onDragStart: (e: any) => void;
     onDrag: (e: any) => void;
     onDragEnd: (e: any) => void;
-    isDraggingChild(e: any, dir: any): boolean;
 }

package/build/types/mobile/cmp/navigator/impl/Utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ */
+export declare function hasScrollableParent(e: TouchEvent, axis: 'horizontal' | 'vertical'): boolean;
+export declare function findScrollableParent(e: TouchEvent, axis: 'horizontal' | 'vertical'): HTMLElement;
+export declare function isScrollableEl(el: HTMLElement, axis: 'horizontal' | 'vertical'): boolean;
+export declare function hasDraggableParent(e: TouchEvent, direction: 'up' | 'right' | 'down' | 'left'): boolean;
+export declare function findDraggableParent(e: TouchEvent, direction: 'up' | 'right' | 'down' | 'left'): HTMLElement;
+export declare function isDraggableEl(el: HTMLElement, direction: 'up' | 'right' | 'down' | 'left'): boolean;

package/cmp/ag-grid/AgGrid.scss

@@ -26,6 +26,12 @@
   .ag-floating-bottom {
     overflow-y: hidden !important;
   }
+
+  // Prevent the "bounce" overscroll effect for horizontal scrolling on mobile devices, as it
+  // conflicts with the drag management in the Navigator.
+  .ag-center-cols-viewport {
+    overscroll-behavior-x: none;
+  }
 }
 
 // Ag-Grid themes referenced here to help ensure a high enough level of specificity for our rules.

package/kit/onsen/index.ts

@@ -23,7 +23,6 @@ export const [button, Button] = wrappedCmp(ons.Button),
     [checkbox, Checkbox] = wrappedCmp(ons.Checkbox),
     [gestureDetector, GestureDetector] = wrappedCmp(ons.GestureDetector),
     [input, Input] = wrappedCmp(ons.Input),
-    [navigator, Navigator] = wrappedCmp(ons.Navigator),
     [searchInput, SearchInput] = wrappedCmp(ons.SearchInput),
     [select, Select] = wrappedCmp(ons.Select),
     [switchControl, SwitchControl] = wrappedCmp(ons.Switch);

package/kit/onsen/theme.scss

@@ -11,15 +11,10 @@
 // Override styles provided in onsenui.css and onsen-css-components.css to use variable declarations
 body.xh-app.xh-mobile {
   // Background
-  .page,
-  .page__content,
-  .page__background,
   .textarea {
     background-color: var(--xh-bg);
   }
 
-  .page--material,
-  .page--material__background,
   .bottom-bar,
   .tabbar {
     background-color: var(--xh-bg-alt);

package/kit/swiper/index.ts

@@ -0,0 +1,14 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+import {elementFactory} from '@xh/hoist/core';
+import {Swiper, SwiperSlide} from 'swiper/react';
+import {EffectCreative} from 'swiper/modules';
+import './styles.scss';
+
+export {Swiper, SwiperSlide, EffectCreative};
+export const swiper = elementFactory(Swiper),
+    swiperSlide = elementFactory(SwiperSlide);

package/kit/swiper/styles.scss

@@ -0,0 +1,2 @@
+@import 'swiper/scss';
+@import 'swiper/scss/effect-creative';

package/mobile/cmp/navigator/Navigator.scss

@@ -0,0 +1,20 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+.xh-navigator {
+  width: 100%;
+  height: 100%;
+
+  .swiper-slide {
+    box-shadow:
+      0 0 0 1px var(--xh-border-color),
+      0 0 20px rgba(0, 0, 0, 0.3);
+  }
+
+  .div.swiper-container {
+    touch-action: pan-x;
+  }
+}

package/mobile/cmp/navigator/Navigator.ts

@@ -4,36 +4,53 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {hoistCmp, HoistProps, uses} from '@xh/hoist/core';
-import {navigator as onsenNavigator} from '@xh/hoist/kit/onsen';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {swiper, swiperSlide, EffectCreative} from '@xh/hoist/kit/swiper';
 import '@xh/hoist/mobile/register';
-import {swiper} from './impl/swipe/Swiper';
+import './Navigator.scss';
 import {NavigatorModel} from './NavigatorModel';
-
-export interface NavigatorProps extends HoistProps<NavigatorModel> {
-    /** Set animation style or turn off, default 'slide'. */
-    animation?: 'slide' | 'lift' | 'fade' | 'none';
-}
+import {PageModel} from './PageModel';
+import {gestureRefresh} from './impl/GestureRefresh';
+import {page} from './impl/Page';
 
 /**
  * Top-level Component within an application, responsible for rendering a stack of
  * pages and managing transitions between pages.
  */
-export const [Navigator, navigator] = hoistCmp.withFactory<NavigatorProps>({
+export const [Navigator, navigator] = hoistCmp.withFactory<NavigatorModel>({
     displayName: 'Navigator',
     model: uses(NavigatorModel),
     className: 'xh-navigator',
-
-    render({model, className, animation = 'slide'}) {
-        return swiper(
-            onsenNavigator({
+    render({model, className}) {
+        const {stack, allowSlideNext, allowSlidePrev} = model;
+        return gestureRefresh(
+            swiper({
                 className,
-                initialRoute: {init: true},
-                animation,
-                animationOptions: {duration: 0.2, delay: 0, timing: 'ease-in'},
-                renderPage: model.renderPage,
-                onPostPush: model.onPageChange,
-                onPostPop: model.onPageChange
+                allowSlideNext,
+                allowSlidePrev,
+                slidesPerView: 1,
+                modules: [EffectCreative],
+                effect: 'creative',
+                creativeEffect: {
+                    prev: {
+                        shadow: true,
+                        translate: ['-15%', 0, -1]
+                    },
+                    next: {
+                        translate: ['100%', 0, 0]
+                    }
+                },
+                onSwiper: swiper => model.setSwiper(swiper),
+                items: stack.map(it => {
+                    const {key} = it as PageModel;
+                    return swiperSlide({
+                        key: `slide-${key}`,
+                        item: page({
+                            key: `page-${key}`,
+                            model: it
+                        })
+                    });
+                })
             })
         );
     }