@multiplatform.one/forms 7.65.2 → 7.67.0

package/dist/cjs/fields/Select/SheetPickerRow.native.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var SheetPickerRow_exports = {};
+__export(SheetPickerRow_exports, {
+  SheetPickerRow: () => SheetPickerRow
+});
+module.exports = __toCommonJS(SheetPickerRow_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_native = require("react-native");
+var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_sheetNavigation = require("../../shared/sheetNavigation.native.js");
+var import_InlineChoices = require("./InlineChoices.native.js");
+var useIsoLayoutEffect = typeof window === "undefined" ? import_react2.useEffect : import_react2.useLayoutEffect;
+function SheetPickerRow(param) {
+  var {
+    store,
+    label,
+    options,
+    value,
+    placeholder,
+    onValueChange,
+    onBlur,
+    disabled,
+    id,
+    knobProps,
+    markColor
+  } = param;
+  var _ref, _ref1, _ref2;
+  var pageId = `sheet-picker-${(0, import_react2.useId)()}`;
+  var pushed = (0, import_sheetNavigation.useSheetPageOpen)(store, pageId);
+  var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  var current = options.find(function (option) {
+    return option.value === value;
+  });
+  var textColor = knobProps.textAccentColor;
+  var chevronInk = (0, import_theme.useGlyphColor)("$textMuted");
+  var page = {
+    id: pageId,
+    title: label,
+    content: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InlineChoices.InlineChoices, {
+      options,
+      value,
+      onValueChange,
+      disabled,
+      "aria-label": label,
+      knobProps,
+      markColor
+    })
+  };
+  useIsoLayoutEffect(function () {
+    if (pushed) store.update(page);
+  });
+  (0, import_react2.useEffect)(function () {
+    return function () {
+      return store.remove(pageId);
+    };
+  }, [store, pageId]);
+  var open = function open2() {
+    if (disabled) return;
+    store.push(page);
+  };
+  var row = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    minHeight: knobProps.menuRow.minHeight,
+    paddingHorizontal: knobProps.panelPadding.padding,
+    ...knobProps.gap,
+    pointerEvents: "none",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: knobProps.body.fontWeight,
+      color: textColor,
+      numberOfLines: 1,
+      flex: 1,
+      children: label
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      testID: "sheet-picker-value",
+      fontFamily: knobProps.body.fontFamily,
+      color: "$textMuted",
+      numberOfLines: 1,
+      flexShrink: 1,
+      children: (_ref = current === null || current === void 0 ? void 0 : current.label) !== null && _ref !== void 0 ? _ref : placeholder
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretRightIcon, {
+      size: 14,
+      weight: "bold",
+      color: chevronInk
+    })]
+  });
+  var surface = {
+    ...knobProps.borderRadius,
+    borderColor: import_colorRamps.formInputColors.border.base,
+    backgroundColor: import_colorRamps.formInputColors.background.base,
+    overflow: "hidden",
+    width: "100%",
+    opacity: disabled ? 0.5 : 1
+  };
+  if (import_tamagui.isWeb) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      id,
+      role: "button",
+      "aria-label": label,
+      "aria-describedby": describedBy,
+      "aria-disabled": disabled || void 0,
+      "data-testid": "sheet-picker-row",
+      tabIndex: disabled ? -1 : 0,
+      cursor: disabled ? "default" : "pointer",
+      onPress: open,
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          open();
+        }
+      },
+      onBlur,
+      outlineWidth: 0,
+      focusVisibleStyle: import_theme.keyboardFocusRingProps,
+      ...surface,
+      children: row
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    ...surface,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+      testID: "sheet-picker-row",
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityValue: {
+        text: (_ref1 = (_ref2 = current === null || current === void 0 ? void 0 : current.label) !== null && _ref2 !== void 0 ? _ref2 : placeholder) !== null && _ref1 !== void 0 ? _ref1 : ""
+      },
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      disabled,
+      onPress: open,
+      children: row
+    })
+  });
+}
+//# sourceMappingURL=SheetPickerRow.native.js.map

package/dist/cjs/fields/Select/SheetPickerRow.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SheetPickerRow_exports","__export","SheetPickerRow","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react2","import_react_native","import_tamagui","import_fieldLayout","import_colorRamps","import_sheetNavigation","import_InlineChoices","useIsoLayoutEffect","window","useEffect","useLayoutEffect","param","store","label","options","placeholder","onValueChange","onBlur","disabled","id","knobProps","markColor","_ref","_ref1","_ref2","pageId","useId","pushed","useSheetPageOpen","describedBy","useFieldDescribedBy","current","find","option","textColor","textAccentColor","chevronInk","useGlyphColor","page","title","content","jsx","InlineChoices","update","remove","open","open2","push","row","jsxs","XStack","alignItems","minHeight","menuRow","paddingHorizontal","panelPadding","padding","gap","pointerEvents","children","Text","fontFamily","body","fontWeight","color","numberOfLines","flex","testID","flexShrink","CaretRightIcon","size","weight","surface","borderRadius","borderColor","formInputColors","border","base","backgroundColor","background","overflow","width","opacity","isWeb","View","role","tabIndex","cursor","onPress","onKeyDown","event","key","preventDefault","outlineWidth","focusVisibleStyle","keyboardFocusRingProps","Pressable","accessibilityRole","accessibilityLabel","accessibilityValue","text","accessibilityState"],"sources":["../../../../src/fields/Select/SheetPickerRow.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/Select/index.cjs

@@ -56,6 +56,7 @@ var import_floatingList = require("../../shared/floatingList.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_compactFace = require("../../FloatingPanel/compactFace.cjs");
 var import_PanelPortal = require("../../FloatingPanel/PanelPortal.cjs");
+var import_containingBlock = require("../../FloatingPanel/containingBlock.cjs");
 var import_overlayStack = require("../../shared/overlayStack.cjs");
 var import_useDragScroll = require("../../shared/useDragScroll.cjs");
 var import_tableCellContext = require("../../shared/tableCellContext.cjs");
@@ -63,7 +64,9 @@ var import_t = require("../../shared/t.cjs");
 var import_selectedOrder = require("../selectedOrder.cjs");
 var import_nativeSelect = require("../nativeSelect.cjs");
 var import_InlineChoices = require("./InlineChoices.cjs");
+var import_SheetPickerRow = require("./SheetPickerRow.cjs");
 var import_shouldInlineChoices = require("./shouldInlineChoices.cjs");
+var import_sheetNavigation = require("../../shared/sheetNavigation.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const actionSheetIOS = ReactNative.ActionSheetIOS;
 const selectOutlineRest = {
@@ -91,7 +94,7 @@ const SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
     // LC-262: the accent check alone marks the chosen row, never a grey fill.
     selected: {
       true: {
-        backgroundColor: "transparent",
+        ...import_theme2.menuRowChecked,
         borderRadius: 0
       },
       false: {
@@ -380,6 +383,7 @@ function FloatingSelectCore({
   } = knobProps.elevatedSurface;
   const hydrationTouch = (0, import_theme.useTouchSurface)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const beside = (0, import_overlayStack.useInsideOverlay)() && !inTableCell && (0, import_shouldInlineChoices.opensBesideTrigger)(options.length);
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const glyphColor = (0, import_theme2.useGlyphColor)();
   const [open, setOpen] = (0, import_react.useState)(false);
@@ -496,7 +500,30 @@ function FloatingSelectCore({
     const selectedItemIndex = selectedIndex >= 0 ? selectedIndex : 0;
     const selectedItem = listItemsRef.current[selectedItemIndex];
     const trigger = panel.triggerRef.current;
-    if (!dropdownElement || !selectedItem || !trigger) return;
+    if (!dropdownElement || !trigger) return;
+    if (beside) {
+      const isInitial2 = panel.initializingRef.current;
+      if (isInitial2) dropdownElement.style.transition = "none";
+      const bounds = trigger.getBoundingClientRect();
+      const contentHeight = dropdownElement.scrollHeight;
+      const below = window.innerHeight - import_FloatingPanel.panelViewportPadding - bounds.bottom;
+      const above = bounds.top - import_FloatingPanel.panelViewportPadding;
+      const opensUp = contentHeight > below && above > below;
+      const maxHeight = Math.min(contentHeight || Infinity, opensUp ? above : below);
+      const top2 = (opensUp ? bounds.top - maxHeight : bounds.bottom) - (0, import_containingBlock.fixedContainingBlockOrigin)(dropdownElement).top;
+      dropdownElement.style.top = `${top2}px`;
+      dropdownElement.style.maxHeight = `${maxHeight}px`;
+      dropdownElement.style.height = "";
+      overlayStyle.current = {
+        top: top2,
+        maxHeight
+      };
+      panel.initializingRef.current = false;
+      void dropdownElement.offsetHeight;
+      if (isInitial2) dropdownElement.style.transition = panel.panelTransition;
+      return;
+    }
+    if (!selectedItem) return;
     const isInitial = panel.initializingRef.current;
     if (isInitial) dropdownElement.style.transition = "none";
     if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
@@ -602,7 +629,7 @@ function FloatingSelectCore({
         });
       }
     });
-  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length]);
+  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length, beside]);
   repositionRef.current = repositionOverlay;
   (0, import_react.useLayoutEffect)(() => {
     if (!open || !panel.mounted) return;
@@ -1245,6 +1272,10 @@ function NativeSelectCore({
     },
     sheet: true,
     compactFace,
+    ...(asMenu && insideOverlay && (0, import_shouldInlineChoices.opensBesideTrigger)(options.length) ? {
+      anchorMode: "attach",
+      triggerEcho: false
+    } : null),
     triggerA11y: {
       label: ariaLabel ?? fieldA11y?.label,
       value: triggerValueText,
@@ -1398,6 +1429,13 @@ function Select({
     multiple,
     options
   });
+  const sheetNavigation = (0, import_sheetNavigation.useSheetNavigation)();
+  const rowLabel = typeof label === "string" ? label : ariaLabel;
+  const pushed = !inline && !inTableCell && Boolean(rowLabel) && (0, import_shouldInlineChoices.shouldPushChoices)({
+    inSheet: Boolean(sheetNavigation),
+    multiple,
+    options
+  });
   if (!inline) {
     (0, import_devWarn.warnSelectTooFewOptions)({
       count: options?.length ?? 0,
@@ -1456,6 +1494,25 @@ function Select({
   };
   const renderSelectContent = (selectValue, handleValueChange, handleBlur) => {
     if (readOnly) return renderReadOnly(selectValue);
+    if (pushed && sheetNavigation) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SheetPickerRow.SheetPickerRow, {
+        store: sheetNavigation,
+        label: rowLabel,
+        options,
+        value: typeof selectValue === "string" ? selectValue : void 0,
+        placeholder,
+        onValueChange: val => {
+          if (disabled) return;
+          handleValueChange?.(val);
+          emitValueChange(val);
+        },
+        onBlur: handleBlur,
+        disabled,
+        id,
+        knobProps,
+        markColor
+      });
+    }
     if (inline) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InlineChoices.InlineChoices, {
         options,
@@ -1500,7 +1557,8 @@ function Select({
   if (!resolvedForm || !name) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
-      label,
+      label: pushed ? void 0 : label,
+      "aria-label": pushed ? rowLabel : void 0,
       labelProps,
       error,
       helperText,
@@ -1524,7 +1582,8 @@ function Select({
       const resolvedError = (0, import_utils.getFieldError)(field, error);
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
         id,
-        label,
+        label: pushed ? void 0 : label,
+        "aria-label": pushed ? rowLabel : void 0,
         labelProps,
         error: resolvedError,
         helperText,

package/dist/cjs/fields/Select/index.native.js

@@ -59,6 +59,7 @@ var import_floatingList = require("../../shared/floatingList.native.js");
 var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
 var import_compactFace = require("../../FloatingPanel/compactFace.native.js");
 var import_PanelPortal = require("../../FloatingPanel/PanelPortal.native.js");
+var import_containingBlock = require("../../FloatingPanel/containingBlock.native.js");
 var import_overlayStack = require("../../shared/overlayStack.native.js");
 var import_useDragScroll = require("../../shared/useDragScroll.native.js");
 var import_tableCellContext = require("../../shared/tableCellContext.native.js");
@@ -66,7 +67,9 @@ var import_t = require("../../shared/t.native.js");
 var import_selectedOrder = require("../selectedOrder.native.js");
 var import_nativeSelect = require("../nativeSelect.native.js");
 var import_InlineChoices = require("./InlineChoices.native.js");
+var import_SheetPickerRow = require("./SheetPickerRow.native.js");
 var import_shouldInlineChoices = require("./shouldInlineChoices.native.js");
+var import_sheetNavigation = require("../../shared/sheetNavigation.native.js");
 var actionSheetIOS = ReactNative.ActionSheetIOS;
 var selectOutlineRest = {
   outlineWidth: 0,
@@ -93,7 +96,7 @@ var SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
     // LC-262: the accent check alone marks the chosen row, never a grey fill.
     selected: {
       true: {
-        backgroundColor: "transparent",
+        ...import_theme2.menuRowChecked,
         borderRadius: 0
       },
       false: {
@@ -490,6 +493,7 @@ function FloatingSelectCore(param) {
   } = knobProps.elevatedSurface;
   var hydrationTouch = (0, import_theme.useTouchSurface)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  var beside = (0, import_overlayStack.useInsideOverlay)() && !inTableCell && (0, import_shouldInlineChoices.opensBesideTrigger)(options.length);
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var glyphColor = (0, import_theme2.useGlyphColor)();
   var [open, setOpen] = (0, import_react.useState)(false);
@@ -646,9 +650,32 @@ function FloatingSelectCore(param) {
     var selectedItemIndex = selectedIndex >= 0 ? selectedIndex : 0;
     var selectedItem = listItemsRef.current[selectedItemIndex];
     var trigger = panel.triggerRef.current;
-    if (!dropdownElement || !selectedItem || !trigger) return;
-    var isInitial = panel.initializingRef.current;
-    if (isInitial) dropdownElement.style.transition = "none";
+    if (!dropdownElement || !trigger) return;
+    if (beside) {
+      var isInitial = panel.initializingRef.current;
+      if (isInitial) dropdownElement.style.transition = "none";
+      var bounds = trigger.getBoundingClientRect();
+      var contentHeight = dropdownElement.scrollHeight;
+      var below = window.innerHeight - import_FloatingPanel.panelViewportPadding - bounds.bottom;
+      var above = bounds.top - import_FloatingPanel.panelViewportPadding;
+      var opensUp = contentHeight > below && above > below;
+      var maxHeight = Math.min(contentHeight || Infinity, opensUp ? above : below);
+      var top = (opensUp ? bounds.top - maxHeight : bounds.bottom) - (0, import_containingBlock.fixedContainingBlockOrigin)(dropdownElement).top;
+      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.maxHeight = `${maxHeight}px`;
+      dropdownElement.style.height = "";
+      overlayStyle.current = {
+        top,
+        maxHeight
+      };
+      panel.initializingRef.current = false;
+      void dropdownElement.offsetHeight;
+      if (isInitial) dropdownElement.style.transition = panel.panelTransition;
+      return;
+    }
+    if (!selectedItem) return;
+    var isInitial1 = panel.initializingRef.current;
+    if (isInitial1) dropdownElement.style.transition = "none";
     if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
       programmaticScrollRef.current++;
       dropdownElement.scrollTop = 0;
@@ -678,42 +705,42 @@ function FloatingSelectCore(param) {
       pinnedTopRef.current = pinnedTop;
       pinnedHeightRef.current = pinnedHeight;
     }
-    var top = pinnedTopRef.current;
+    var top1 = pinnedTopRef.current;
     var height = pinnedHeightRef.current;
     if (grownRef.current) {
-      var canGrowDown = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top + height));
+      var canGrowDown = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top1 + height));
       height += canGrowDown;
-      var canGrowUp = Math.max(0, top - import_FloatingPanel.panelViewportPadding);
-      top -= canGrowUp;
+      var canGrowUp = Math.max(0, top1 - import_FloatingPanel.panelViewportPadding);
+      top1 -= canGrowUp;
       height += canGrowUp;
     }
     if (growUpOnlyRef.current) {
-      var canGrowUp1 = Math.max(0, top - import_FloatingPanel.panelViewportPadding);
-      top -= canGrowUp1;
+      var canGrowUp1 = Math.max(0, top1 - import_FloatingPanel.panelViewportPadding);
+      top1 -= canGrowUp1;
       height += canGrowUp1;
     }
     if (growDownOnlyRef.current) {
-      var canGrowDown1 = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top + height));
+      var canGrowDown1 = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top1 + height));
       height += canGrowDown1;
     }
-    height = Math.min(height, viewportHeight - top - import_FloatingPanel.panelViewportPadding);
+    height = Math.min(height, viewportHeight - top1 - import_FloatingPanel.panelViewportPadding);
     height = Math.min(height, totalContentHeight);
     height = Math.max(120, height);
     var availableViewport = viewportHeight - 2 * import_FloatingPanel.panelViewportPadding;
     if ((grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current) && height < availableViewport) {
       if (panel.placement.startsWith("top")) {
-        top = import_FloatingPanel.panelViewportPadding;
+        top1 = import_FloatingPanel.panelViewportPadding;
       } else {
-        top = viewportHeight - import_FloatingPanel.panelViewportPadding - height;
+        top1 = viewportHeight - import_FloatingPanel.panelViewportPadding - height;
       }
     }
     var cachedOverlayStyle = overlayStyle.current;
-    if (!cachedOverlayStyle || cachedOverlayStyle.top !== top || cachedOverlayStyle.maxHeight !== height) {
-      dropdownElement.style.top = `${top}px`;
+    if (!cachedOverlayStyle || cachedOverlayStyle.top !== top1 || cachedOverlayStyle.maxHeight !== height) {
+      dropdownElement.style.top = `${top1}px`;
       dropdownElement.style.maxHeight = `${height}px`;
       dropdownElement.style.height = "";
       overlayStyle.current = {
-        top,
+        top: top1,
         maxHeight: height
       };
       void dropdownElement.offsetHeight;
@@ -721,7 +748,7 @@ function FloatingSelectCore(param) {
     if (!grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
       var maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
       if (selectedIndex >= 0) {
-        var neededScroll = top + selectedItem.offsetTop - triggerBounds.top;
+        var neededScroll = top1 + selectedItem.offsetTop - triggerBounds.top;
         var clampedScrollTop = Math.max(0, Math.min(neededScroll, maxScrollTop));
         if (Math.abs(dropdownElement.scrollTop - clampedScrollTop) > 0.5) {
           programmaticScrollRef.current++;
@@ -729,14 +756,14 @@ function FloatingSelectCore(param) {
         }
         if (Math.abs(neededScroll - clampedScrollTop) > 0.5) {
           var scrollDeficit = neededScroll - clampedScrollTop;
-          top -= scrollDeficit;
-          top = Math.max(import_FloatingPanel.panelViewportPadding, top);
+          top1 -= scrollDeficit;
+          top1 = Math.max(import_FloatingPanel.panelViewportPadding, top1);
           var remainingContentHeight = totalContentHeight - clampedScrollTop;
-          var adjustedMaxHeight = Math.min(remainingContentHeight, viewportHeight - top - import_FloatingPanel.panelViewportPadding);
-          dropdownElement.style.top = `${top}px`;
+          var adjustedMaxHeight = Math.min(remainingContentHeight, viewportHeight - top1 - import_FloatingPanel.panelViewportPadding);
+          dropdownElement.style.top = `${top1}px`;
           dropdownElement.style.maxHeight = `${adjustedMaxHeight}px`;
           overlayStyle.current = {
-            top,
+            top: top1,
             maxHeight: adjustedMaxHeight
           };
         }
@@ -744,7 +771,7 @@ function FloatingSelectCore(param) {
     }
     panel.initializingRef.current = false;
     void dropdownElement.offsetHeight;
-    if (isInitial) dropdownElement.style.transition = panel.panelTransition;
+    if (isInitial1) dropdownElement.style.transition = panel.panelTransition;
     requestAnimationFrame(function () {
       if (dropdownElement) {
         panel.updateArrows(dropdownElement);
@@ -753,7 +780,7 @@ function FloatingSelectCore(param) {
         });
       }
     });
-  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length]);
+  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length, beside]);
   repositionRef.current = repositionOverlay;
   (0, import_react.useLayoutEffect)(function () {
     if (!open || !panel.mounted) return;
@@ -1508,6 +1535,10 @@ function NativeSelectCore(param) {
     // A short list opens as a menu over its trigger; a long one keeps its
     // sheet at page level and opens as a menu inside another overlay (FZ-7830).
     compactFace,
+    ...(asMenu && insideOverlay && (0, import_shouldInlineChoices.opensBesideTrigger)(options.length) ? {
+      anchorMode: "attach",
+      triggerEcho: false
+    } : null),
     triggerA11y: {
       label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : fieldA11y === null || fieldA11y === void 0 ? void 0 : fieldA11y.label,
       value: triggerValueText,
@@ -1684,6 +1715,13 @@ function Select(param) {
     multiple,
     options
   });
+  var sheetNavigation = (0, import_sheetNavigation.useSheetNavigation)();
+  var rowLabel = typeof label === "string" ? label : ariaLabel;
+  var pushed = !inline && !inTableCell && Boolean(rowLabel) && (0, import_shouldInlineChoices.shouldPushChoices)({
+    inSheet: Boolean(sheetNavigation),
+    multiple,
+    options
+  });
   if (!inline) {
     var _ref1;
     (0, import_devWarn.warnSelectTooFewOptions)({
@@ -1753,6 +1791,25 @@ function Select(param) {
   };
   var renderSelectContent = function renderSelectContent2(selectValue, handleValueChange, handleBlur) {
     if (readOnly) return renderReadOnly(selectValue);
+    if (pushed && sheetNavigation) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SheetPickerRow.SheetPickerRow, {
+        store: sheetNavigation,
+        label: rowLabel,
+        options,
+        value: typeof selectValue === "string" ? selectValue : void 0,
+        placeholder,
+        onValueChange: function onValueChange2(val) {
+          if (disabled) return;
+          handleValueChange === null || handleValueChange === void 0 ? void 0 : handleValueChange(val);
+          emitValueChange(val);
+        },
+        onBlur: handleBlur,
+        disabled,
+        id,
+        knobProps,
+        markColor
+      });
+    }
     if (inline) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InlineChoices.InlineChoices, {
         options,
@@ -1797,7 +1854,8 @@ function Select(param) {
   if (!resolvedForm || !name) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
-      label,
+      label: pushed ? void 0 : label,
+      "aria-label": pushed ? rowLabel : void 0,
       labelProps,
       error,
       helperText,
@@ -1823,7 +1881,8 @@ function Select(param) {
       var resolvedError = (0, import_utils.getFieldError)(field, error);
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
         id,
-        label,
+        label: pushed ? void 0 : label,
+        "aria-label": pushed ? rowLabel : void 0,
         labelProps,
         error: resolvedError,
         helperText,