@rdlabo/ionic-theme-ios26 1.3.2 → 2.0.0

package/src/focus-controller /index.ts

@@ -0,0 +1,123 @@
+import { config } from '../utils';
+// import { printIonWarning} from '@ionic/core/dist/types/utils/logging';
+
+/**
+ * Moves focus to a specified element. Note that we do not remove the tabindex
+ * because that can result in an unintentional blur. Non-focusables can't be
+ * focused, so the body will get focused again.
+ */
+const moveFocus = (el: HTMLElement) => {
+  el.tabIndex = -1;
+  el.focus();
+};
+
+/**
+ * Elements that are hidden using `display: none` should not be focused even if
+ * they are present in the DOM.
+ */
+const isVisible = (el: HTMLElement) => {
+  return el.offsetParent !== null;
+};
+
+/**
+ * The focus controller allows us to manage focus within a view so assistive
+ * technologies can inform users of changes to the navigation state. Traditional
+ * native apps have a way of informing assistive technology about a navigation
+ * state change. Mobile browsers have this too, but only when doing a full page
+ * load. In a single page app we do not do that, so we need to build this
+ * integration ourselves.
+ */
+export const createFocusController = (): FocusController => {
+  const saveViewFocus = (referenceEl?: HTMLElement) => {
+    const focusManagerEnabled = config.get('focusManagerPriority', false);
+
+    /**
+     * When going back to a previously visited page focus should typically be moved
+     * back to the element that was last focused when the user was on this view.
+     */
+    if (focusManagerEnabled) {
+      const activeEl = document.activeElement;
+      if (activeEl !== null && referenceEl?.contains(activeEl)) {
+        activeEl.setAttribute(LAST_FOCUS, 'true');
+      }
+    }
+  };
+
+  const setViewFocus = (referenceEl: HTMLElement) => {
+    const focusManagerPriorities = config.get('focusManagerPriority', false);
+    /**
+     * If the focused element is a descendant of the referenceEl then it's possible
+     * that the app developer manually moved focus, so we do not want to override that.
+     * This can happen with inputs the are focused when a view transitions in.
+     */
+    if (Array.isArray(focusManagerPriorities) && !referenceEl.contains(document.activeElement)) {
+      /**
+       * When going back to a previously visited view focus should always be moved back
+       * to the element that the user was last focused on when they were on this view.
+       */
+      const lastFocus = referenceEl.querySelector<HTMLElement>(`[${LAST_FOCUS}]`);
+      if (lastFocus && isVisible(lastFocus)) {
+        moveFocus(lastFocus);
+        return;
+      }
+
+      for (const priority of focusManagerPriorities) {
+        /**
+         * For each recognized case (excluding the default case) make sure to return
+         * so that the fallback focus behavior does not run.
+         *
+         * We intentionally query for specific roles/semantic elements so that the
+         * transition manager can work with both Ionic and non-Ionic UI components.
+         *
+         * If new selectors are added, be sure to remove the outline ring by adding
+         * new selectors to rule in core.scss.
+         */
+        switch (priority) {
+          case 'content':
+            const content = referenceEl.querySelector<HTMLElement>('main, [role="main"]');
+            if (content && isVisible(content)) {
+              moveFocus(content);
+              return;
+            }
+            break;
+          case 'heading':
+            const headingOne = referenceEl.querySelector<HTMLElement>('h1, [role="heading"][aria-level="1"]');
+            if (headingOne && isVisible(headingOne)) {
+              moveFocus(headingOne);
+              return;
+            }
+            break;
+          case 'banner':
+            const header = referenceEl.querySelector<HTMLElement>('header, [role="banner"]');
+            if (header && isVisible(header)) {
+              moveFocus(header);
+              return;
+            }
+            break;
+          default:
+            // printIonWarning(`Unrecognized focus manager priority value ${priority}`);
+            break;
+        }
+      }
+
+      /**
+       * If there is nothing to focus then focus the page so focus at least moves to
+       * the correct view. The browser will then determine where within the page to
+       * move focus to.
+       */
+      moveFocus(referenceEl);
+    }
+  };
+
+  return {
+    saveViewFocus,
+    setViewFocus,
+  };
+};
+
+export type FocusController = {
+  saveViewFocus: (referenceEl?: HTMLElement) => void;
+  setViewFocus: (referenceEl: HTMLElement) => void;
+};
+
+const LAST_FOCUS = 'ion-last-focus';

package/src/popover/animations/ios.enter.ts

@@ -43,7 +43,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
   const results = getPopoverPosition(isRTL, contentWidth, contentHeight, reference, side, align, defaultPosition, trigger, ev);
 
   const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
-  const margin = size === 'cover' ? 0 : 25;
+  const margin = size === 'cover' ? 0 : POPOVER_IOS_BODY_MARGIN;
 
   const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, addPopoverBottomClass } = calculateWindowAdjustment(
     side,

package/src/popover/utils.ts

@@ -628,6 +628,9 @@ export const calculateWindowAdjustment = (
    */
   if (left < bodyPadding + safeAreaMargin) {
     left = !eventElementRect ? bodyPadding : eventElementRect.left;
+    if (left === 0) {
+      left = safeAreaMargin;
+    }
     checkSafeAreaLeft = true;
     originX = 'left';
     /**
@@ -637,6 +640,9 @@ export const calculateWindowAdjustment = (
   } else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
     checkSafeAreaRight = true;
     left = !eventElementRect ? bodyWidth - contentWidth - bodyPadding : eventElementRect.right - contentWidth;
+    if (left + contentWidth === bodyWidth) {
+      left = left - safeAreaMargin;
+    }
     originX = 'right';
   }
 

package/src/sheets-of-glass/index.ts

@@ -103,10 +103,13 @@ export const registerEffect = (
       }
     })();
     startAnimationPromise.then(() => {
+      if (!currentTouchedElement) {
+        return;
+      }
       moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition!);
       moveAnimation.progressStart(
         true,
-        getStep(currentTouchedElement!.getBoundingClientRect().left + currentTouchedElement!.clientWidth / 2, animationPosition!),
+        getStep(currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2, animationPosition!),
       );
     });
     getScaleAnimation(effectElement).duration(200).to('opacity', 1).to('transform', scales.large).play();
@@ -167,7 +170,10 @@ export const registerEffect = (
     }
 
     setTimeout(() => {
-      const targetX = currentTouchedElement!.getBoundingClientRect().left + currentTouchedElement!.clientWidth / 2;
+      if (!currentTouchedElement) {
+        return;
+      }
+      const targetX = currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2;
       const step = getStep(targetX, animationPosition!);
       moveAnimation!.progressStep(step);
     });

package/src/styles/components/ion-button.scss

@@ -377,7 +377,3 @@ ion-button.ios:not(.ios26-disabled) {
 ion-back-button.ios:not(.ios26-disabled) {
   @include theme-button;
 }
-
-ion-back-button.ion-cloned-element {
-  visibility: hidden;
-}

package/src/transition/index.ts

@@ -0,0 +1,369 @@
+import { config } from '../utils';
+import { Build, writeTask } from '@stencil/core';
+
+import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
+import type { NavOptions, NavDirection } from '@ionic/core';
+import type { Animation, AnimationBuilder } from '@ionic/core';
+import { createFocusController } from '../focus-controller ';
+import { raf } from '../utils';
+
+const iosTransitionAnimation = () => import('./ios.transition');
+// const mdTransitionAnimation = () => import('./md.transition');
+const focusController = createFocusController();
+
+// TODO(FW-2832): types
+
+/**
+ * Executes the main page transition.
+ * It also manages the lifecycle of header visibility (if any)
+ * to prevent visual flickering in iOS. The flickering only
+ * occurs for a condensed header that is placed above the content.
+ *
+ * @param opts Options for the transition.
+ * @returns A promise that resolves when the transition is complete.
+ */
+export const transition = (opts: TransitionOptions): Promise<TransitionResult> => {
+  return new Promise((resolve, reject) => {
+    writeTask(() => {
+      const transitioningInactiveHeader = getIosIonHeader(opts);
+      beforeTransition(opts, transitioningInactiveHeader);
+      runTransition(opts)
+        .then(
+          (result) => {
+            if (result.animation) {
+              result.animation.destroy();
+            }
+            afterTransition(opts);
+            resolve(result);
+          },
+          (error) => {
+            afterTransition(opts);
+            reject(error);
+          },
+        )
+        .finally(() => {
+          // Ensure that the header is restored to its original state.
+          setHeaderTransitionClass(transitioningInactiveHeader, false);
+        });
+    });
+  });
+};
+
+const beforeTransition = (opts: TransitionOptions, transitioningInactiveHeader: HTMLElement | null) => {
+  const enteringEl = opts.enteringEl;
+  const leavingEl = opts.leavingEl;
+
+  focusController.saveViewFocus(leavingEl);
+
+  setZIndex(enteringEl, leavingEl, opts.direction);
+  // Prevent flickering of the header by adding a class.
+  setHeaderTransitionClass(transitioningInactiveHeader, true);
+
+  if (opts.showGoBack) {
+    enteringEl.classList.add('can-go-back');
+  } else {
+    enteringEl.classList.remove('can-go-back');
+  }
+  setPageHidden(enteringEl, false);
+
+  /**
+   * When transitioning, the page should not
+   * respond to click events. This resolves small
+   * issues like users double tapping the ion-back-button.
+   * These pointer events are removed in `afterTransition`.
+   */
+  enteringEl.style.setProperty('pointer-events', 'none');
+
+  if (leavingEl) {
+    setPageHidden(leavingEl, false);
+    leavingEl.style.setProperty('pointer-events', 'none');
+  }
+};
+
+const runTransition = async (opts: TransitionOptions): Promise<TransitionResult> => {
+  const animationBuilder = await getAnimationBuilder(opts);
+
+  const ani = animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation
+
+  return ani;
+};
+
+const afterTransition = (opts: TransitionOptions) => {
+  const enteringEl = opts.enteringEl;
+  const leavingEl = opts.leavingEl;
+  enteringEl.classList.remove('ion-page-invisible');
+  enteringEl.style.removeProperty('pointer-events');
+  if (leavingEl !== undefined) {
+    leavingEl.classList.remove('ion-page-invisible');
+    leavingEl.style.removeProperty('pointer-events');
+  }
+
+  focusController.setViewFocus(enteringEl);
+};
+
+const getAnimationBuilder = async (opts: TransitionOptions): Promise<AnimationBuilder | undefined> => {
+  if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
+    return undefined;
+  }
+
+  if (opts.animationBuilder) {
+    return opts.animationBuilder;
+  }
+
+  const getAnimation =
+    // opts.mode === 'ios'
+    (await iosTransitionAnimation()).iosTransitionAnimation;
+  // : (await mdTransitionAnimation()).mdTransitionAnimation;
+
+  return getAnimation;
+};
+
+const animation = async (animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise<TransitionResult> => {
+  await waitForReady(opts, true);
+
+  const trans = animationBuilder(opts.baseEl, opts);
+
+  fireWillEvents(opts.enteringEl, opts.leavingEl);
+
+  const didComplete = await playTransition(trans, opts);
+
+  if (opts.progressCallback) {
+    opts.progressCallback(undefined);
+  }
+
+  if (didComplete) {
+    fireDidEvents(opts.enteringEl, opts.leavingEl);
+  }
+
+  return {
+    hasCompleted: didComplete,
+    animation: trans,
+  };
+};
+
+const noAnimation = async (opts: TransitionOptions): Promise<TransitionResult> => {
+  const enteringEl = opts.enteringEl;
+  const leavingEl = opts.leavingEl;
+  const focusManagerEnabled = config.get('focusManagerPriority', false);
+
+  /**
+   * If the focus manager is enabled then we need to wait for Ionic components to be
+   * rendered otherwise the component to focus may not be focused because it is hidden.
+   */
+  await waitForReady(opts, focusManagerEnabled);
+
+  fireWillEvents(enteringEl, leavingEl);
+  fireDidEvents(enteringEl, leavingEl);
+
+  return {
+    hasCompleted: true,
+  };
+};
+
+const waitForReady = async (opts: TransitionOptions, defaultDeep: boolean) => {
+  const deep = opts.deepWait !== undefined ? opts.deepWait : defaultDeep;
+
+  if (deep) {
+    await Promise.all([deepReady(opts.enteringEl), deepReady(opts.leavingEl)]);
+  }
+
+  await notifyViewReady(opts.viewIsReady, opts.enteringEl);
+};
+
+const notifyViewReady = async (viewIsReady: undefined | ((enteringEl: HTMLElement) => Promise<any>), enteringEl: HTMLElement) => {
+  if (viewIsReady) {
+    await viewIsReady(enteringEl);
+  }
+};
+
+const playTransition = (trans: Animation, opts: TransitionOptions): Promise<boolean> => {
+  const progressCallback = opts.progressCallback;
+
+  const promise = new Promise<boolean>((resolve) => {
+    trans.onFinish((currentStep: any) => resolve(currentStep === 1));
+  });
+
+  // cool, let's do this, start the transition
+  if (progressCallback) {
+    // this is a swipe to go back, just get the transition progress ready
+    // kick off the swipe animation start
+    trans.progressStart(true);
+    progressCallback(trans);
+  } else {
+    // only the top level transition should actually start "play"
+    // kick it off and let it play through
+    // ******** DOM WRITE ****************
+    trans.play();
+  }
+  // create a callback for when the animation is done
+  return promise;
+};
+
+const fireWillEvents = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined) => {
+  lifecycle(leavingEl, LIFECYCLE_WILL_LEAVE);
+  lifecycle(enteringEl, LIFECYCLE_WILL_ENTER);
+};
+
+const fireDidEvents = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined) => {
+  lifecycle(enteringEl, LIFECYCLE_DID_ENTER);
+  lifecycle(leavingEl, LIFECYCLE_DID_LEAVE);
+};
+
+export const lifecycle = (el: HTMLElement | undefined, eventName: string) => {
+  if (el) {
+    const ev = new CustomEvent(eventName, {
+      bubbles: false,
+      cancelable: false,
+    });
+    el.dispatchEvent(ev);
+  }
+};
+
+/**
+ * Wait two request animation frame loops.
+ * This allows the framework implementations enough time to mount
+ * the user-defined contents. This is often needed when using inline
+ * modals and popovers that accept user components. For popover,
+ * the contents must be mounted for the popover to be sized correctly.
+ * For modals, the contents must be mounted for iOS to run the
+ * transition correctly.
+ *
+ * On Angular and React, a single raf is enough time, but for Vue
+ * we need to wait two rafs. As a result we are using two rafs for
+ * all frameworks to ensure contents are mounted.
+ */
+export const waitForMount = (): Promise<void> => {
+  return new Promise((resolve) => raf(() => raf(() => resolve())));
+};
+
+export const deepReady = async (el: any | undefined): Promise<void> => {
+  const element = el as any;
+  if (element) {
+    if (element.componentOnReady != null) {
+      // eslint-disable-next-line custom-rules/no-component-on-ready-method
+      const stencilEl = await element.componentOnReady();
+      if (stencilEl != null) {
+        return;
+      }
+
+      /**
+       * Custom elements in Stencil will have __registerHost.
+       */
+    } else if (element.__registerHost != null) {
+      /**
+       * Non-lazy loaded custom elements need to wait
+       * one frame for component to be loaded.
+       */
+      const waitForCustomElement = new Promise((resolve) => raf(resolve));
+      await waitForCustomElement;
+
+      return;
+    }
+    await Promise.all(Array.from(element.children).map(deepReady));
+  }
+};
+
+export const setPageHidden = (el: HTMLElement, hidden: boolean) => {
+  if (hidden) {
+    el.setAttribute('aria-hidden', 'true');
+    el.classList.add('ion-page-hidden');
+  } else {
+    el.hidden = false;
+    el.removeAttribute('aria-hidden');
+    el.classList.remove('ion-page-hidden');
+  }
+};
+
+const setZIndex = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined, direction: NavDirection | undefined) => {
+  if (enteringEl !== undefined) {
+    enteringEl.style.zIndex = direction === 'back' ? '99' : '101';
+  }
+  if (leavingEl !== undefined) {
+    leavingEl.style.zIndex = '100';
+  }
+};
+
+/**
+ * Add a class to ensure that the header (if any)
+ * does not flicker during the transition. By adding the
+ * transitioning class, we ensure that the header has
+ * the necessary styles to prevent the following flickers:
+ * 1. When entering a page with a condensed header, the
+ * header should never be visible. However,
+ * it briefly renders the background color while
+ * the transition is occurring.
+ * 2. When leaving a page with a condensed header, the
+ * header has an opacity of 0 and the pages
+ * have a z-index which causes the entering page to
+ * briefly show it's content underneath the leaving page.
+ * 3. When entering a page or leaving a page with a fade
+ * header, the header should not have a background color.
+ * However, it briefly shows the background color while
+ * the transition is occurring.
+ *
+ * @param header The header element to modify.
+ * @param isTransitioning Whether the transition is occurring.
+ */
+const setHeaderTransitionClass = (header: HTMLElement | null, isTransitioning: boolean) => {
+  if (!header) {
+    return;
+  }
+
+  const transitionClass = 'header-transitioning';
+  if (isTransitioning) {
+    header.classList.add(transitionClass);
+  } else {
+    header.classList.remove(transitionClass);
+  }
+};
+
+export const getIonPageElement = (element: HTMLElement) => {
+  if (element.classList.contains('ion-page')) {
+    return element;
+  }
+
+  const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
+  if (ionPage) {
+    return ionPage;
+  }
+  // idk, return the original element so at least something animates and we don't have a null pointer
+  return element;
+};
+
+/**
+ * Retrieves the ion-header element from a page based on the
+ * direction of the transition.
+ *
+ * @param opts Options for the transition.
+ * @returns The ion-header element or null if not found or not in 'ios' mode.
+ */
+const getIosIonHeader = (opts: TransitionOptions): HTMLElement | null => {
+  const enteringEl = opts.enteringEl;
+  const leavingEl = opts.leavingEl;
+  const direction = opts.direction;
+  const mode = opts.mode;
+
+  if (mode !== 'ios') {
+    return null;
+  }
+
+  const element = direction === 'back' ? leavingEl : enteringEl;
+
+  if (!element) {
+    return null;
+  }
+
+  return element.querySelector('ion-header');
+};
+
+export interface TransitionOptions extends NavOptions {
+  progressCallback?: (ani: Animation | undefined) => void;
+  baseEl: any;
+  enteringEl: HTMLElement;
+  leavingEl: HTMLElement | undefined;
+}
+
+export interface TransitionResult {
+  hasCompleted: boolean;
+  animation?: Animation;
+}