@multiplatform.one/forms 7.56.0 → 7.58.0

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTouchSurface } from "@multiplatform.one/theme";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, memo } from "react";
 import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import { useClick, useDismiss, useInteractions, useListNavigation, useRole, useTypeahead, FloatingFocusManager } from "@floating-ui/react";
 import { ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame, sizeRecipeForToken, useGlyphColor, wasKeyboardFocus, transitionProps, Text as HouseText } from "@multiplatform.one/theme";
@@ -17,8 +17,9 @@ import { warnSelectTooFewOptions } from "../../shared/devWarn.native.js";
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
 import { ScrollArrow } from "../../shared/floatingList.native.js";
 import { FloatingPanel, useFloatingPanel, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.native.js";
+import { pickerCompactFace, resolveCompactFace } from "../../FloatingPanel/compactFace.native.js";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal.native.js";
-import { useOverlayZIndex } from "../../shared/overlayStack.native.js";
+import { useInsideOverlay, useOverlayZIndex } from "../../shared/overlayStack.native.js";
 import { useDragScroll } from "../../shared/useDragScroll.native.js";
 import { useIsInTableCell } from "../../shared/tableCellContext.native.js";
 import { t } from "../../shared/t.native.js";
@@ -1124,6 +1125,9 @@ function NativeSelectCore(param) {
     native
   } = param;
   var _ref, _ref1, _ref2;
+  var insideOverlay = useInsideOverlay();
+  var compactFace = pickerCompactFace(options.length);
+  var asMenu = resolveCompactFace(compactFace, insideOverlay) === "menu";
   var hydrationTouch = useTouchSurface();
   var describedBy = useFieldDescribedBy();
   var fieldA11y = useFieldA11y();
@@ -1354,7 +1358,7 @@ function NativeSelectCore(param) {
     })]
   });
   var triggerValueText = multiple ? selectedValues.length > 0 ? selectedValues.map(getLabel).join(", ") : placeholder : (_ref1 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref1 !== void 0 ? _ref1 : placeholder;
-  if (shouldUseIosNativeSelect({
+  if (!asMenu && shouldUseIosNativeSelect({
     native,
     multiple,
     isWeb,
@@ -1433,6 +1437,9 @@ function NativeSelectCore(param) {
       if (!val) onBlur === null || onBlur === void 0 ? void 0 : onBlur();
     },
     sheet: true,
+    // 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,
     triggerA11y: {
       label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : fieldA11y === null || fieldA11y === void 0 ? void 0 : fieldA11y.label,
       value: triggerValueText,
@@ -1540,6 +1547,15 @@ function NativeSelectCore(param) {
     children: listContent
   });
 }
+var subscribeNothing = function subscribeNothing2() {
+  return function () {};
+};
+var clientSnapshot = function clientSnapshot2() {
+  return true;
+};
+var serverSnapshot = function serverSnapshot2() {
+  return false;
+};
 function Select(param) {
   var {
     name,
@@ -1570,7 +1586,7 @@ function Select(param) {
     "aria-label": ariaLabel,
     ...rest
   } = param;
-  var _ref;
+  var _ref, _ref1;
   var emitValueChange = function emitValueChange2(val) {
     onChange === null || onChange === void 0 ? void 0 : onChange(val);
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(val);
@@ -1595,8 +1611,11 @@ function Select(param) {
     id
   });
   var viewportGtSm = useViewportGtSm();
+  var insideOverlay = useInsideOverlay();
   var effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
-  var shouldUseSheet = !isWeb || !effectiveGtSm;
+  var hydrated = useSyncExternalStore(subscribeNothing, clientSnapshot, serverSnapshot);
+  var compactMenu = hydrated && resolveCompactFace(pickerCompactFace((_ref1 = options === null || options === void 0 ? void 0 : options.length) !== null && _ref1 !== void 0 ? _ref1 : 0), insideOverlay) === "menu";
+  var shouldUseSheet = !isWeb || !effectiveGtSm && !compactMenu;
   if (skeleton) {
     return /* @__PURE__ */_jsxs(InputParts, {
       size: sizeProp || knobProps.sizeToken,