@astryxdesign/core 0.5.2-canary.c9c8564 → 0.5.2-canary.e4f8e4e

package/dist/Popover/usePopover.js

@@ -22,6 +22,7 @@ import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
 import { Button } from "../Button/index.js";
+import { FOCUSABLE_SELECTOR } from "../hooks/focusableSelector.js";
 import { rtlStyles } from "../utils/index.js";
 import { useTranslator } from "../i18n/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
@@ -29,6 +30,24 @@ import { mergeProps } from "../utils/mergeProps.js";
 import { themeProps } from "../utils/themeProps.js";
 import { stableClassName } from "../naming.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FALLBACK_CLOSE_SELECTOR = '[data-astryx-popover-fallback-close]';
+function attemptFocus(element) {
+  try {
+    element.focus();
+  } catch {
+    // Ignore non-focusable elements; the caller will try the next target.
+  }
+  return document.activeElement === element;
+}
+function focusFirstContentControl(container) {
+  const focusable = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(element => element.closest(FALLBACK_CLOSE_SELECTOR) == null);
+  for (const element of focusable) {
+    if (attemptFocus(element)) {
+      return true;
+    }
+  }
+  return false;
+}
 const styles = {
   surface: {
     kWkggS: "x1prclbq",
@@ -39,6 +58,7 @@ const styles = {
   },
   contentWrapper: {
     kVAEAm: "x1n2onr6",
+    kI3sdo: "x1a2a7pz",
     $$css: true
   },
   closeButtonWrapper: {
@@ -129,6 +149,7 @@ function usePopoverImplementation(options = {}) {
 
   // Track whether to skip auto-focus for the current open event
   const skipAutoFocusRef = useRef(false);
+  const focusTargetRef = useRef('first');
 
   // Core layer for popover positioning
   const layer = useLayerInternal({
@@ -148,20 +169,40 @@ function usePopoverImplementation(options = {}) {
     isActive: layer.isOpen,
     onEscape: hasEscapeDismiss || hasLightDismiss ? layer.hide : undefined
   });
+  const focusInitialTarget = useCallback(() => {
+    const container = contentRef.current;
+    if (!container) {
+      return;
+    }
+    if (focusFirstContentControl(container)) {
+      return;
+    }
+    if (role === 'dialog') {
+      attemptFocus(container);
+      return;
+    }
+    focusFirst();
+  }, [contentRef, focusFirst, role]);
 
   // Auto-focus first element when popover opens (unless skipped)
   useEffect(() => {
     if (layer.isOpen && hasAutoFocus && !skipAutoFocusRef.current) {
       // Use requestAnimationFrame to ensure DOM is ready
       requestAnimationFrame(() => {
-        focusFirst();
+        const container = contentRef.current;
+        if (focusTargetRef.current === 'container' && role === 'dialog' && container) {
+          attemptFocus(container);
+        } else {
+          focusInitialTarget();
+        }
       });
     }
-    // Reset the skip flag after the effect runs
+    // Reset per-open focus preferences after the popover closes.
     if (!layer.isOpen) {
       skipAutoFocusRef.current = false;
+      focusTargetRef.current = 'first';
     }
-  }, [layer.isOpen, hasAutoFocus, focusFirst]);
+  }, [contentRef, layer.isOpen, hasAutoFocus, focusInitialTarget, role]);
 
   // Combined ref for trigger element (layer anchor + our ref)
   const triggerRef = useCallback(el => {
@@ -172,20 +213,22 @@ function usePopoverImplementation(options = {}) {
   // Show function with optional skipAutoFocus
   const show = useCallback(showOptions => {
     skipAutoFocusRef.current = showOptions?.skipAutoFocus ?? false;
+    focusTargetRef.current = showOptions?.focusTarget ?? 'first';
     layer.show();
   }, [layer]);
 
   // Toggle function
-  const toggle = useCallback(() => {
+  const toggleWithOptions = useCallback(showOptions => {
     if (layer.wasJustDismissed()) {
       return;
     }
     if (layer.isOpen) {
       layer.hide();
     } else {
-      show();
+      show(showOptions);
     }
   }, [layer, show]);
+  const toggle = useCallback(() => toggleWithOptions(), [toggleWithOptions]);
 
   // ARIA attributes for the trigger
   const triggerProps = {
@@ -210,11 +253,13 @@ function usePopoverImplementation(options = {}) {
         role: role === 'dialog' ? 'dialog' : undefined,
         "aria-modal": role === 'dialog' && isModal ? true : undefined,
         "aria-label": role === 'dialog' ? dialogLabel : undefined,
+        tabIndex: role === 'dialog' ? -1 : undefined,
         ...mergeProps({
           ...surfaceProps,
           className: surfaceClassName
         }, stylex.props(styles.contentWrapper, hasSurface && styles.surface, xstyle), className, style),
         children: [children, hasCloseButton && /*#__PURE__*/_jsx("div", {
+          "data-astryx-popover-fallback-close": "",
           ...stylex.props(styles.closeButtonWrapper, rtlStyles.centerInline('100%')),
           children: /*#__PURE__*/_jsx(Button, {
             variant: "secondary",
@@ -235,6 +280,7 @@ function usePopoverImplementation(options = {}) {
     show,
     hide: layer.hide,
     toggle,
+    toggleWithOptions,
     wasJustDismissed: layer.wasJustDismissed,
     isOpen: layer.isOpen,
     id: layer.id,
@@ -245,6 +291,7 @@ function usePopoverImplementation(options = {}) {
 export function usePopover(options = {}) {
   const {
     wasJustDismissed: _,
+    toggleWithOptions: __,
     ...popover
   } = usePopoverImplementation(options);
   return popover;

package/dist/Selector/Selector.d.ts

@@ -20,8 +20,10 @@ import { type LayerPlacement } from '../Layer/useLayer';
 import type { SelectorOptionType, SelectorOptionData } from './types';
 import type { BaseProps } from '../BaseProps';
 import type { SizeValue } from '../utils/types';
+import type { AdaptivePresentation } from '../hooks/useAdaptivePresentation';
 export type SelectorSize = 'sm' | 'md' | 'lg';
 export type SelectorVariant = 'input' | 'ghost';
+export type SelectorPresentation = AdaptivePresentation;
 export type SelectorStatusType = 'warning' | 'error' | 'success';
 export interface SelectorStatus {
     /**
@@ -215,6 +217,14 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
      * `placement="above"` for bottom-fixed toolbars).
      */
     placement?: LayerPlacement;
+    /**
+     * How the option list is presented.
+     * - 'popover': anchored to the trigger
+     * - 'bottom-sheet': modal sheet suited to compact touch screens
+     * - 'adaptive': bottom sheet on compact coarse-pointer screens, otherwise popover
+     * @default 'popover'
+     */
+    presentation?: SelectorPresentation;
     /**
      * Whether the dropdown starts open on mount.
      * Useful for showcases and previews.

package/dist/Selector/Selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}

package/dist/Selector/Selector.js

@@ -18,7 +18,6 @@
  */
 import React, { useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { usePopoverInternal } from "../Popover/usePopover.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { useIndicator } from "../Indicator/index.js";
@@ -48,6 +47,9 @@ import { groupStyles } from "../InputGroup/groupStyles.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useTranslator } from "../i18n/index.js";
+import { SelectorBottomSheet } from "./SelectorBottomSheet.js";
+import { useSelectorPresentation } from "./useSelectorPresentation.js";
+import { selectorPresentationStyles } from "./selectorPresentation.stylex.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   triggerContainer: {
@@ -316,12 +318,14 @@ export function Selector(props) {
     emptyText: emptyTextFromProps,
     emptySearchText: emptySearchTextFromProps,
     placement,
+    presentation = 'popover',
     isDefaultOpen = false,
     'data-testid': testId,
     width,
     xstyle,
     className,
     style,
+    onFocus,
     hasClear: hasClearProp,
     id,
     ...rest
@@ -426,26 +430,32 @@ export function Selector(props) {
     // Clear any lingering result count when the popover closes so stale status
     // text does not linger in the a11y tree.
     announce('');
-    triggerRef.current?.focus();
   }, [announce]);
-  const popover = usePopoverInternal({
+  const surface = useSelectorPresentation({
+    presentation,
     onHide: handleLayerHide,
-    hasLightDismiss: true,
-    hasCloseButton: false,
-    hasAutoFocus: false,
-    // The popup's own role="listbox" is the exposed semantics; the trigger
-    // keeps DOM focus, so wrapping it in a modal dialog would misrepresent it.
-    role: 'none',
-    // The theme target belongs on the SURFACE that paints the popup, which
-    // `usePopover` owns — not on the scrolling list inside it.
-    surfaceTarget: 'selector-popup'
+    triggerRef,
+    popoverOptions: {
+      hasLightDismiss: true,
+      hasCloseButton: false,
+      hasAutoFocus: false,
+      // The popup's own role="listbox" is the exposed semantics; the trigger
+      // keeps DOM focus, so wrapping it in a modal dialog would misrepresent it.
+      role: 'none',
+      // The theme target belongs on the SURFACE that paints the popup, which
+      // `usePopover` owns — not on the scrolling list inside it.
+      surfaceTarget: 'selector-popup'
+    }
   });
+  const {
+    popover
+  } = surface;
   const keepOpenProps = useKeepLayerOpenProps(popover.id, popover.isOpen);
 
   // Open dropdown on mount when isDefaultOpen is true
   useEffect(() => {
     if (isDefaultOpen) {
-      popover.show();
+      surface.show();
     }
     // eslint-disable-next-line @eslint-react/exhaustive-deps -- mount-only: isDefaultOpen is not reactive
   }, []);
@@ -488,7 +498,7 @@ export function Selector(props) {
   // per arrival at that state rather than on every re-render.
   const announcedEmptyRef = useRef(null);
   useEffect(() => {
-    const isPanelEmpty = popover.isOpen && !isLoading && searchQuery === '' && selectableItems.length === 0;
+    const isPanelEmpty = surface.isOpen && !isLoading && searchQuery === '' && selectableItems.length === 0;
     if (!isPanelEmpty) {
       announcedEmptyRef.current = null;
       return;
@@ -498,7 +508,7 @@ export function Selector(props) {
     }
     announcedEmptyRef.current = emptyAnnouncement;
     announce(emptyAnnouncement);
-  }, [popover.isOpen, isLoading, searchQuery, selectableItems.length, emptyAnnouncement, announce]);
+  }, [surface.isOpen, isLoading, searchQuery, selectableItems.length, emptyAnnouncement, announce]);
 
   // Calculate offset to position selected item over trigger. Explicit
   // placement opts out of the selector-specific overlay behavior and uses the
@@ -567,17 +577,17 @@ export function Selector(props) {
     onItemMouseEnter
   } = useCombobox({
     selectableItems: filteredItems,
-    wasJustDismissed: popover.wasJustDismissed,
+    wasJustDismissed: surface.wasJustDismissed,
     // The optimistic value, not the raw prop: with a pending changeAction the
     // prop still holds the old selection, so the popup would open with the
     // highlight on it and Delete/Backspace could clear a value the action has
     // already replaced.
     value: optimisticValue,
     isDisabled,
-    isOpen: popover.isOpen,
+    isOpen: surface.isOpen,
     hasSearch,
     onOpen: useCallback(() => {
-      popover.show();
+      surface.show();
       if (hasSearch) {
         requestAnimationFrame(() => {
           const input = searchRef.current;
@@ -589,8 +599,8 @@ export function Selector(props) {
           }
         });
       }
-    }, [popover, hasSearch]),
-    onClose: popover.hide,
+    }, [surface, hasSearch]),
+    onClose: surface.hide,
     onSelect: commitValue,
     onClear: hasClear ? clearValue : undefined,
     onSearchSeed: appendSearchQuery,
@@ -609,10 +619,10 @@ export function Selector(props) {
     // when closed — the optimistic one, so a pending changeAction cannot strand
     // cycling on the first match. -1 means nothing is selected or highlighted,
     // which the hook reads as "search from the top".
-    getCurrentIndex: () => popover.isOpen ? highlightedIndex : selectedItemIndex,
+    getCurrentIndex: () => surface.isOpen ? highlightedIndex : selectedItemIndex,
     onMatch: index => {
       const item = selectableItems[index];
-      if (popover.isOpen) {
+      if (surface.isOpen) {
         setHighlightedIndex(index);
       } else if (item.value !== optimisticValue) {
         commitValue(item.value);
@@ -635,13 +645,13 @@ export function Selector(props) {
   // cursor walks off-screen once navigation passes the visible window. Mirrors
   // CommandPaletteItem's scrollIntoView({block: 'nearest'}) behavior.
   useEffect(() => {
-    if (!popover.isOpen || highlightedIndex < 0) {
+    if (!surface.isOpen || highlightedIndex < 0) {
       return;
     }
     document.getElementById(getItemId(highlightedIndex))?.scrollIntoView?.({
       block: 'nearest'
     });
-  }, [popover.isOpen, highlightedIndex, getItemId]);
+  }, [surface.isOpen, highlightedIndex, getItemId]);
 
   // Handle clear button click
   const handleClear = useCallback(e => {
@@ -671,17 +681,17 @@ export function Selector(props) {
         label: t('@astryx.selector.searchOptions')
       }),
       ...themeProps('selector-search'),
-      xstyle: variant !== 'ghost' && styles.searchRowInput
+      xstyle: surface.activePresentation === 'popover' && variant !== 'ghost' && styles.searchRowInput
       // When hasSearch is set, focus moves into this input on open, so it —
       // not the trigger — must be the combobox that reports the highlighted
       // option via aria-activedescendant (comboboxes-4). A bare searchbox
       // left the highlight silent to screen readers.
       ,
       role: "combobox",
-      "aria-expanded": popover.isOpen,
+      "aria-expanded": surface.isOpen,
       "aria-controls": listboxId,
       "aria-autocomplete": "list",
-      "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+      "aria-activedescendant": surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
       value: searchQuery,
       onValueChange: handleSearchChange,
       onContainerKeyDown: e => {
@@ -724,7 +734,7 @@ export function Selector(props) {
       },
       placeholder: searchPlaceholder
     });
-  }, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, variant, t]);
+  }, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, surface.isOpen, surface.activePresentation, highlightedIndex, getItemId, variant, t]);
 
   // The single-selection mark, resolved from the theme once per render. A
   // theme that maps `check` to another indicator (a radio, say) changes every
@@ -917,6 +927,63 @@ export function Selector(props) {
       children: selectedItem?.label ?? placeholder
     })]
   });
+  const panelContent = hasSearch ? /*#__PURE__*/_jsxs("div", {
+    children: [renderSearch(), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx("div", {
+      ref: listboxRef,
+      id: listboxId,
+      role: "listbox",
+      "aria-labelledby": triggerId,
+      ...{
+        0: {
+          className: "x9f619 xuyqlj2 x1odjw0f x1a2a7pz xu0wf1k x7a5moj x1hc1fzr x1ey1afo"
+        },
+        1: {
+          className: "x9f619 xuyqlj2 x1odjw0f x1a2a7pz xu0wf1k x1hc1fzr x1ey1afo x2hg6jq"
+        }
+      }[!!(surface.activePresentation === 'popover' && variant !== 'ghost') << 0],
+      children: renderOptions()
+    })]
+  }) : /*#__PURE__*/_jsx("div", {
+    ref: listboxRef,
+    id: listboxId,
+    role: "listbox",
+    "aria-labelledby": triggerId,
+    "aria-activedescendant": surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+    tabIndex: surface.activePresentation === 'bottom-sheet' ? 0 : undefined,
+    onKeyDown: surface.activePresentation === 'bottom-sheet' ? handleTriggerKeyDown : undefined,
+    ...{
+      0: {
+        className: "x9f619 xuyqlj2 x1odjw0f x1a2a7pz xu0wf1k x7a5moj x1hc1fzr x1ey1afo"
+      },
+      2: {
+        className: "x9f619 xuyqlj2 x1odjw0f x1a2a7pz xu0wf1k x1hc1fzr x1ey1afo x2hg6jq"
+      },
+      1: {
+        className: "x9f619 xuyqlj2 x1odjw0f x1a2a7pz xu0wf1k x7a5moj xg01cxk xq2gx43"
+      },
+      3: {
+        className: "x9f619 xuyqlj2 x1odjw0f x1a2a7pz xu0wf1k x2hg6jq xg01cxk xq2gx43"
+      }
+    }[!!(surface.activePresentation === 'popover' && variant !== 'ghost') << 1 | !!(surface.activePresentation === 'popover' && !isPositioned) << 0],
+    children: renderOptions()
+  });
+  const selectionSurface = surface.activePresentation === 'bottom-sheet' ? /*#__PURE__*/_jsx(SelectorBottomSheet, {
+    isOpen: surface.isSheetOpen,
+    onOpenChange: surface.onSheetOpenChange,
+    finalFocusRef: triggerRef,
+    initialFocusRef: hasSearch ? searchRef : listboxRef,
+    label: label,
+    children: panelContent
+  }) : popover.render(panelContent, {
+    placement: popoverPlacement,
+    alignment: 'start',
+    // The system's standard menu clearance, except in overlay mode:
+    // there the measured negative margin owns the block geometry and
+    // the menu is meant to sit on the trigger, not clear it.
+    offset: shouldOverlaySelectedItem ? undefined : spacingVars['--spacing-1'],
+    xstyle: [styles.popover, layerAnimations[popoverPlacement]],
+    style: popoverOffsetStyle
+  });
   const selectorContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       ref: el => {
@@ -934,7 +1001,7 @@ export function Selector(props) {
         size,
         status: status?.type ?? null,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && interactionOverlayStyles.backgroundImage, variant === 'ghost' && focusOutlineStyles.focusWithin, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, !selectedItem && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, inputGroup && styles.triggerInGroup, xstyle), className, style),
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && interactionOverlayStyles.backgroundImage, variant === 'ghost' && focusOutlineStyles.focusWithin, surface.isTriggerFocusRingSuppressed && selectorPresentationStyles.pointerRestoredFocus, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, !selectedItem && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, inputGroup && styles.triggerInGroup, xstyle), className, style),
       children: [startIcon && renderIconSlot(startIcon, {
         size: 'sm',
         color: 'secondary'
@@ -951,10 +1018,10 @@ export function Selector(props) {
         ,
         role: hasSearch ? undefined : 'combobox',
         ...rest,
-        "aria-haspopup": "listbox",
-        "aria-expanded": popover.isOpen,
+        "aria-haspopup": surface.activePresentation === 'bottom-sheet' ? 'dialog' : 'listbox',
+        "aria-expanded": surface.isOpen,
         "aria-controls": listboxId,
-        "aria-activedescendant": !hasSearch && popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+        "aria-activedescendant": !hasSearch && surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
         "aria-describedby": ariaDescribedBy,
         "aria-labelledby": ariaLabelledBy,
         "aria-required": isEffectivelyRequired ? 'true' : undefined,
@@ -967,6 +1034,10 @@ export function Selector(props) {
         disabled: isDisabled && !showsDisabledMessage,
         "aria-disabled": showsDisabledMessage ? 'true' : undefined,
         onKeyDown: handleTriggerKeyDown,
+        onFocus: event => {
+          onFocus?.(event);
+          surface.onTriggerFocus(event);
+        },
         tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
         ...{
           0: {
@@ -1021,7 +1092,7 @@ export function Selector(props) {
         // the wrapper used to provide, so one element carries the mark,
         // its open/closed transform, and the theme target.
         ,
-        xstyle: [styles.triggerIcon, styles.triggerIconRotation, popover.isOpen && styles.triggerIconOpen]
+        xstyle: [styles.triggerIcon, styles.triggerIconRotation, surface.isOpen && styles.triggerIconOpen]
         // Stable theme target on the chevron glyph itself, so a theme can
         // restyle just this icon (color, size, hover) — and its
         // open/closed state — via `defineTheme`. Same-element rules in
@@ -1029,55 +1100,10 @@ export function Selector(props) {
         // which a button-level target could not reach.
         ,
         ...themeProps('selector-indicator-icon', {
-          state: popover.isOpen ? 'expanded' : 'collapsed'
+          state: surface.isOpen ? 'expanded' : 'collapsed'
         })
       })]
-    }), popover.render(hasSearch ? /*#__PURE__*/_jsxs("div", {
-      children: [renderSearch(), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx("div", {
-        ref: listboxRef,
-        id: listboxId,
-        role: "listbox",
-        "aria-labelledby": triggerId,
-        ...{
-          0: {
-            className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj x1hc1fzr x1ey1afo"
-          },
-          1: {
-            className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x1hc1fzr x1ey1afo x2hg6jq"
-          }
-        }[!!(variant !== 'ghost') << 0],
-        children: renderOptions()
-      })]
-    }) : /*#__PURE__*/_jsx("div", {
-      ref: listboxRef,
-      id: listboxId,
-      role: "listbox",
-      "aria-labelledby": triggerId,
-      ...{
-        0: {
-          className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj x1hc1fzr x1ey1afo"
-        },
-        2: {
-          className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x1hc1fzr x1ey1afo x2hg6jq"
-        },
-        1: {
-          className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj xg01cxk xq2gx43"
-        },
-        3: {
-          className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x2hg6jq xg01cxk xq2gx43"
-        }
-      }[!!(variant !== 'ghost') << 1 | !!!isPositioned << 0],
-      children: renderOptions()
-    }), {
-      placement: popoverPlacement,
-      alignment: 'start',
-      // The system's standard menu clearance, except in overlay mode:
-      // there the measured negative margin owns the block geometry and
-      // the menu is meant to sit on the trigger, not clear it.
-      offset: shouldOverlaySelectedItem ? undefined : spacingVars['--spacing-1'],
-      xstyle: [styles.popover, layerAnimations[popoverPlacement]],
-      style: popoverOffsetStyle
-    }), showStatusTooltip && statusTooltip.renderTooltip(status?.message ?? ''), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+    }), selectionSurface, showStatusTooltip && statusTooltip.renderTooltip(status?.message ?? ''), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
   if (inputGroup) {
     return selectorContent;

package/dist/Selector/SelectorBottomSheet.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file SelectorBottomSheet.tsx
+ * @input Uses BottomSheet, Section, and Heading
+ * @output Shared mobile listbox sheet for Selector and MultiSelector
+ * @position Internal presentation primitive for selection controls
+ */
+import { type ReactNode, type RefObject } from 'react';
+interface SelectorBottomSheetProps {
+    children: ReactNode;
+    finalFocusRef: RefObject<HTMLElement | null>;
+    initialFocusRef: RefObject<HTMLElement | null>;
+    isOpen: boolean;
+    label: string;
+    onOpenChange: (isOpen: boolean) => void;
+}
+export declare function SelectorBottomSheet({ children, finalFocusRef, initialFocusRef, isOpen, label, onOpenChange, }: SelectorBottomSheetProps): import("react").JSX.Element;
+export declare namespace SelectorBottomSheet {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=SelectorBottomSheet.d.ts.map

package/dist/Selector/SelectorBottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectorBottomSheet.d.ts","sourceRoot":"","sources":["../../src/Selector/SelectorBottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAA4B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsBhF,UAAU,wBAAwB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,eAAe,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAsBD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,aAAa,EACb,eAAe,EACf,MAAM,EACN,KAAK,EACL,YAAY,GACb,EAAE,wBAAwB,+BAyB1B;yBAhCe,mBAAmB"}

package/dist/Selector/SelectorBottomSheet.js

@@ -0,0 +1,83 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file SelectorBottomSheet.tsx
+ * @input Uses BottomSheet, Section, and Heading
+ * @output Shared mobile listbox sheet for Selector and MultiSelector
+ * @position Internal presentation primitive for selection controls
+ */
+import { lazy, Suspense, useEffect } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { Heading } from "../Heading/index.js";
+import { Section } from "../Section/index.js";
+import "../theme/tokens.stylex.js";
+import { spacingVars } from "../theme/tokens.stylex.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LazyBottomSheet = /*#__PURE__*/lazy(async () => import("../BottomSheet/BottomSheet.js").then(module => ({
+  default: module.BottomSheet
+})));
+const styles = {
+  heading: {
+    k1K539: "x1p37lm5",
+    kUOVxO: "xam6yil",
+    $$css: true
+  }
+};
+function SelectorBottomSheetInitialFocus({
+  isOpen,
+  targetRef
+}) {
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const frame = requestAnimationFrame(() => {
+      targetRef.current?.focus({
+        preventScroll: true
+      });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isOpen, targetRef]);
+  return null;
+}
+export function SelectorBottomSheet({
+  children,
+  finalFocusRef,
+  initialFocusRef,
+  isOpen,
+  label,
+  onOpenChange
+}) {
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: null,
+    children: /*#__PURE__*/_jsx(LazyBottomSheet, {
+      isOpen: isOpen,
+      onOpenChange: onOpenChange,
+      finalFocusRef: finalFocusRef,
+      label: label,
+      height: "hug",
+      purpose: "info",
+      children: /*#__PURE__*/_jsx(Section, {
+        paddingBlockStart: 4,
+        paddingBlockEnd: 0,
+        paddingInline: 1,
+        children: /*#__PURE__*/_jsxs("div", {
+          ...{
+            className: "xh8yej3"
+          },
+          children: [/*#__PURE__*/_jsx(Heading, {
+            level: 3,
+            xstyle: styles.heading,
+            children: label
+          }), children, /*#__PURE__*/_jsx(SelectorBottomSheetInitialFocus, {
+            isOpen: isOpen,
+            targetRef: initialFocusRef
+          })]
+        })
+      })
+    })
+  });
+}
+SelectorBottomSheet.displayName = 'SelectorBottomSheet';

package/dist/Selector/index.d.ts

@@ -3,7 +3,7 @@
  * @output Exports Selector and types
  * @position Public API entry point
  */
-export { Selector, type SelectorProps, type SelectorSize, type SelectorStatus, type SelectorStatusType, } from './Selector';
+export { Selector, type SelectorProps, type SelectorPresentation, type SelectorSize, type SelectorStatus, type SelectorStatusType, } from './Selector';
 export { SelectorOption } from './SelectorOption';
 export type { SelectorOptionType, SelectorOptionData, SelectorDivider, SelectorSection, } from './types';
 export { useCombobox, useSelectedItemOffset } from './hooks';

package/dist/Selector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Selector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,WAAW,EAAE,qBAAqB,EAAC,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Selector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,WAAW,EAAE,qBAAqB,EAAC,MAAM,SAAS,CAAC"}