@astryxdesign/core 0.7.6 → 0.7.7-canary.0eb44a2

package/src/DateRangeInput/DateRangeInput.tsx

@@ -88,6 +88,7 @@ import {
   useComponentTranslator,
 } from '../i18n/useComponentTranslator';
 import english from '../i18n/generated-english/DateRangeInput/DateRangeInput.generated';
+import {layerViewportInset} from '../Layer/layerViewportInset.stylex';
 
 registerEnglishFallback(english);
 
@@ -160,8 +161,28 @@ const styles = stylex.create({
   iconButtonDisabled: {
     cursor: 'default',
   },
+  // The popover content scrolls inside the layer's block cap, so a stacked
+  // calendar stays reachable on a short screen.
+  popoverScroll: {
+    overflowY: 'auto',
+    overscrollBehavior: 'contain',
+    maxBlockSize: stylex.firstThatWorks(
+      `calc(${layerViewportInset.maxBlockSize})`,
+      `calc(${layerViewportInset.maxBlockSizeFallback})`,
+    ),
+  },
+  // When the presets and a one-month calendar do not fit side by side, the
+  // row wraps and the presets stack above the calendar, in DOM order. The
+  // preset group draws a divider on its inline end and its block end. A
+  // negative margin moves each divider 1 border width past the group's margin
+  // box, and this row clips at its edges. Thus only the divider between the
+  // two parts shows: the inline-end one side by side, the block-end one when
+  // stacked. The row clips, not the scroller, so the overhang is never
+  // scrollable overflow.
   popoverLayout: {
     display: 'flex',
+    flexWrap: 'wrap',
+    overflow: 'clip',
   },
   presetSidebar: {
     display: 'flex',
@@ -171,8 +192,26 @@ const styles = stylex.create({
     borderInlineEndWidth: borderVars['--border-width'],
     borderInlineEndStyle: 'solid',
     borderInlineEndColor: colorVars['--color-border-emphasized'],
+    borderBlockEndWidth: borderVars['--border-width'],
+    borderBlockEndStyle: 'solid',
+    borderBlockEndColor: colorVars['--color-border-emphasized'],
+    marginInlineEnd: `calc(-1 * ${borderVars['--border-width']})`,
+    marginBlockEnd: `calc(-1 * ${borderVars['--border-width']})`,
+    // Alone on its line, the group fills the line, so its inline-end divider
+    // reaches the clipped edge.
+    flexGrow: 1,
     minWidth: 140,
   },
+  calendarPane: {
+    // Gives back the border width the preset group's margin takes, so the
+    // calendar keeps its side-by-side position.
+    marginInlineStart: borderVars['--border-width'],
+    // The row wraps on the calendar's one-month width, and the calendar then
+    // takes the free space, so its months sit in a row where they fit. The
+    // large factor keeps the preset group at its own width beside it.
+    flexBasis: 'min-content',
+    flexGrow: 1_000_000,
+  },
   presetButton: {
     display: 'block',
     width: '100%',
@@ -805,79 +844,86 @@ export function DateRangeInput({
         </VisuallyHidden>
       )}
       {popover.render(
-        <div {...stylex.props(styles.popoverLayout)}>
-          {presets && presets.length > 0 && (
-            <div
-              role="group"
-              aria-label={t('@astryx.dateRangeInput.presetDateRanges')}
-              {...mergeProps(
-                themeProps('date-range-input-presets'),
-                stylex.props(styles.presetSidebar),
-              )}>
-              {presets.map(preset => {
-                const presetRange = preset.getRange();
-                const isActive = isRangeEqual(value, presetRange);
-                const isPresetDisabled =
-                  isDisabled ||
-                  !isRangeWithinSpan(presetRange, maxRangeSpan, minRangeSpan) ||
-                  isDateDisabled(plainDateFromISO(presetRange.start)) ||
-                  isDateDisabled(plainDateFromISO(presetRange.end));
-                return (
-                  <button
-                    key={preset.label}
-                    type="button"
-                    // These presets are independent action buttons navigated by
-                    // Tab, not a single-tab-stop listbox — so they are a labeled
-                    // group of buttons, and the currently-applied preset is
-                    // marked with aria-current (not aria-selected, a listbox
-                    // concept that contradicted the Tab interaction) (forms-5).
-                    aria-current={isActive ? 'true' : undefined}
-                    // Focusable while disabled (AR3, spec:AST-085 FR1).
-                    aria-disabled={isPresetDisabled || undefined}
-                    aria-describedby={
-                      showsDisabledMessage
-                        ? disabledMessageTooltip.describedBy
-                        : undefined
-                    }
-                    onClick={() => {
-                      if (!isPresetDisabled) {
-                        handleRangeSelect(presetRange);
+        <div {...stylex.props(styles.popoverScroll)}>
+          <div {...stylex.props(styles.popoverLayout)}>
+            {presets && presets.length > 0 && (
+              <div
+                role="group"
+                aria-label={t('@astryx.dateRangeInput.presetDateRanges')}
+                {...mergeProps(
+                  themeProps('date-range-input-presets'),
+                  stylex.props(styles.presetSidebar),
+                )}>
+                {presets.map(preset => {
+                  const presetRange = preset.getRange();
+                  const isActive = isRangeEqual(value, presetRange);
+                  const isPresetDisabled =
+                    isDisabled ||
+                    !isRangeWithinSpan(
+                      presetRange,
+                      maxRangeSpan,
+                      minRangeSpan,
+                    ) ||
+                    isDateDisabled(plainDateFromISO(presetRange.start)) ||
+                    isDateDisabled(plainDateFromISO(presetRange.end));
+                  return (
+                    <button
+                      key={preset.label}
+                      type="button"
+                      // These presets are independent action buttons navigated by
+                      // Tab, not a single-tab-stop listbox — so they are a labeled
+                      // group of buttons, and the currently-applied preset is
+                      // marked with aria-current (not aria-selected, a listbox
+                      // concept that contradicted the Tab interaction) (forms-5).
+                      aria-current={isActive ? 'true' : undefined}
+                      // Focusable while disabled (AR3, spec:AST-085 FR1).
+                      aria-disabled={isPresetDisabled || undefined}
+                      aria-describedby={
+                        showsDisabledMessage
+                          ? disabledMessageTooltip.describedBy
+                          : undefined
                       }
-                    }}
-                    {...mergeProps(
-                      themeProps('date-range-input-preset', {
-                        selected: isActive ? 'selected' : null,
-                        disabled: isPresetDisabled ? 'disabled' : null,
-                      }),
-                      stylex.props(
-                        focusOutlineStyles.focusVisible,
-                        styles.presetButton,
-                        isActive && styles.presetButtonActive,
-                        isPresetDisabled && styles.presetButtonDisabled,
-                      ),
-                    )}>
-                    {preset.label}
-                  </button>
-                );
-              })}
-            </div>
-          )}
-          {/* The layer renders its children open or closed, so mount the
+                      onClick={() => {
+                        if (!isPresetDisabled) {
+                          handleRangeSelect(presetRange);
+                        }
+                      }}
+                      {...mergeProps(
+                        themeProps('date-range-input-preset', {
+                          selected: isActive ? 'selected' : null,
+                          disabled: isPresetDisabled ? 'disabled' : null,
+                        }),
+                        stylex.props(
+                          focusOutlineStyles.focusVisible,
+                          styles.presetButton,
+                          isActive && styles.presetButtonActive,
+                          isPresetDisabled && styles.presetButtonDisabled,
+                        ),
+                      )}>
+                      {preset.label}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+            {/* The layer renders its children open or closed, so mount the
               calendar only while it is open. */}
-          {popover.isOpen && (
-            <Calendar
-              mode="range"
-              value={optimisticValue}
-              onChange={handleRangeSelect}
-              min={min}
-              max={max}
-              dateConstraints={dateConstraints}
-              maxRangeSpan={maxRangeSpan}
-              minRangeSpan={minRangeSpan}
-              numberOfMonths={numberOfMonths}
-              weekStartsOn={weekStartsOn}
-            />
-          )}
+            {popover.isOpen && (
+              <Calendar
+                mode="range"
+                value={optimisticValue}
+                onChange={handleRangeSelect}
+                min={min}
+                max={max}
+                dateConstraints={dateConstraints}
+                maxRangeSpan={maxRangeSpan}
+                minRangeSpan={minRangeSpan}
+                numberOfMonths={numberOfMonths}
+                weekStartsOn={weekStartsOn}
+                xstyle={presets && presets.length > 0 && styles.calendarPane}
+              />
+            )}
+          </div>
         </div>,
         {placement: 'below', alignment: 'start'},
       )}

package/src/Dialog/Dialog.tsx

@@ -80,7 +80,7 @@ import {themeProps} from '../utils/themeProps';
 import type {DialogVariantMap} from './index';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {useInteractionModalityTracking} from '../utils/interactionModality';
-import {focusForLastInput} from '../utils/focusReturn';
+import {focusForLastInput, isFocusLost} from '../utils/focusReturn';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
@@ -634,6 +634,42 @@ export function Dialog({
     }
   }, [isOpen, isInline]);
 
+  // A dialog that unmounts while open (rendered only while open, or removed
+  // with the rest of a view) never runs the close branch above, and removing a
+  // <dialog> does not run the browser's own focus return. Focus left inside
+  // it, or dropped to the body by the removal, goes back to the opener.
+  useEffect(() => {
+    if (isInline) {
+      return;
+    }
+    const dialog = dialogRef.current;
+    // Read now: a removed iframe's document has no window, so its frame
+    // element can no longer be found once the dialog is gone.
+    const host = dialog?.ownerDocument.defaultView?.frameElement ?? null;
+    return () => {
+      const trigger = triggerElementRef.current;
+      if (dialog == null || trigger == null) {
+        return;
+      }
+      // Checked once the commit has finished: StrictMode's simulated unmount
+      // leaves the dialog in the document, and only a real removal returns
+      // focus.
+      queueMicrotask(() => {
+        if (dialog.isConnected || !trigger.isConnected) {
+          return;
+        }
+        // isFocusLost reads the dialog's own document. For a dialog in an
+        // iframe, the document that hosts the frame must also have lost focus
+        // or keep it on that frame, wherever the opener is: a control the
+        // user pressed outside the frame to remove the dialog, or the frame
+        // itself, keeps its focus.
+        if (isFocusLost(dialog) && (host == null || isFocusLost(host))) {
+          focusForLastInput(trigger);
+        }
+      });
+    };
+  }, [isInline]);
+
   // Host app-global surfaces (toasts) inside this modal while it is open, so
   // they stay visible and operable above it.
   useModalOutlet(dialogRef, isOpen && !isInline);

package/src/Drawer/Drawer.tsx

@@ -77,6 +77,7 @@ import {LayerDepthProvider, useLayerDismissal} from '../Layer';
 import {layerTextReset} from '../Layer/layerTextReset.stylex';
 import {layerStructureReset} from '../Layer/layerStructureReset.stylex';
 import {LayerContentBoundary} from '../Layer/layerScopedContext';
+import {useModalOutlet} from '../Layer/modalOutlet';
 import {layerClickBoundary} from '../Layer/layerClickBoundary';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 import {composeEventHandlers, mergeProps, themeProps} from '../utils';
@@ -497,6 +498,11 @@ export function Drawer({
     setIsRendered,
   });
 
+  // Toasts outside an open modal are inert, so the open drawer hosts them.
+  // It releases them when its exit starts.
+  // showModal() must run first, so keep this call after useDrawerDialogPresence.
+  useModalOutlet(dialogRef, isOpen && hasScrim);
+
   const handleDismiss = useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);

package/src/Drawer/useDrawerDialogPresence.ts

@@ -32,6 +32,7 @@ import {
   type SetStateAction,
 } from 'react';
 import {flushSync} from 'react-dom';
+import {notifyTopLayerEntry} from '../Layer/modalOutlet';
 
 /** Slack past the computed transition before the backstop gives up waiting. */
 const EXIT_BACKSTOP_BUFFER_MS = 50;
@@ -71,6 +72,9 @@ function showDrawerHost(dialog: HTMLDialogElement, isModal: boolean): void {
     dialog.showModal();
   } else if (typeof dialog.showPopover === 'function') {
     dialog.showPopover();
+    // The drawer is now the newest top-layer entry: global hosts shown before
+    // it (the toast viewport) re-enter above it, as they do above a modal.
+    notifyTopLayerEntry();
   } else {
     // Reduced fallback for browsers below the Popover API support floor.
     dialog.show();

package/src/DropdownMenu/DropdownMenu.tsx

@@ -533,6 +533,20 @@ function holdInvokerThroughPress(
   doc.addEventListener('pointercancel', onPressEnd, true);
 }
 
+/**
+ * The name of a menu opened from a custom trigger: the caller's `aria-label`
+ * when it is a non-empty string, else the trigger's own accessible name. The
+ * popover and the bottom sheet both name the menu through this.
+ */
+function resolveCustomTriggerMenuName(
+  callerLabel: unknown,
+  triggerName: string | undefined,
+): string | undefined {
+  return typeof callerLabel === 'string' && callerLabel.trim() !== ''
+    ? callerLabel
+    : triggerName;
+}
+
 function DropdownMenuBottomSheet({
   button: buttonFromProps,
   renderTrigger,
@@ -596,11 +610,22 @@ function DropdownMenuBottomSheet({
   useEffect(() => {
     void preloadMenuBottomSheetActionList();
   }, []);
+  // The control's name is only readable from the DOM once it is rendered.
+  const [triggerName, setTriggerName] = useState<string | undefined>(undefined);
+  useIsomorphicLayoutEffect(() => {
+    if (renderTrigger != null && isOpen) {
+      setTriggerName(readAccessibleName(buttonRef.current));
+    }
+  }, [renderTrigger, isOpen]);
+  const rootTitle =
+    (renderTrigger != null
+      ? resolveCustomTriggerMenuName(rest['aria-label'], triggerName)
+      : undefined) ?? button.label;
   const currentSubmenu = submenuPath.at(-1);
   const currentItems = currentSubmenu?.items ?? items;
-  const currentTitle = currentSubmenu?.label ?? button.label;
+  const currentTitle = currentSubmenu?.label ?? rootTitle;
   const sheetLabel =
-    typeof currentTitle === 'string' ? currentTitle : button.label;
+    typeof currentTitle === 'string' ? currentTitle : rootTitle;
 
   const setOpen = useCallback(
     (nextIsOpen: boolean) => {
@@ -1040,12 +1065,9 @@ function DropdownMenuPopover({
   // The design system's button names the menu by its label. A custom trigger
   // names it by reference (or the caller's `aria-label` does), so that name
   // is read off the control as the menu opens.
-  const callerMenuLabel = rest['aria-label'];
   const menuLabel =
     renderTrigger != null
-      ? typeof callerMenuLabel === 'string' && callerMenuLabel.trim() !== ''
-        ? callerMenuLabel
-        : triggerName
+      ? resolveCustomTriggerMenuName(rest['aria-label'], triggerName)
       : typeof button.label === 'string'
         ? button.label
         : undefined;

package/src/DropdownMenu/useMenuOverflow.ts

@@ -4,31 +4,62 @@
 
 /**
  * @file useMenuOverflow.ts
- * @input Menu element ref, rendered content, and open state
+ * @input Menu element ref, rendered content, open state, and optionally the
+ *   overflow its owner expects from the content alone
  * @output Returns whether the open menu overflows its block-size constraint
  * @position Shared responsive helper for DropdownMenu and DropdownMenuSubMenu
  */
 
-import {useCallback, useState, type ReactNode, type RefObject} from 'react';
+import {
+  useCallback,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from 'react';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 
-/** Detect block-axis overflow without making a fitting menu a scroll container. */
+/**
+ * Detect block-axis overflow without making a fitting menu a scroll container.
+ *
+ * `expectedOverflow` is the answer the owner can give before any measure (a
+ * long option list cannot fit). Until a measure of the same `content` says
+ * otherwise, it is the result, so the first open already renders the right
+ * class: a class that flips after the open measure restyles the whole list
+ * a second time. A measure still runs on every open and corrects a wrong
+ * guess.
+ */
 export function useMenuOverflow(
   menuRef: RefObject<HTMLElement | null>,
   content: ReactNode,
   isOpen: boolean,
+  expectedOverflow?: boolean,
 ): boolean {
-  const [hasOverflow, setHasOverflow] = useState(false);
+  // The content each measure stands for, kept only for an owner that gives
+  // an expected answer (a caller whose content is a new element on every
+  // render compares nothing); set before the measuring effects run.
+  const contentRef = useRef<ReactNode>(null);
+  useIsomorphicLayoutEffect(() => {
+    contentRef.current = expectedOverflow === undefined ? null : content;
+  });
+  const [measured, setMeasured] = useState<{
+    content: ReactNode;
+    hasOverflow: boolean;
+  } | null>(null);
 
   const measureOverflow = useCallback(() => {
     const menu = menuRef.current;
     if (!menu) {
       return;
     }
-    const nextHasOverflow = menu.scrollHeight > menu.clientHeight + 1;
+    const hasOverflow = menu.scrollHeight > menu.clientHeight + 1;
     // eslint-disable-next-line @eslint-react/set-state-in-effect -- DOM overflow measurement controls whether this menu becomes a scroll container
-    setHasOverflow(current =>
-      current === nextHasOverflow ? current : nextHasOverflow,
+    setMeasured(current =>
+      current != null &&
+      current.hasOverflow === hasOverflow &&
+      Object.is(current.content, contentRef.current)
+        ? current
+        : {content: contentRef.current, hasOverflow},
     );
   }, [menuRef]);
 
@@ -73,5 +104,10 @@ export function useMenuOverflow(
     }
   }, [content, isOpen, measureOverflow]);
 
-  return hasOverflow;
+  if (expectedOverflow === undefined) {
+    return measured?.hasOverflow ?? false;
+  }
+  return measured != null && Object.is(measured.content, content)
+    ? measured.hasOverflow
+    : expectedOverflow;
 }

package/src/Field/PanelSearchInput.tsx

@@ -57,6 +57,7 @@ import {
   typographyVars,
 } from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
+import {textEntryTraitAttributes} from './textEntryTraits';
 
 const styles = stylex.create({
   // Gutter only. Matches the option list's own padding so the field below
@@ -273,6 +274,11 @@ export function PanelSearchInput({
         <input
           ref={mergedInputRef}
           type="text"
+          // Autocorrect would rewrite names and identifiers.
+          {...textEntryTraitAttributes({
+            enterKeyHint: 'search',
+            hasAutoCorrect: false,
+          })}
           aria-label={label}
           placeholder={placeholder}
           value={value}

package/src/Field/textEntryTraits.ts

@@ -3,16 +3,16 @@
 /**
  * @file textEntryTraits.ts
  * @input The keyboard-trait props a text field accepts
- * @output Exports the closed value unions EnterKeyHint, InputMode and
- *   AutoCapitalize (the package entry exports these three), the fields' prop
- *   mixin TextEntryTraitProps, and textEntryTraitAttributes, which maps the
- *   props onto the native attributes of the editable element
- * @position Shared by TextInput and TextArea: the one place that says how a
- *   field tells a touch keyboard what it holds
+ * @output EnterKeyHint, InputMode and AutoCapitalize (the package entry exports
+ *   these), TextEntryTraitProps and textEntryTraitAttributes
+ * @position Shared by TextInput, TextArea and the search inputs: the one place
+ *   that says how a field tells a touch keyboard what it holds
  *
  * SYNC: When modified, update:
  * - /packages/core/src/TextInput/TextInput.tsx and TextInput.doc.mjs
  * - /packages/core/src/TextArea/TextArea.tsx and TextArea.doc.mjs
+ * - /packages/core/src/Typeahead/BaseTypeahead.tsx, Field/PanelSearchInput.tsx
+ *   and CommandPalette/CommandPaletteInput.tsx (the search inputs)
  * - /packages/core/src/Field/index.ts (type exports)
  */
 

package/src/Layer/layerClickBoundary.ts

@@ -6,7 +6,7 @@
  * @file layerClickBoundary.ts
  * @input React pointer, mouse, touch and click events on a layer root
  * @output Exports layerClickBoundary, the props every layer content root
- *   spreads, including the layer-root mark
+ *   spreads, including the layer-root mark; also stopInReactTree
  * @position Internal to Layer; used by useLayer's renderers and the Dialog,
  *   Drawer, Lightbox, MobileNav, BottomSheetPanel and ToastViewport roots.
  *   Not exported from the package.
@@ -61,7 +61,7 @@ const returnTrue = () => true;
  * React's dispatch asks `isPropagationStopped()` before each further
  * listener; the native event is left alone.
  */
-function stopInReactTree(event: SyntheticEvent): void {
+export function stopInReactTree(event: SyntheticEvent): void {
   event.isPropagationStopped = returnTrue;
 }