@multiplatform.one/forms 7.66.0 → 7.68.0

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");
 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,
@@ -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,