@astryxdesign/core 0.4.2 → 0.4.3-canary.07f9998

package/src/DateTimeInput/DateTimeInput.tsx

@@ -69,6 +69,7 @@ import {
   formatISOTime,
   isTimeInRange,
   adjustTime,
+  isImeKeyEvent,
   mergeProps,
   mergeRefs,
   isFocusDetached,
@@ -742,6 +743,13 @@ export function DateTimeInput({
 
   const handleDateKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // Guard the composing keydown (fires before compositionend): an IME uses
+      // Enter to commit the candidate and Escape to cancel it, so without this
+      // a CJK user committing a syllable with Enter would commit the pending
+      // date instead. See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'Escape' && popover.isOpen) {
         e.preventDefault();
         popover.hide();
@@ -835,6 +843,13 @@ export function DateTimeInput({
 
   const handleTimeKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
+      // ArrowUp/ArrowDown step the time and preventDefault; an IME candidate
+      // window uses those same arrows to navigate candidates, so guard the
+      // composing keydown (fires before compositionend) to avoid stealing them
+      // mid-composition. See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault();
 
@@ -960,7 +975,20 @@ export function DateTimeInput({
               styles.iconButton,
               isEffectivelyDisabled && styles.iconButtonDisabled,
             )}>
-            <Icon icon="calendar" size="sm" color="secondary" />
+            <Icon
+              icon="calendar"
+              size="sm"
+              color="secondary"
+              // Stable theme target on the calendar toggle glyph, so a theme
+              // can restyle just this icon (color, size, hover) — and each
+              // open/closed state — via `defineTheme`, mirroring
+              // `date-input-toggle-icon`. Same-element rules in
+              // @layer astryx-theme win over the icon's own base color/size,
+              // which a segment-level target could not reach.
+              {...themeProps('date-time-input-toggle-icon', {
+                state: popover.isOpen ? 'expanded' : 'collapsed',
+              })}
+            />
           </button>
           <input
             ref={mergeRefs(ref, dateInputRef)}
@@ -1039,7 +1067,16 @@ export function DateTimeInput({
             ),
           )}>
           <div {...stylex.props(styles.icon)}>
-            <Icon icon="clock" size="sm" color="secondary" />
+            <Icon
+              icon="clock"
+              size="sm"
+              color="secondary"
+              // Stable theme target on the leading clock glyph, so a theme can
+              // restyle just this icon (color, size) via `defineTheme`. The
+              // time segment has no toggle button — the clock is a static
+              // leading affordance — so this carries no interactive state.
+              {...themeProps('date-time-input-clock-icon')}
+            />
           </div>
           <input
             ref={timeInputRef}

package/src/Dialog/Dialog.tsx

@@ -27,7 +27,8 @@ import {
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {useScrollLock} from '../hooks/useScrollLock';
-import {hasActiveFocusTrapEscape, isImeKeyEvent} from '../hooks/useFocusTrap';
+import {hasActiveFocusTrapEscape} from '../hooks/useFocusTrap';
+import {isImeKeyEvent} from '../utils/ime';
 import {
   colorVars,
   radiusVars,

package/src/Markdown/parser.test.ts

@@ -51,6 +51,48 @@ describe('parseInline', () => {
     expect(result).toEqual([{type: 'image', src: 'img.png', alt: 'alt'}]);
   });
 
+  it('rejects javascript: links as plain text (XSS prevention)', () => {
+    const result = parseInline('[click](javascript:alert(1))');
+    // Should be emitted as plain text, NOT as a link node
+    expect(result).toEqual([
+      {type: 'text', content: '[click](javascript:alert(1))'},
+    ]);
+  });
+
+  it('rejects javascript: with mixed case and whitespace (XSS prevention)', () => {
+    const result = parseInline('[click](JaVaScRiPt:alert(1))');
+    expect(result).toEqual([
+      {type: 'text', content: '[click](JaVaScRiPt:alert(1))'},
+    ]);
+  });
+
+  it('rejects vbscript: links (XSS prevention)', () => {
+    const result = parseInline('[click](vbscript:MsgBox(1))');
+    expect(result).toEqual([
+      {type: 'text', content: '[click](vbscript:MsgBox(1))'},
+    ]);
+  });
+
+  it('rejects data:text/html image src (XSS prevention)', () => {
+    const result = parseInline(
+      '![xss](data:text/html,<script>alert(1)</script>)',
+    );
+    expect(result).toEqual([
+      {
+        type: 'text',
+        content: '![xss](data:text/html,<script>alert(1)</script>)',
+      },
+    ]);
+  });
+
+  it('allows normal http/https links', () => {
+    const result = parseInline('[safe](https://example.com)');
+    expect(result[0].type).toBe('link');
+    if (result[0].type === 'link') {
+      expect(result[0].href).toBe('https://example.com');
+    }
+  });
+
   it('parses strikethrough', () => {
     const result = parseInline('~~deleted~~');
     expect(result[0].type).toBe('strikethrough');
@@ -727,6 +769,17 @@ describe('citation parsing', () => {
       });
     });
 
+    it('rejects <javascript:...> angle-bracket autolinks (XSS prevention)', () => {
+      const result = parseInline('see <javascript:alert(1)> ok', {
+        autolink: 'gfm',
+      });
+      // Should NOT produce a link node with javascript: href
+      const linkNodes = result.filter(
+        (n): n is Extract<typeof n, {type: 'link'}> => n.type === 'link',
+      );
+      expect(linkNodes).toHaveLength(0);
+    });
+
     it('parses <email> angle-bracket autolinks', () => {
       const result = parseInline('mail <user@example.com> please', {
         autolink: 'gfm',

package/src/Markdown/parser.ts

@@ -275,7 +275,7 @@ function matchReferenceLink(
       // matches nothing.
       const label = rawLabel === '' ? linkText : rawLabel;
       const href = linkDefs.get(normalizeLinkLabel(label));
-      if (href != null) {
+      if (href != null && isSafeUrl(href)) {
         return {
           node: {type: 'link', href, children: parseInlineImpl(linkText, opts)},
           end: labelClose + 1,
@@ -290,7 +290,7 @@ function matchReferenceLink(
     return null;
   }
   const href = linkDefs.get(normalizeLinkLabel(linkText));
-  if (href == null) {
+  if (href == null || !isSafeUrl(href)) {
     return null;
   }
   return {
@@ -359,6 +359,31 @@ function isWordChar(ch: string | undefined): boolean {
   return /\w/.test(ch);
 }
 
+// ---------------------------------------------------------------------------
+// URL scheme sanitization
+// ---------------------------------------------------------------------------
+
+/**
+ * Reject URLs with dangerous schemes (javascript:, vbscript:, data:) that
+ * could execute arbitrary code when rendered as link hrefs or image srcs.
+ * Returns true if the URL is safe to use, false otherwise.
+ */
+function isSafeUrl(url: string): boolean {
+  // Trim and collapse whitespace/control chars that browsers tolerate but
+  // could bypass a naive prefix check (e.g. "java\nscript:alert(1)").
+  // eslint-disable-next-line no-control-regex -- control chars are the bypass
+  const normalized = url.replace(/[\x00-\x1f\x7f]/g, '').trim();
+  const lower = normalized.toLowerCase();
+  if (
+    lower.startsWith('javascript:') ||
+    lower.startsWith('vbscript:') ||
+    lower.startsWith('data:text/html')
+  ) {
+    return false;
+  }
+  return true;
+}
+
 // ---------------------------------------------------------------------------
 // Inline parser
 // ---------------------------------------------------------------------------
@@ -478,11 +503,17 @@ function parseInlineImpl(text: string, opts: ResolvedOptions): InlineNode[] {
       if (altClose !== -1 && text[altClose + 1] === '(') {
         const srcClose = findClosingParen(text, altClose + 2);
         if (srcClose !== -1) {
-          nodes.push({
-            type: 'image',
-            src: text.slice(altClose + 2, srcClose),
-            alt: text.slice(i + 2, altClose),
-          });
+          const src = text.slice(altClose + 2, srcClose);
+          if (!isSafeUrl(src)) {
+            // Dangerous scheme — emit as plain text.
+            nodes.push({type: 'text', content: text.slice(i, srcClose + 1)});
+          } else {
+            nodes.push({
+              type: 'image',
+              src,
+              alt: text.slice(i + 2, altClose),
+            });
+          }
           i = srcClose + 1;
           continue;
         }
@@ -515,11 +546,17 @@ function parseInlineImpl(text: string, opts: ResolvedOptions): InlineNode[] {
       if (textClose !== -1 && text[textClose + 1] === '(') {
         const urlClose = findClosingParen(text, textClose + 2);
         if (urlClose !== -1) {
-          nodes.push({
-            type: 'link',
-            href: text.slice(textClose + 2, urlClose),
-            children: parseInlineImpl(text.slice(i + 1, textClose), opts),
-          });
+          const href = text.slice(textClose + 2, urlClose);
+          if (!isSafeUrl(href)) {
+            // Dangerous scheme — emit as plain text instead of a link.
+            nodes.push({type: 'text', content: text.slice(i, urlClose + 1)});
+          } else {
+            nodes.push({
+              type: 'link',
+              href,
+              children: parseInlineImpl(text.slice(i + 1, textClose), opts),
+            });
+          }
           i = urlClose + 1;
           continue;
         }
@@ -780,6 +817,10 @@ function scanAutolinksInText(text: string): AutolinkMatch[] {
     let m: RegExpExecArray | null;
     while ((m = re.exec(text)) !== null) {
       const url = m[1];
+      // Skip dangerous URL schemes (javascript:, vbscript:, data:text/html)
+      if (!isSafeUrl(url)) {
+        continue;
+      }
       matches.push({
         start: m.index,
         end: m.index + m[0].length,

package/src/MobileNav/MobileNav.tsx

@@ -77,7 +77,19 @@ const styles = stylex.create({
     outline: 'none',
     // Native <dialog> uses display:none when closed.
     // Open state applied via isOpen prop to avoid :where([open]) specificity issues.
+    // `display` participates in the transition with allow-discrete so it flips
+    // to none only after the slide-out finishes. That also keeps the dialog
+    // rendered until close() has actually run: an open modal dialog that isn't
+    // rendered still blocks the whole document, and a browser that fails to
+    // un-block it on close leaves the page inert with no error (#4290).
+    // Deliberately not shortened under reduced motion: `display` is discrete,
+    // so a long hold animates nothing — it is only the window the close has to
+    // land inside. The visible transitions (the drawer's transform and the
+    // backdrop's opacity) are the ones that respect the preference.
     display: 'none',
+    transitionProperty: 'display',
+    transitionDuration: durationVars['--duration-medium'],
+    transitionBehavior: 'allow-discrete',
   },
   open: {
     display: 'flex',
@@ -183,6 +195,75 @@ const dynamicStyles = stylex.create({
   }),
 });
 
+// =============================================================================
+// Close timing
+// =============================================================================
+
+/** Longest the drawer will wait before closing, however long the hold is. */
+const MAX_CLOSE_DELAY_MS = 250;
+/** Fraction of the hold to close at, so the close never lands on its boundary. */
+const CLOSE_WITHIN_HOLD = 0.6;
+
+/**
+ * Shortest duration in a `transition-duration` list, in ms; null if unreadable.
+ *
+ * Browsers serialise computed `<time>` values in seconds — an authored `410ms`
+ * reads back as `"0.41s"` and a list as `"0.41s, 0.12s"` — so the seconds branch
+ * is the one that runs outside tests. jsdom echoes an inline `250ms` back as-is
+ * and never resolves `var()`, so both units and the unreadable case are covered
+ * directly in MobileNavCloseTiming.test.ts rather than through the component.
+ *
+ * @internal Exported for unit tests.
+ */
+export function parseShortestDurationMs(value: string): number | null {
+  const durations = value
+    .split(',')
+    .map(part => {
+      const trimmed = part.trim();
+      const ms = Number.parseFloat(trimmed);
+      if (!Number.isFinite(ms)) {
+        return null;
+      }
+      return trimmed.endsWith('ms')
+        ? ms
+        : trimmed.endsWith('s')
+          ? ms * 1000
+          : null;
+    })
+    .filter((ms): ms is number => ms !== null);
+
+  return durations.length ? Math.min(...durations) : null;
+}
+
+/**
+ * How long to wait before closing the native dialog.
+ *
+ * The drawer is only rendered for as long as its `display` transition runs, and
+ * closing an unrendered modal dialog is what leaves the page inert (#4290). So
+ * the close has to land inside that hold. The hold is `--duration-medium`,
+ * which themes rewrite — the shipped y2k theme sets it to exactly 250ms — so
+ * read the hold in effect rather than assuming it.
+ */
+function resolveCloseDelay(dialog: HTMLDialogElement): number {
+  // Reduced motion makes the close sooner; it must not make the hold shorter.
+  // Shrinking both leaves no slack — one slow frame between the commit and this
+  // macrotask and the drawer has already stopped being rendered.
+  const cap = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    ? 0
+    : MAX_CLOSE_DELAY_MS;
+
+  const hold = parseShortestDurationMs(
+    window.getComputedStyle(dialog).transitionDuration,
+  );
+
+  // The hold is unreadable — an unresolved var() outside a real browser.
+  if (hold === null) {
+    return cap;
+  }
+
+  return hold <= 0 ? 0 : Math.min(cap, hold * CLOSE_WITHIN_HOLD);
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -320,6 +401,34 @@ export function MobileNav({
     side === 'auto' ? 'end' : side,
   );
 
+  // Resolve which edge the drawer slides from. Deliberately its own effect,
+  // declared before the open/close effect below so the trigger is still the
+  // active element when `side='auto'` reads it. Keeping it out of that effect
+  // is what stops a `side` change during a close from re-arming the delay: the
+  // CSS hold runs from the commit that started the slide-out and does not
+  // restart, so a fresh full delay could land after the drawer had already
+  // stopped being rendered — #4290 again.
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    if (side === 'auto') {
+      const trigger = document.activeElement as HTMLElement | null;
+      if (trigger && trigger !== document.body) {
+        const rect = trigger.getBoundingClientRect();
+        const triggerCenter = rect.left + rect.width / 2;
+        // eslint-disable-next-line @eslint-react/set-state-in-effect -- side is resolved from trigger layout immediately before showModal()
+        setResolvedSide(
+          triggerCenter < window.innerWidth / 2 ? 'start' : 'end',
+        );
+      }
+    } else {
+      // eslint-disable-next-line @eslint-react/set-state-in-effect -- side prop changes must update the open dialog placement
+      setResolvedSide(side);
+    }
+  }, [isOpen, side]);
+
   // Open/close the dialog via showModal()/close()
   // close() is delayed so the slide-out transition can play.
   useEffect(() => {
@@ -328,28 +437,7 @@ export function MobileNav({
       return;
     }
 
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-
     if (isOpen) {
-      // Determine drawer side from trigger position when auto
-      if (side === 'auto') {
-        const trigger = document.activeElement as HTMLElement | null;
-        if (trigger && trigger !== document.body) {
-          const rect = trigger.getBoundingClientRect();
-          const triggerCenter = rect.left + rect.width / 2;
-          // eslint-disable-next-line @eslint-react/set-state-in-effect -- side is resolved from trigger layout immediately before showModal()
-          setResolvedSide(
-            triggerCenter < window.innerWidth / 2 ? 'start' : 'end',
-          );
-        }
-      } else {
-        // eslint-disable-next-line @eslint-react/set-state-in-effect -- side prop changes must update the open dialog placement
-        setResolvedSide(side);
-      }
-
       if (!dialog.open) {
         dialog.showModal();
       }
@@ -360,13 +448,9 @@ export function MobileNav({
     } else if (dialog.open) {
       document.documentElement.style.overflow = '';
 
-      const duration = window.matchMedia('(prefers-reduced-motion: reduce)')
-        .matches
-        ? 10
-        : 250;
       closeTimeoutRef.current = setTimeout(() => {
         dialog.close();
-      }, duration);
+      }, resolveCloseDelay(dialog));
     }
 
     return () => {
@@ -375,20 +459,27 @@ export function MobileNav({
         closeTimeoutRef.current = null;
       }
       document.documentElement.style.overflow = '';
-      // Close the native dialog on teardown if it's still open. Inside AppShell
-      // the drawer is mounted in an <Activity> that switches to mode="hidden"
-      // when the drawer closes; React then runs this cleanup (with a stale
-      // isOpen) instead of re-running the effect with isOpen=false, so the
-      // close branch above never fires. If we leave the <dialog> `open` here,
-      // showModal() is skipped on the next open (the dialog is already open in
-      // the hidden tree) and the drawer can never be re-opened. Closing it
-      // unconditionally on teardown keeps the native dialog state in sync so a
-      // subsequent open cleanly calls showModal() again.
-      if (dialog.open) {
+    };
+  }, [isOpen]);
+
+  // Close the native dialog on unmount if it's still open. Inside AppShell the
+  // drawer is mounted in an <Activity> that switches to mode="hidden" when the
+  // drawer closes; React then runs effect cleanups (with a stale isOpen)
+  // instead of re-running the effect with isOpen=false, so the close branch
+  // above never fires. If we leave the <dialog> `open` here, showModal() is
+  // skipped on the next open (the dialog is already open in the hidden tree)
+  // and the drawer can never be re-opened — see MobileNavReopen.test.tsx.
+  // This must be a separate unmount-only effect: putting it in the open/close
+  // effect above would close the dialog on every isOpen flip and cut off the
+  // delayed slide-out close.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    return () => {
+      if (dialog?.open) {
         dialog.close();
       }
     };
-  }, [isOpen, side]);
+  }, []);
 
   // Handle native cancel event (Escape key) — prevent default and route through onOpenChange
   const handleCancel = useCallback(