@rdlabo/capacitor-native-ui 0.0.0-stage → 1.2.1

package/src/native/overlays/dialog-animation.ts

@@ -0,0 +1,53 @@
+import type { Animation } from '@ionic/core';
+import { createAnimation } from '@ionic/core/components/index.js';
+import { iosPopoverEnterAnimation } from '@rdlabo/ionic-theme-utils';
+import type { Frame } from '../definitions';
+import { dismissAnimation } from './dismiss-animation';
+
+export type Dialog = HTMLIonPopoverElement;
+
+/** Prepare the source's final layout while SwiftUI owns visible motion. */
+export const nativeDialogAnimation = (overlay: Dialog, close: () => Promise<void>, anchor: Promise<Frame | undefined>) => {
+  const enterAnimation = overlay.enterAnimation;
+  const builder = enterAnimation ?? iosPopoverEnterAnimation;
+  overlay.enterAnimation = (base, options) => {
+    const animation = createAnimation();
+    const play = animation.play;
+    animation.play = async () => {
+      const frame = await anchor;
+      const proxy = overlay.ownerDocument.createElement('ion-button');
+      if (frame) proxy.getBoundingClientRect = () => new DOMRect(frame.x, frame.y, frame.width, frame.height);
+      // The real trigger is display:none while projected. Use only a detached
+      // measurement proxy; never replace or mutate the application's button.
+      const positioned = frame ? { ...options, trigger: proxy } : options;
+      animation.addAnimation(builder(base, positioned));
+      const finishWithoutMotion = (item: Animation) => {
+        item.duration(0).delay(0);
+        item.childAnimations.forEach(finishWithoutMotion);
+      };
+      finishWithoutMotion(animation);
+      // Ionic owns this wrapper and destroys its children on dismissal.
+      await play({ sync: true });
+    };
+    return animation;
+  };
+  const leaveAnimation = overlay.leaveAnimation;
+  const opacity = overlay.style.opacity;
+  const event = 'ionPopoverWillDismiss';
+  const dismiss = () => {
+    const closing = close();
+    overlay.leaveAnimation = () => dismissAnimation(closing);
+  };
+  overlay.addEventListener(event, dismiss);
+  return {
+    hide() {
+      overlay.style.opacity = '0';
+    },
+    stop() {
+      overlay.removeEventListener(event, dismiss);
+      overlay.enterAnimation = enterAnimation;
+      overlay.leaveAnimation = leaveAnimation;
+      overlay.style.opacity = opacity;
+    },
+  };
+};

package/src/native/overlays/dismiss-animation.ts

@@ -0,0 +1,15 @@
+import { createAnimation } from '@ionic/core/components/index.js';
+
+/** Let Ionic finish dismissal after the native presentation has closed. */
+export const dismissAnimation = (closing: Promise<void>) => {
+  const animation = createAnimation();
+  const play = animation.play;
+  animation.play = async (options) => {
+    // A native failure must not suppress Ionic's didDismiss event/data.
+    await closing.catch((error) => {
+      console.error('Native popover dismissal failed; completing the Ionic lifecycle.', error);
+    });
+    await play(options);
+  };
+  return animation;
+};

package/src/native/overlays/focus.ts

@@ -0,0 +1,64 @@
+export const activeElement = (doc: Document): Element | null => {
+  let element = doc.activeElement;
+  while (element?.shadowRoot?.activeElement) element = element.shadowRoot.activeElement;
+  return element;
+};
+
+const focusableElements = (root: HTMLElement): HTMLElement[] => {
+  const elements: HTMLElement[] = [];
+  const win = root.ownerDocument.defaultView!;
+  const collect = (scope: HTMLElement | ShadowRoot) => {
+    for (const node of Array.from(scope.querySelectorAll<HTMLElement>('*'))) {
+      if (node.inert || node.closest('[inert]') || (node as HTMLButtonElement).disabled) continue;
+      const before = elements.length;
+      if (node.shadowRoot) collect(node.shadowRoot);
+      const css = win.getComputedStyle(node);
+      if (
+        elements.length === before &&
+        node.tabIndex >= 0 &&
+        !node.hidden &&
+        css.display !== 'none' &&
+        css.visibility !== 'hidden' &&
+        node.getClientRects().length
+      )
+        elements.push(node);
+    }
+  };
+  collect(root);
+  return elements
+    .map((element, index) => ({ element, index }))
+    .sort((a, b) => (a.element.tabIndex || Infinity) - (b.element.tabIndex || Infinity) || a.index - b.index)
+    .map(({ element }) => element);
+};
+
+export const trapFocus = (root: HTMLElement, enabled: () => boolean): (() => void) => {
+  const doc = root.ownerDocument;
+  const previous = root.getAttribute('tabindex');
+  root.tabIndex = -1;
+  let last: Element | null;
+  const onFocus = (event: FocusEvent) => {
+    if (!enabled()) return;
+    if (event.composedPath().includes(root)) {
+      last = activeElement(doc);
+      return;
+    }
+    const elements = focusableElements(root);
+    (elements.find((element) => element === last) ?? elements[0] ?? root).focus({ preventScroll: true });
+  };
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey || !enabled()) return;
+    const elements = focusableElements(root);
+    const index = elements.findIndex((element) => element === activeElement(doc));
+    const next = event.shiftKey ? (index <= 0 ? elements.length - 1 : index - 1) : (index + 1) % elements.length;
+    event.preventDefault();
+    (elements[next] ?? root).focus();
+  };
+  doc.addEventListener('focusin', onFocus, true);
+  doc.addEventListener('keydown', onKey, true);
+  return () => {
+    doc.removeEventListener('focusin', onFocus, true);
+    doc.removeEventListener('keydown', onKey, true);
+    if (previous === null) root.removeAttribute('tabindex');
+    else root.setAttribute('tabindex', previous);
+  };
+};

package/src/native/overlays/popover.ts

@@ -0,0 +1,120 @@
+import type { NativeUIPopoverPresentation } from '../definitions';
+import { projectionIds } from '../shared/projection-id';
+import { isDark } from '../shared/dom';
+import { moveContent } from './content';
+import { captureRelayAppearance, sheetText } from './styles';
+
+export const popoverTrigger = (overlay: HTMLIonPopoverElement): Element | undefined => {
+  const event = overlay.event as MouseEvent | undefined;
+  const target = (overlay.trigger ? overlay.ownerDocument.getElementById(overlay.trigger) : event?.target) as Element | undefined;
+  return target?.closest?.('ion-button,ion-fab-button,ion-item') ?? target;
+};
+
+/** Only accepted native rail buttons can retain the page projection. */
+export const verticalBarsPopoverAnchor = (overlay: HTMLIonPopoverElement): string | undefined => {
+  const trigger = popoverTrigger(overlay);
+  if (
+    !trigger?.matches('ion-button[data-native-ui-vertical-bars-member]') ||
+    !trigger.closest('[data-native-ui-projected]') ||
+    (trigger as HTMLIonButtonElement).disabled
+  )
+    return undefined;
+  return projectionIds.get(trigger);
+};
+
+export const popoverPresentation = (overlay: HTMLIonPopoverElement): NativeUIPopoverPresentation => {
+  const content = overlay.shadowRoot!.querySelector<HTMLElement>('.popover-content')!;
+  const rect = content.getBoundingClientRect();
+  const anchorId = verticalBarsPopoverAnchor(overlay);
+  if (!anchorId) throw new Error('Native Vertical Bars anchor unavailable');
+  return {
+    kind: 'popover',
+    animated: overlay.animated,
+    dark: isDark(overlay.ownerDocument.defaultView!.getComputedStyle(overlay)),
+    anchorId,
+    width: rect.width,
+    height: rect.height,
+    backgroundColor: overlay.ownerDocument.defaultView!.getComputedStyle(content).backgroundColor,
+    backdropDismiss: overlay.backdropDismiss,
+  };
+};
+
+export const relayPopover = (overlay: HTMLIonPopoverElement, destination: HTMLElement) => {
+  const doc = destination.ownerDocument;
+  const source = overlay.shadowRoot!.querySelector<HTMLElement>('.popover-content')!;
+  const content = Array.from(source.querySelector('slot')!.assignedElements()) as HTMLElement[];
+  const matchesSourceAppearance = captureRelayAppearance(content);
+  const size = source.getBoundingClientRect();
+  const root = doc.createElement('ion-popover');
+  for (const attribute of Array.from(overlay.attributes)) root.setAttribute(attribute.name, attribute.value);
+  Object.assign(root.style, {
+    position: 'absolute',
+    inset: '0',
+    display: 'block',
+    visibility: 'visible',
+    opacity: '1',
+    pointerEvents: 'auto',
+  });
+  root.setAttribute('role', 'dialog');
+  root.setAttribute('aria-modal', 'true');
+  const shadow = root.attachShadow({ mode: 'open' });
+  const inheritedStyles = doc.createElement('style');
+  inheritedStyles.textContent =
+    sheetText(overlay.shadowRoot!.adoptedStyleSheets) +
+    Array.from(overlay.shadowRoot!.querySelectorAll('style'), (style) => style.textContent).join('\n');
+  shadow.append(inheritedStyles);
+  const shell = doc.createElement('div');
+  shell.className = 'popover-content';
+  const css = overlay.ownerDocument.defaultView!.getComputedStyle(source);
+  Object.assign(shell.style, {
+    position: 'relative',
+    // Ionic hides this shell until its Web enter animation runs. SwiftUI owns
+    // the relay animation, so its content must already be opaque.
+    opacity: '1',
+    boxSizing: 'border-box',
+    inset: 'auto',
+    width: '100%',
+    maxWidth: 'none',
+    height: '100%',
+    maxHeight: 'none',
+    transform: 'none',
+    boxShadow: 'none',
+    border: css.border,
+    borderColor: 'transparent',
+    borderRadius: '0',
+    overflow: css.overflow,
+    background: css.backgroundColor,
+  });
+  shell.append(doc.createElement('slot'));
+  shadow.append(shell);
+  destination.append(root);
+  // Components such as ion-select-popover dismiss their closest ion-popover.
+  root.dismiss = (...args) => overlay.dismiss(...args);
+  const restore = moveContent(content, root);
+  const select = (event: MouseEvent) => {
+    if (!event.composedPath().includes(shell)) {
+      if (overlay.backdropDismiss) void overlay.dismiss(undefined, 'backdrop');
+    } else if (overlay.dismissOnSelect) void overlay.dismiss();
+  };
+  root.addEventListener('click', select);
+  return {
+    root,
+    matchesSourceAppearance() {
+      const previousWidth = root.style.width;
+      const previousHeight = root.style.height;
+      root.style.width = `${size.width}px`;
+      root.style.height = `${size.height}px`;
+      try {
+        return matchesSourceAppearance();
+      } finally {
+        root.style.width = previousWidth;
+        root.style.height = previousHeight;
+      }
+    },
+    stop() {
+      root.removeEventListener('click', select);
+      restore();
+      root.remove();
+    },
+  };
+};

package/src/native/overlays/styles.ts

@@ -0,0 +1,181 @@
+export const sheetText = (sheets: readonly CSSStyleSheet[]): string =>
+  sheets.flatMap((sheet) => Array.from(sheet.cssRules, (rule) => rule.cssText)).join('\n');
+
+export const relayStyles = (
+  source: Document,
+  destination: Document,
+  overlay: HTMLElement,
+  changed?: () => void,
+): { destination: HTMLElement; ready: Promise<void>; stop: () => void } => {
+  const base = destination.createElement('base');
+  base.href = source.baseURI;
+  destination.head.append(base);
+  const copies = new Map<Element, Element>();
+  const sheets = destination.createElement('style');
+  destination.head.append(sheets);
+  const sync = () => {
+    sheets.textContent = sheetText(source.adoptedStyleSheets);
+    const sources = Array.from(source.querySelectorAll('meta[name=viewport],link[rel=stylesheet],style:not([data-overlay-relay-local])'));
+    for (const [node, copy] of copies)
+      if (!sources.includes(node)) {
+        copy.remove();
+        copies.delete(node);
+      }
+    for (const node of sources) {
+      let copy = copies.get(node);
+      if (!copy) {
+        copy = node.cloneNode(true) as Element;
+        copies.set(node, copy);
+      } else {
+        for (const attribute of Array.from(copy.attributes)) copy.removeAttribute(attribute.name);
+        for (const attribute of Array.from(node.attributes)) copy.setAttribute(attribute.name, attribute.value);
+        copy.textContent = node.textContent;
+      }
+      destination.head.append(copy);
+    }
+    destination.head.append(surface);
+  };
+  const surface = destination.createElement('style');
+  surface.textContent = 'html,body{background:transparent!important}';
+  const observers: MutationObserver[] = [];
+  const mirror = (node: Element, target: HTMLElement, flatten = false) => {
+    const update = () => {
+      for (const attribute of Array.from(target.attributes)) if (!node.hasAttribute(attribute.name)) target.removeAttribute(attribute.name);
+      for (const attribute of Array.from(node.attributes)) target.setAttribute(attribute.name, attribute.value);
+      // The popover content must not inherit the source page's rail layout.
+      if (target.localName === 'ion-app') target.classList.remove('ios-theme-vertical-bars');
+      if (flatten) target.style.setProperty('display', 'contents', 'important');
+    };
+    update();
+    const observer = new MutationObserver(() => {
+      update();
+      changed?.();
+    });
+    observer.observe(node, { attributes: true });
+    observers.push(observer);
+  };
+  mirror(source.documentElement, destination.documentElement);
+  mirror(source.body, destination.body);
+  const ancestors: Element[] = [];
+  for (let node = overlay.parentElement; node && node !== source.body; node = node.parentElement) ancestors.unshift(node);
+  let parent = destination.body;
+  for (const node of ancestors) {
+    const shell = destination.createElement(node.localName);
+    mirror(node, shell, true);
+    parent.append(shell);
+    parent = shell;
+  }
+  sync();
+  // A copied external stylesheet can still be loading when Ionic's content is
+  // ready. Do not expose an unstyled first native frame (notably button sizes).
+  const ready = Promise.all(
+    Array.from(destination.querySelectorAll<HTMLLinkElement>('link[rel=stylesheet]'), (link) => {
+      if (link.sheet) return Promise.resolve();
+      return new Promise<void>((resolve, reject) => {
+        link.addEventListener('load', () => resolve(), { once: true });
+        link.addEventListener('error', () => reject(new Error('Popover stylesheet unavailable')), { once: true });
+      });
+    }),
+  ).then(() => undefined);
+  const observer = new MutationObserver(() => {
+    sync();
+    changed?.();
+  });
+  observer.observe(source.head, { subtree: true, childList: true, characterData: true, attributes: true });
+  observers.push(observer);
+  return { destination: parent, ready, stop: () => observers.forEach((item) => item.disconnect()) };
+};
+
+// Compare the live content at the same proposed size before exposing a native
+// surface. Ancestor/sibling selectors and container queries can change when
+// ancestor shells become display:contents; unsupported contexts stay on Web.
+export const captureRelayAppearance = (roots: Element[]): (() => boolean) => {
+  const properties = [
+    'display',
+    'position',
+    'box-sizing',
+    'color',
+    'background-color',
+    'background-image',
+    'background-size',
+    'background-position',
+    'box-shadow',
+    'visibility',
+    'opacity',
+    'transform',
+    'filter',
+    'overflow',
+    'text-decoration',
+    'font-family',
+    'font-size',
+    'font-weight',
+    'font-style',
+    'line-height',
+    'letter-spacing',
+    'text-align',
+    'text-transform',
+    'white-space',
+    'direction',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'border-top-width',
+    'border-right-width',
+    'border-bottom-width',
+    'border-left-width',
+    'border-top-color',
+    'border-radius',
+    'flex-direction',
+    'flex-wrap',
+    'justify-content',
+    'align-items',
+    'grid-template-columns',
+    'grid-template-rows',
+    'gap',
+    'width',
+    'height',
+  ];
+  const snapshots: { node: Element; values: string[] }[] = [];
+  const values = (node: Element) => {
+    const css = node.ownerDocument.defaultView!.getComputedStyle(node);
+    return properties.map((property) => css.getPropertyValue(property));
+  };
+  const visit = (node: Element) => {
+    if (snapshots.length >= 1000) throw new Error('Popover content too complex to verify native styling');
+    snapshots.push({ node, values: values(node) });
+    Array.from(node.children).forEach(visit);
+    if (node.shadowRoot)
+      Array.from(node.shadowRoot.children)
+        .filter((child) => !child.matches('style, link'))
+        .forEach(visit);
+  };
+  roots.forEach(visit);
+  return () =>
+    snapshots.every(({ node, values: before }) =>
+      values(node).every((value, index) => {
+        return value === before[index];
+      }),
+    );
+};
+
+/** Flattening an ancestor must not remove a containing block or visual effect. */
+export const relayLayoutSupported = (overlay: HTMLElement): boolean => {
+  const win = overlay.ownerDocument.defaultView!;
+  for (let node = overlay.parentElement; node; node = node.parentElement) {
+    const css = win.getComputedStyle(node);
+    if (
+      css.containerType !== 'normal' ||
+      (css.transform !== 'none' && !new DOMMatrixReadOnly(css.transform).isIdentity) ||
+      css.perspective !== 'none' ||
+      css.filter !== 'none' ||
+      css.opacity !== '1'
+    )
+      return false;
+  }
+  return true;
+};