@multiplatform.one/forms 7.81.0 → 7.81.2

package/dist/jsx/shared/floatingList.native.js

@@ -27,10 +27,10 @@ __export(floatingList_exports, {
   ScrollArrow: () => ScrollArrow,
   SyncFocusToOpen: () => SyncFocusToOpen,
   clampDropdownRadius: () => clampDropdownRadius,
-  growOnScroll: () => growOnScroll,
-  placeCheckedOnField: () => placeCheckedOnField,
-  scrollArrowBand: () => scrollArrowBand,
-  scrollArrowThreshold: () => scrollArrowThreshold
+  growOnScroll: () => import_checkedOnField2.growOnScroll,
+  placeCheckedOnField: () => import_checkedOnField2.placeCheckedOnField,
+  scrollArrowBand: () => import_checkedOnField2.scrollArrowBand,
+  scrollArrowThreshold: () => import_checkedOnField2.scrollArrowThreshold
 });
 module.exports = __toCommonJS(floatingList_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -40,6 +40,8 @@ var import_react2 = require("@phosphor-icons/react");
 var import_theme2 = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_InputParts = require("../InputParts/index.native.js");
+var import_checkedOnField = require("./checkedOnField.native.js");
+var import_checkedOnField2 = require("./checkedOnField.native.js");
 var dropdownMaxRadiusTokenNum = 8;
 function clampDropdownRadius(fieldRadius) {
   if (fieldRadius === "$0") return 0;
@@ -61,90 +63,6 @@ function SyncFocusToOpen(param) {
   }, [open, setFocused]);
   return null;
 }
-var scrollArrowThreshold = 8;
-function scrollArrowBand(rowHeight) {
-  return Math.round(rowHeight / 2);
-}
-var clamp = function clamp2(value, low, high) {
-  return Math.max(low, Math.min(high, value));
-};
-function placeCheckedOnField(input) {
-  var _input_threshold;
-  var {
-    fieldTop,
-    fieldBottom,
-    rowTop,
-    rowHeight,
-    contentHeight,
-    boundsTop,
-    boundsBottom,
-    band
-  } = input;
-  var threshold = (_input_threshold = input.threshold) !== null && _input_threshold !== void 0 ? _input_threshold : scrollArrowThreshold;
-  var target = clamp((fieldTop + fieldBottom) / 2 - rowHeight / 2, boundsTop, boundsBottom - rowHeight);
-  if (contentHeight <= boundsBottom - boundsTop) {
-    var top = clamp(target - rowTop, boundsTop, boundsBottom - contentHeight);
-    return {
-      top,
-      height: contentHeight,
-      scrollTop: 0
-    };
-  }
-  var top1 = target - rowTop;
-  var scrollTop = 0;
-  if (top1 < boundsTop) {
-    scrollTop = boundsTop - top1;
-    top1 = boundsTop;
-  }
-  var end = function end2() {
-    return top1 - scrollTop + contentHeight;
-  };
-  var bottom = function bottom2() {
-    return Math.min(boundsBottom, end());
-  };
-  var checkedTop = function checkedTop2() {
-    return top1 - scrollTop + rowTop;
-  };
-  if (end() - bottom() > threshold) {
-    var short = checkedTop() + rowHeight - (bottom() - band);
-    if (short > 0) {
-      var lift = scrollTop > 0 ? 0 : Math.min(short, top1 - boundsTop);
-      top1 -= lift;
-      scrollTop += short - lift;
-    }
-  }
-  if (scrollTop > threshold) {
-    var short1 = top1 + band - checkedTop();
-    if (short1 > 0) scrollTop = Math.max(0, scrollTop - short1);
-  }
-  if (scrollTop > 0 && scrollTop <= threshold) {
-    top1 += scrollTop;
-    scrollTop = 0;
-  }
-  return {
-    top: top1,
-    height: bottom() - top1,
-    scrollTop
-  };
-}
-function growOnScroll(param) {
-  var {
-    top,
-    height,
-    scrollTop,
-    contentHeight,
-    boundsTop,
-    boundsBottom
-  } = param;
-  var origin = top - scrollTop;
-  var nextTop = Math.min(top, Math.max(boundsTop, origin));
-  var nextBottom = Math.max(top + height, Math.min(boundsBottom, origin + contentHeight));
-  return {
-    top: nextTop,
-    height: nextBottom - nextTop,
-    scrollTop: nextTop - origin
-  };
-}
 function ScrollArrow(param) {
   var {
     direction,
@@ -256,7 +174,7 @@ function ScrollArrow(param) {
     knobProps
   } = (0, import_theme2.useResolvedKnobs)();
   var iconSize = knobProps.controlIcon.width;
-  var band = bandProp !== null && bandProp !== void 0 ? bandProp : scrollArrowBand(knobProps.menuRow.minHeight);
+  var band = bandProp !== null && bandProp !== void 0 ? bandProp : (0, import_checkedOnField.scrollArrowBand)(knobProps.menuRow.minHeight);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     position: "sticky",
     top: isUp ? topOffset : void 0,

package/dist/jsx/shared/floatingList.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","floatingList_exports","ScrollArrow","SyncFocusToOpen","clampDropdownRadius","growOnScroll","placeCheckedOnField","scrollArrowBand","scrollArrowThreshold","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react2","import_theme2","import_tamagui","import_InputParts","dropdownMaxRadiusTokenNum","fieldRadius","startsWith","num","Number","parseInt","slice","param","open","setFocused","FocusContext","useStyledContext","useEffect","rowHeight","Math","round","clamp","clamp2","low","high","max","min","input","_input_threshold","fieldTop","fieldBottom","rowTop","contentHeight","boundsTop","boundsBottom","band","threshold","top","height","scrollTop","top1","end","end2","bottom","bottom2","checkedTop","checkedTop2","short","lift","short1","origin","nextTop","nextBottom","direction","scrollRef","visible","arrowScrollDirRef","topOffset","bandProp","isUp","animationFrameRef","useRef","lastTimeRef","resumeTimerRef","hoveringRef","activeRef","selfScrollingRef","resumeDelay","stopLoop","useCallback","current","cancelAnimationFrame","startLoop","performance","now","tick","tick1","el","elapsed","px","scrollHeight","clientHeight","requestAnimationFrame","openTimestampRef","handlePointerEnter","wasOverOnOpen","clearTimeout","setTimeout","handlePointerLeave","onScroll","onScroll2","addEventListener","passive","removeEventListener"],"sources":["../../../src/shared/floatingList.tsx"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AACT,IAAAA,SAAyB,GAAAC,MAAa,CAAAC,cAAW;AACjD,IAAAC,gBAAS,GAAAF,MAAe,CAAAG,wBAAmB;AAC3C,IAAAC,iBAAS,GAAAJ,MAAA,CAAAK,mBAAwB;AACjC,IAAAC,YAAS,GAAAN,MAAY,CAAAO,SAAA,CAAAC,cAAA;AACrB,IAAAC,QAAS,GAAAA,CAAAC,MAAA,EAAAC,GAAA,KAAoB;EA6SnB,SAAAC,IAAA,IAAAD,GAAA,EA3SVZ,SAAM,CAAAW,MAAA,EAAAE,IAAA;IAAAC,GAAA,EAA4BF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AAE3B;AACL,IAAAC,WAAI,GAAAA,CAAAC,EAAA,EAAgBC,IAAM,EAAAC,MAAO,EAAAC,IAAA;EACjC,IAAIF,IAAA,IAAO,OAAAA,IAAA,KAAgB,YAAY,OAAAA,IAAY,eAAc,EAAG;IAClE,SAAMG,GAAM,IAAAhB,iBAAgB,CAAAa,IAAA,GAC5B,KAAOX,YAAM,CAAAe,IAAA,CAAAL,EAAA,EAAAI,GAAA,KAAAA,GAAA,KAAgCF,MAAA,EAC/CnB,SAAA,CAAAiB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EACA;EACF,OAAAE,EAAA;AAEO;AACL,IAAAM,YAAQ,GAAAC,GAAW,IAAIR,WAAa,CAAAhB,SAAA,iBAAiB;EAAAyB,KAAA;AAAA,IAAAD,GAAA;AACrD,IAAAE,oBAAgB;AACdhB,QAAA,CAAAgB,oBAAe;EACjBC,WAAU,EAAAA,CAAA,KAAAA,WAAW;EACrBC,eAAO,EAAAA,CAAA,KAAAA,eAAA;EACTC,mBAAA,EAAAA,CAAA,KAAAA,mBAAA;EAEOC,YAAM,EAAAA,CAAA,KAAAA,YAAuB;EAO7BC,mBAAS,EAAAA,CAAA,KAAgBA,mBAA2B;EACzDC,eAAY,EAAAA,CAAA,KAAMA,eAAa;EACjCC,oBAAA,EAAAA,CAAA,KAAAA;AA0BA;AAcOC,MAAA,CAAAC,OAAS,GAAAZ,YAAoB,CAAAG,oBAA0C;AAC5E,IAAAU,kBAAkB,GAAAC,OAAA,CAAa,mBAAmB;AAElD,IAAAC,YAAM,GAAAD,OAAkB,2BAAa;AACrC,IAAAE,YAAM,GAASF,OAAA;AAAA,IAAAG,aACD,GAAAH,OAAA,wBAA+B;AAAA,IAC3CI,aAAA,GAAAJ,OAAA;AAAA,IACAK,cAAA,GAAeL,OAAA;AAAA,IACjBM,iBAAA,GAAAN,OAAA;AACA,IAAAO,yBAAqB;AACnB,SAAAf,mBAAkBA,CAAAgB,WAAiB;EACnC,IAAAA,WAAS,SAAK,SAAQ;EACxB,WAAAA,WAAA,iBAAAA,WAAA,CAAAC,UAAA;IACA,IAAIC,GAAA,GAAMC,MAAA,CAASC,QAAA,CAAAJ,WAAA,CAAAK,KAAA;IACnB,OAAIH,GAAA,GAAAH,yBAAY,OAAAA,yBAAA,KAAAC,WAAA;EAChB;EACE,OAAAA,WAAY;AACZ;AAAM,SACRjB,gBAAAuB,KAAA;EACA;IAAMC;EAAA,CAAM,GAAAD,KAAM;EAClB;IAAME;EAAS,IAAMV,iBAAS,CAAAW,YAAmB,CAAAC,gBAAA;EACjD,IAAAhB,YAAM,CAAAiB,SAAmB,cAAM;IAE/BH,UAAY,CAAAD,IAAA;EACV,IACAA,IAAI,EACFC,UAAM,CACN;EACA;AAAqB;AACvB,IACFpB,oBAAA;AAEA,SAAID,eAAYA,CAAAyB,SAAW;EACzB,OAAAC,IAAM,CAAAC,KAAQ,CAAAF,SAAM,GAAO;AAC3B;AAAwD,IAC1DG,KAAA,YAAAC,OAAApC,KAAA,EAAAqC,GAAA,EAAAC,IAAA;EAEA,OAAIL,IAAA,CAAAM,GAAA,CAAYF,GAAA,EAAKJ,IAAA,CAAAO,GAAA,CAAAF,IAAa,EAAAtC,KAAA;AAChC;AACA,SAAAM,mBAAYA,CAAAmC,KAAA;EACd,IAAAC,gBAAA;EACA;IAAAC,QAAc;IAAAC,WAAQ;IAAOC,MAAI;IAAAb,SAAK;IAAUc,aAAA;IAAAC,SAAA;IAAAC,YAAA;IAAAC;EAAA,IAAAR,KAAA;EAClD,IAAAS,SAAA,IAAAR,gBAAA,GAAAD,KAAA,CAAAS,SAAA,cAAAR,gBAAA,cAAAA,gBAAA,GAAAlC,oBAAA;EAQO,IAAAtB,MAAS,GAAAiD,KAAA,EAAaQ,QAAA,GAAAC,WAAA,QAAAZ,SAAA,MAAAe,SAAA,EAAAC,YAAA,GAAAhB,SAAA;EAC3B,IAAAc,aAAA,IAAAE,YAAA,GAAAD,SAAA;IACA,IAAAI,GAAA,GAAAhB,KAAA,CAAAjD,MAAA,GAAA2D,MAAA,EAAAE,SAAA,EAAAC,YAAA,GAAAF,aAAA;IACA;MACAK,GAAA;MACAC,MAAA,EAAAN,aAAA;MACAO,SAAA;IAKe;EACf;EACA,IAAAC,IAAM,GAAApE,MAAU,GAAA2D,MAAS;EACzB,IAAAQ,SAAM;EACN,IAAAC,IAAO,GAAEP,SAAK;IAChBM,SAAA,GAAAN,SAAA,GAAAO,IAAA;IAIOA,IAAA,GAASP,SAAA;EACd;EACA,IAAAQ,GAAA,YAAAC,KAAA;IACA,OAAAF,IAAA,GAAAD,SAAA,GAAAP,aAAA;EACA;EACA,IAAAW,MAAA,GAAY,SAAAC,QAAA;IACZ,OAAMzB,IAAA,CAAAO,GAAA,CAAAQ,YAAA,EAAAO,GAAA;EACR,CASG;EACD,IAAAI,UAAa,YAAAC,WAAcA,CAAA;IAC3B,OAAMN,IAAA,GAAAD,SAAA,GAAoBR,MAAQ;EAClC;EACA,IAAAU,GAAM,KAAAE,MAAA,KAAiBP,SAA6C,EAAI;IACxE,IAAMW,KAAA,GAAAF,UAAc,KAAO3B,SAAK,IAAAyB,MAAA,KAAAR,IAAA;IAChC,IAAMY,KAAA;MACN,IAAMC,IAAA,GAAAT,SAAA,GAAmB,KAAO,GAAApB,IAAK,CAAAO,GAAA,CAAAqB,KAAA,EAAAP,IAAA,GAAAP,SAAA;MACrCO,IAAM,IAAAQ,IAAA;MAENT,SAAM,IAAWQ,KAAA,GAAAC,IAAY;IAC3B;EACA;EACA,IAAAT,SAAA,GAAAH,SAAkB;IACpB,IAAKa,MAAA,GAAAT,IAAA,GAAAL,IAAA,GAAAU,UAAA;IAEL,IAAMI,MAAA,MAAYV,SAAA,GAAYpB,IAAA,CAAAM,GAAM,IAAAc,SAAA,GAAAU,MAAA;EAClC;EACA,IAAAV,SAAU,QAAAA,SAAU,IAAAH,SAAA;IACpBI,IAAA,IAAAD,SAAY;IACZA,SAAM,IAAO;EACX;EACA;IACEF,GAAA,EAAAG,IAAA;IACAF,MAAA,EAAAK,MAAA,KAAAH,IAAA;IAAAD;EAEF;AACA;AACA,SAAAhD,YAAYA,CAAAqB,KAAA,EAAU;EACtB;IAAAyB,GAAA;IAAMC,MAAK;IAAAC,SAAK;IAAAP,aAAA;IAAAC,SAAA;IAAAC;EAAA,IAAAtB,KAAA;EAAA,IAAAsC,MACd,GAAAb,GAAU,GAAAE,SAAA;EAAA,IAAAY,OACL,GAAAhC,IAAI,CAAAO,GAAO,CAAAW,GAAG,EAAAlB,IAAA,CAAAM,GAAA,CAAYQ,SAAG,EAAAiB,MAAA,CAAe;EAAiC,IACpFE,UAAA,GAAAjC,IAAA,CAAAM,GAAA,CAAAY,GAAA,GAAAC,MAAA,EAAAnB,IAAA,CAAAO,GAAA,CAAAQ,YAAA,EAAAgB,MAAA,GAAAlB,aAAA;EACA;IACEK,GAAA,EAAAc,OAAA;IACAb,MAAA,EAAAc,UAAA,GAAAD,OAAkB;IAClBZ,SAAG,EAAAY,OAAA,GAAaD;EAAa;AAE/B;AAAsD,SACxD9D,YAAAwB,KAAA;EACA;IAAAyC,SAAA;IAAAC,SAAkB;IAAAC,OAAU;IAAAC,iBAAsB;IAAIC,SAAA;IAAAtB,IAAA,EAAAuB;EAAA,IAAA9C,KAAA;EACxD,IAAI+C,IAAA,GAAMN,SAAU;EAEpB,IAAAO,iBAAM,IAAmB,GAAA5D,YAAQ,CAAA6D,MAAA;EACjC,IAAAC,WAAU,GAAM,IAAA9D,YAAA,CAAA6D,MAAA;EACd,IAAAE,cAAA,GAAiB,IAAA/D,YAAU,CAAA6D,MAAY,EAAI;EAC7C,IAAIG,WAAQ,OAAAhE,YAAA,CAAA6D,MAAA;EAEZ,IAAAI,SAAM,OAAAjE,YAAqB,CAAA6D,MAAY,OAAM;EAC3C,IAAAK,gBAAY,IAAU,GAAAlE,YAAA,CAAA6D,MAAA;EACtB,IAAAM,WAAM,GAAU;EAChB,IAAAC,QAAM,OAAApE,YAAgB,CAAAqE,WAAU;IAChCJ,SAAI,CAAAK,OAAA,GAAe;IACjBC,oBAAI,CAAeX,iBAAS,CAAAU,OAAa;IACzCV,iBAAe,CAAAU,OAAA,GAAU;EACvB;EACA,IAAAE,SAAI,OAAAxE,YAAqB,CAAAqE,WAAU;IAAA,IACrCJ,SAAM,CAAAK,OAAA,KAAAN,WAAA,CAAAM,OAAA;IACRL,SAAO,CAAAK,OAAA;IACLR,WAAA,CAAUQ,OAAA,GAAAG,WAAA,CAAAC,GAAA;IACZ,IAAAC,IAAA,YAAAC,MAAA;MACE,IAAAC,EAAA,GAASvB,SAAC,CAAAgB,OAAA;MAEd,IAAM,CAAAO,EAAA,KAAAb,WAAqB,CAAAM,OAAA,IAAY,CAAAL,SAAM,CAAAK,OAAA;QAC3CL,SAAY,CAAAK,OAAA,GAAU;QAClB;MACF;MACA,IAAAI,GAAA,GAAAD,WAAe,CAAAC,GAAU;MAC3B,IAAAI,OAAA,GAAAJ,GAAA,GAAAZ,WAAA,CAAAQ,OAAA;MACAR,WAAS,CAAAQ,OAAA,GAAAI,GAAA;MACP,IAAAK,EAAA,GAAS5D,IAAA,CAAAO,GAAA,CAAAoD,OAAA,MAAA3D,IAAA,CAAAM,GAAA,CAAAkC,IAAA,GAAAkB,EAAA,CAAAtC,SAAA,GAAAsC,EAAA,CAAAG,YAAA,GAAAH,EAAA,CAAAI,YAAA,GAAAJ,EAAA,CAAAtC,SAAA;MAEb,IAAAwC,EAAU,MAAM;QACdb,gBAAW,CAAUI,OAAA;QACjBd,iBAAiB,CAAAc,OAAA,GAAAX,IAAA;QACrBkB,EAAM,CAAAtC,SAAA,IAAWoB,IAAM,IAAAoB,EAAA,GAAAA,EAAA;MACrB;MACEnB,iBAAA,CAAAU,OAAiB,GAAAY,qBAAU,CAAAP,IAAA;IAC3B;IAAAf,iBACF,CAAAU,OAAA,GAAAY,qBAAA,CAAAP,IAAA;EACA,IACAhB,IAAA,EACAL,SAAI,CACJ;EACE,IAAA6B,gBAAA,GAAe,IAAAnF,YAAU,CAAA6D,MAAA;EACzB,IAAA7D,YAAI,CAAAiB,SAAY,cAAS;IAAUkE,gBACvB,CAAAb,OAAA,GAAAG,WAAA,CAAAC,GAAA;EAAA,GAChB,CACAnB,OAAG,CACH;EACF,IAAI6B,kBAAW,GAAS,IAAApF,YAAW,CAAAqE,WAAS;IAE5CL,WAAA,CAAAM,OAAA;IACE,IAAAQ,OAAM,GAAML,WAAA,CAAAC,GAAA,KAAAS,gBAAA,CAAAb,OAAA;IACV,IAAAe,aAAA,GAAAP,OAAmB;IACrB,IAAAO,aAAA;MACC,IAAAtB,cAAkB,CAAAO,OAAA,EAAAgB,YAAA,CAAAvB,cAAA,CAAAO,OAAA;MACrBP,cAAA,CAAAO,OAAA,GAAAiB,UAAA;QAEMxB,cAAY,CAAAO,OAAA,GAAY,IAAI;QAClC,IAAUN,WAAM,CAAAM,OAAA,EAAAE,SAAA;MACd,GAAK;IACL,OAAM;MACNA,SAAM,EAAO;IACb;EACF,GAAG,CAEHA,SAAM,CACN;EACA,IAAAgB,kBAAiB,KAAU,EAAAxF,YAAY,CAAAqE,WAAA;IACvCL,WAAa,CAAAM,OAAA,QAAY;IAEzB,IAAAP,cACE,CAAAO,OAAA;MAACgB,YAAA,CAAAvB,cAAA,CAAAO,OAAA;MAAAP,cAAA,CAAAO,OAAA;IAAA;IACUF,QACJ;EAAmB,IACGA,QAC3B,CAAQ;EACA,IAERpE,YAAA,CAAAiB,SAAA;IAAA,IAAC4D,EAAA,GAAAvB,SAAA,CAAAgB,OAAA;IAAA,KAAAO,EAAA,KAAAtB,OAAA;IAAA,IAAAkC,QACC,YAAAC,SAAsBA,CAAA;MAAA,IACtBxB,gBAAA,CAAAI,OAAgB;QAAAJ,gBAChB,CAAAI,OAAgB,GAAO;QAAQ;MACtB;MACH,IACN,CAAAN,WAAO,CAAAM,OAAA;MAAAF,QACP,CAAK;MAAW,IAChBL,cAAQ,CAAOO,OAAA,EAAYgB,YAAA,CAAAvB,cAAA,CAAAO,OAAA;MAAAP,cACrB,CAAAO,OAAA,GAAAiB,UAAA;QAAAxB,cACE,CAAAO,OAAA;QAAA,IACRN,WAAW,CAAAM,OAAO,EAAAE,SAAI;MAAA,GAAAL,WACtB;IAAW;IACIU,EAAA,CAAAc,gBACf,SAAe,EAAAF,QAAU,EAAS;MAAAG,OAClC;IAAuB;IACqB,OAI5C,YAAS;MAAsB,OAC/Bf,EAAA,CAAAgB,mBAAgB,CAAU,UAAAJ,QAAA;IAAqB;EAC/B,IAIhBnC,SAAA,EAAAC,OACF,EAAAiB,SAAA,EACFJ,QAAA,CAEJ","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","floatingList_exports","ScrollArrow","SyncFocusToOpen","clampDropdownRadius","growOnScroll","import_checkedOnField2","placeCheckedOnField","scrollArrowBand","scrollArrowThreshold","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react2","import_theme2","import_tamagui","import_InputParts","import_checkedOnField","dropdownMaxRadiusTokenNum","fieldRadius","startsWith","num","Number","parseInt","slice","param","open","setFocused","FocusContext","useStyledContext","useEffect","direction","scrollRef","visible","arrowScrollDirRef","topOffset","band","bandProp","isUp","animationFrameRef","useRef","lastTimeRef","resumeTimerRef","hoveringRef","activeRef","selfScrollingRef","resumeDelay","stopLoop","useCallback","current","cancelAnimationFrame","startLoop","performance","now","tick","tick1","el","elapsed","px","Math","min","max","scrollTop","scrollHeight","clientHeight","requestAnimationFrame","openTimestampRef","handlePointerEnter","wasOverOnOpen","clearTimeout","setTimeout","handlePointerLeave","onScroll","onScroll2","addEventListener","passive","removeEventListener","panelFill","setPanelFill","useState","getComputedStyle","fill","backgroundColor"],"sources":["../../../src/shared/floatingList.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.81.0",
+  "version": "7.81.2",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -57,10 +57,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/platform": "^7.81.0",
-    "@multiplatform.one/router": "^7.81.0",
-    "@multiplatform.one/table-primitives": "^7.81.0",
-    "@multiplatform.one/theme": "^7.81.0",
+    "@multiplatform.one/platform": "^7.81.2",
+    "@multiplatform.one/router": "^7.81.2",
+    "@multiplatform.one/table-primitives": "^7.81.2",
+    "@multiplatform.one/theme": "^7.81.2",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -80,9 +80,9 @@
   },
   "devDependencies": {
     "@expo/ui": "~55.0.17",
-    "@multiplatform.one/config": "7.81.0",
-    "@multiplatform.one/storybook": "7.81.0",
-    "@multiplatform.one/test-utils": "7.81.0",
+    "@multiplatform.one/config": "7.81.2",
+    "@multiplatform.one/storybook": "7.81.2",
+    "@multiplatform.one/test-utils": "7.81.2",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",

package/src/AdaptivePopup/index.tsx

@@ -1,4 +1,4 @@
-import { transitionProps, overlayScrim } from "@multiplatform.one/theme";
+import { sheetGrabber, transitionProps, overlayScrim } from "@multiplatform.one/theme";
 import { DialogContent, DialogOverlay } from "@multiplatform.one/theme";
 import {
   cloneElement,
@@ -404,7 +404,10 @@ export function AdaptivePopup({
             enterStyle={{ opacity: 0 }}
             exitStyle={{ opacity: 0 }}
           />
-          <Sheet.Handle {...({ "aria-hidden": true } as Record<string, unknown>)} />
+          <Sheet.Handle
+            {...sheetGrabber}
+            {...({ "aria-hidden": true } as Record<string, unknown>)}
+          />
           <Sheet.Frame
             // Sheet.Frame forwards its ref at runtime; the styled prop type
             // just omits `ref`, hence the cast. tabIndex -1 makes the frame a

package/src/FloatingPanel/index.native.tsx

@@ -61,10 +61,25 @@
  * OVERLAY_BREAKPOINT the sheet is the wrong form. The panel opens over its
  * field the way the web float does (LC-105, LC-112), sized by `widthMode`;
  * compact windows (iPhone, Slide Over) keep the sheet. `sheet` forces it.
+ *
+ * Pop-up (`popUp`, FZ-8655): a Select's menu face opens the way a macOS pop-up
+ * does, as the web's covering Select does. The rows are measured here, the
+ * caller reports the row that goes on the field, and `placeCheckedOnField`
+ * (shared with the web) places the panel. It's a touch list, so a panel keeps
+ * its box as it scrolls, as a UIMenu does, where a pointer's grows
+ * (`growOnScroll`).
  */
 
-import { nativeAnimationConfig, type MotionStop, overlayScrim } from "@multiplatform.one/theme";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import {
+  nativeAnimationConfig,
+  type MotionStop,
+  overlayScrim,
+  sheetGrabber,
+  sheetGrabberZone,
+} from "@multiplatform.one/theme";
 import {
+  type ComponentRef,
   isValidElement,
   type ReactNode,
   useCallback,
@@ -88,10 +103,22 @@ import {
   useWindowDimensions,
   View as RNView,
   type GestureResponderEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import { Surface, useResolvedKnobs, motionDurationMs } from "@multiplatform.one/theme";
-import { View, YStack } from "tamagui";
+import {
+  Surface,
+  useGlyphColor,
+  useResolvedKnobs,
+  motionDurationMs,
+} from "@multiplatform.one/theme";
+import { getTokenValue, View, YStack } from "tamagui";
+import {
+  placeCheckedOnField,
+  scrollArrowBand,
+  scrollArrowThreshold,
+} from "../shared/checkedOnField";
 import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
 import { t } from "../shared/t";
@@ -174,6 +201,7 @@ export function FloatingPanel({
   triggerEcho = true,
   coverAlign = "start",
   iconCover = false,
+  popUp,
   anchorMode,
   panelWidth = "content",
   sheet,
@@ -242,7 +270,7 @@ export function FloatingPanel({
   const insideOverlay = useInsideOverlay();
   const asMenu = isContextMenu
     ? compactFace === "menu"
-    : resolveCompactFace(compactFace, insideOverlay) === "menu";
+    : resolveCompactFace(compactFace, insideOverlay) === "menu" || (popUp != null && regular);
   const asRegular = regular && !asMenu && !isContextMenu && sheet !== true;
   const anchored = asMenu || asRegular;
   const triggerRef = useRef<RNView | null>(null);
@@ -657,8 +685,9 @@ export function FloatingPanel({
                   Math.max(safeArea?.bottom ?? 0, keyboardInset) -
                   panelViewportPadding,
               }}
-              echo={triggerEcho && !iconCover ? (triggerRow ?? trigger) : null}
+              echo={triggerEcho && !iconCover && !popUp ? (triggerRow ?? trigger) : null}
               echoLabel={triggerA11y?.label}
+              popUp={popUp}
               iconCover={iconCover && anchorMode !== "attach"}
               group={iconCover && anchorMode !== "attach" ? (group ?? null) : null}
               coverAlign={anchorMode === "attach" ? "start" : coverAlign}
@@ -765,19 +794,23 @@ export function FloatingPanel({
                   {...knobProps.elevatedSurface}
                   borderBottomLeftRadius={0}
                   borderBottomRightRadius={0}
+                  // A sheet spans the screen: only its top edge meets the page,
+                  // so no side border gutters a full-width row (FZ-8557).
+                  borderLeftWidth={0}
+                  borderRightWidth={0}
+                  borderBottomWidth={0}
                   maxHeight={maxHeight}
                   flexShrink={1}
                   minHeight={0}
                   // sheetFill opens at full sheet height (flexShrink keeps the
                   // keyboard from pushing the top of the sheet off-screen).
                   {...(sheetFill ? { height: maxHeight } : undefined)}
-                  paddingTop="$2"
                   paddingBottom={sheetBottomPadding}
                   // VoiceOver escape gesture (two-finger Z) dismisses the sheet.
                   onAccessibilityEscape={close}
                 >
                   {/*
-                The grab ZONE, not just the 4pt pill: a 4pt tall target is
+                The grab ZONE, not just the 5pt pill: a 5pt tall target is
                 unhittable. The gesture lives here rather than on the whole
                 sheet so it never fights the ScrollView inside it, which is the
                 same division iOS uses.
@@ -786,14 +819,10 @@ export function FloatingPanel({
                     {...panResponder.panHandlers}
                     accessibilityRole="adjustable"
                     accessibilityLabel={t("Drag to resize")}
-                    style={{
-                      alignSelf: "stretch",
-                      alignItems: "center",
-                      paddingTop: 4,
-                      paddingBottom: 12,
-                    }}
+                    testID="floating-panel-grabber"
+                    style={sheetGrabberZone}
                   >
-                    <View width={40} height={4} borderRadius={2} backgroundColor="$color8" />
+                    <View {...sheetGrabber} />
                   </RNView>
                   <YStack
                     padding={framePadding}
@@ -830,6 +859,7 @@ function TriggerMenuPanel({
   bounds,
   echo,
   echoLabel,
+  popUp,
   iconCover = false,
   group = null,
   coverAlign,
@@ -846,6 +876,8 @@ function TriggerMenuPanel({
   bounds: PanelBounds;
   echo: ReactNode;
   echoLabel?: string;
+  /** LC-112 (FZ-8655): the row that sits on the trigger, a macOS pop-up. */
+  popUp?: FloatingPanelProps["popUp"];
   /** LC-112 (FZ-8665): an icon trigger, covered at the surface it is seen on. */
   iconCover?: boolean;
   /** LC-112 (FZ-8550): the glass capsule a grouped trigger sits on. */
@@ -860,7 +892,12 @@ function TriggerMenuPanel({
   children: ReactNode;
 }) {
   const { knobProps } = useResolvedKnobs({ painted: false });
+  const glyphColor = useGlyphColor();
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  const [contentHeight, setContentHeight] = useState<number | null>(null);
+  const [scrolled, setScrolled] = useState<{ up: boolean; down: boolean } | null>(null);
+  const scrollRef = useRef<ComponentRef<typeof RNScrollView>>(null);
+  const offsetRef = useRef(0);
   // LC-112 (FZ-8480, FZ-8550): an icon trigger's panel covers the surface the
   // trigger is seen on, its capsule or its press target.
   const cover = anchor && iconCover ? iconCoverRect(anchor, group) : anchor;
@@ -885,8 +922,31 @@ function TriggerMenuPanel({
     echo: echo != null,
     floor: Math.max(MENU_MIN_WIDTH, cover?.width ?? 0),
   });
-  const placement =
-    anchor && cover && size
+  const borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
+  const framePaddingToken = getTokenValue(
+    framePadding as Parameters<typeof getTokenValue>[0],
+    "space",
+  );
+  const framePaddingPx = typeof framePaddingToken === "number" ? framePaddingToken : 0;
+  // LC-112 (FZ-8655): the web's macOS pop-up, from the rows measured here.
+  const band = scrollArrowBand(knobProps.menuRow.minHeight);
+  const fit =
+    anchor && popUp?.row && contentHeight != null
+      ? placeCheckedOnField({
+          fieldTop: anchor.y,
+          fieldBottom: anchor.y + anchor.height,
+          rowTop: popUp.row.top + framePaddingPx,
+          rowHeight: popUp.row.height,
+          contentHeight,
+          boundsTop: bounds.top + borderWidth,
+          boundsBottom: bounds.bottom - borderWidth,
+          band,
+        })
+      : null;
+  const scrollTop = fit?.scrollTop ?? 0;
+  const scrolls = fit != null && contentHeight != null && fit.height < contentHeight;
+  const placed =
+    anchor && cover && size && (!popUp || fit)
       ? (attach ? placeBesideTrigger : placeOverTrigger)({
           trigger: cover,
           width: size.width,
@@ -897,6 +957,39 @@ function TriggerMenuPanel({
           pinned: iconCover,
         })
       : null;
+  const placement =
+    placed && fit
+      ? { ...placed, top: fit.top - borderWidth, maxHeight: fit.height + 2 * borderWidth }
+      : placed;
+  useLayoutEffect(() => {
+    offsetRef.current = scrollTop;
+    if (scrollTop > 0) scrollRef.current?.scrollTo({ y: scrollTop, animated: false });
+  }, [scrollTop]);
+  const atRest = {
+    up: scrolls && scrollTop > scrollArrowThreshold,
+    down:
+      scrolls &&
+      fit != null &&
+      contentHeight != null &&
+      contentHeight - scrollTop - fit.height > scrollArrowThreshold,
+  };
+  const arrows = scrolled ?? atRest;
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (!scrolls) return;
+    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+    offsetRef.current = contentOffset.y;
+    const up = contentOffset.y > scrollArrowThreshold;
+    const down =
+      contentSize.height - contentOffset.y - layoutMeasurement.height > scrollArrowThreshold;
+    setScrolled((prev) => (prev?.up === up && prev?.down === down ? prev : { up, down }));
+  };
+  // A band's tap turns the page, less a row, so nothing goes unseen.
+  const scrollPage = (direction: "up" | "down") => {
+    if (!fit) return;
+    const page = Math.max(band, fit.height - 2 * band - (popUp?.row?.height ?? 0));
+    const next = offsetRef.current + (direction === "up" ? -page : page);
+    scrollRef.current?.scrollTo({ y: Math.max(0, next), animated: true });
+  };
   // LC-112 seamless cover: the menu is its trigger grown open, so it draws the
   // trigger's corner arc at all four corners. A field reports its radius; an
   // icon button with no echo is a circle or capsule, half its short side.
@@ -909,7 +1002,6 @@ function TriggerMenuPanel({
         : coverAlign === "auto" && half
           ? half
           : undefined;
-  const borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
   // A panel slid along the screen (a `"screen"` or fixed width, or one pushed
   // back inside the margins) keeps its echo on the trigger.
   const echoShift =
@@ -998,13 +1090,47 @@ function TriggerMenuPanel({
               </Pressable>
             ) : null}
             <RNScrollView
+              ref={scrollRef}
               style={{ flexGrow: 0, flexShrink: 1 }}
               keyboardShouldPersistTaps="handled"
+              {...(popUp
+                ? {
+                    contentOffset: { x: 0, y: scrollTop },
+                    scrollEnabled: scrolls,
+                    bounces: scrolls,
+                    onScroll: handleScroll,
+                    scrollEventThrottle: 16,
+                  }
+                : null)}
             >
-              <YStack padding={framePadding} gap={frameGap}>
-                {children}
-              </YStack>
+              <RNView
+                testID="floating-panel-menu-content"
+                collapsable={false}
+                onLayout={popUp ? (e) => setContentHeight(e.nativeEvent.layout.height) : undefined}
+              >
+                <YStack padding={framePadding} gap={frameGap}>
+                  {children}
+                </YStack>
+              </RNView>
             </RNScrollView>
+            {scrolls ? (
+              <>
+                <ScrollBand
+                  direction="up"
+                  band={band}
+                  visible={arrows.up}
+                  glyphColor={glyphColor}
+                  onPress={scrollPage}
+                />
+                <ScrollBand
+                  direction="down"
+                  band={band}
+                  visible={arrows.down}
+                  glyphColor={glyphColor}
+                  onPress={scrollPage}
+                />
+              </>
+            ) : null}
           </YStack>
         </YStack>
       </RNView>
@@ -1012,6 +1138,54 @@ function TriggerMenuPanel({
   );
 }
 
+/**
+ * A pop-up's scroll arrow on native (LC-112, FZ-8655): the web's opaque band in
+ * the panel's own fill, half a menu row at a clipped edge, so a cut row hides
+ * under it. A tap on it stays off the row beneath and turns the page.
+ */
+function ScrollBand({
+  direction,
+  band,
+  visible,
+  glyphColor,
+  onPress,
+}: {
+  direction: "up" | "down";
+  band: number;
+  visible: boolean;
+  glyphColor: string;
+  onPress: (direction: "up" | "down") => void;
+}) {
+  const { knobProps } = useResolvedKnobs({ painted: false });
+  const Icon = direction === "up" ? CaretUpIcon : CaretDownIcon;
+  if (!visible) return null;
+  return (
+    <Pressable
+      testID={`floating-panel-scroll-${direction}`}
+      onPress={() => onPress(direction)}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={{
+        position: "absolute",
+        start: 0,
+        end: 0,
+        height: band,
+        zIndex: 1,
+        ...(direction === "up" ? { top: 0 } : { bottom: 0 }),
+      }}
+    >
+      <View
+        flex={1}
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor={knobProps.elevatedSurface.backgroundColor}
+      >
+        <Icon size={knobProps.controlIcon.width} color={glyphColor} />
+      </View>
+    </Pressable>
+  );
+}
+
 /**
  * The menu at the long-press point: measured once per open at its natural
  * size, then placed by the same rule as the web pointer menu. Later layouts

package/src/FloatingPanel/index.tsx

@@ -108,6 +108,16 @@ export interface FloatingPanelProps {
    * it opens down from the button's top edge, or up from its bottom edge.
    */
   iconCover?: boolean;
+  /**
+   * Native only: the panel opens the way a macOS pop-up does (LC-112, FZ-8655).
+   * `row` is the row that sits on the trigger, its offset and height in the
+   * panel's content, `null` until the caller has measured it. There's no
+   * trigger echo, a list that fits the safe edges shows whole, and a taller one
+   * scrolls under opaque arrow bands (`placeCheckedOnField`). At regular width
+   * this is the panel's face at every list length, so a Select never takes
+   * RegularPanel's echo or a sheet there.
+   */
+  popUp?: { row: { top: number; height: number } | null };
   /**
    * Optional control rendered beside the trigger but OUTSIDE the native press
    * capture (e.g. DatePicker/ColorPicker clear). On native the trigger subtree

package/src/FloatingPanel/sheetGrabber.spec.tsx

@@ -0,0 +1,53 @@
+/**
+ * FZ-8648: one grabber. A FloatingPanel's phone sheet draws the theme's
+ * `sheetGrabber` on the web and on native, with nothing local on top, so it
+ * can't drift from SheetModal's (whose spec holds it to the same recipe).
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { sheetGrabber } from "@multiplatform.one/theme";
+import { describe, expect, it, vi } from "vitest";
+import { Text, View } from "tamagui";
+import { FloatingPanel as NativePanel } from "./index.native";
+import { FloatingPanel } from "./index";
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children }: { children: import("react").ReactNode }) => children,
+  useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+}));
+
+const atoms = (node: Element) => String(node.className).split(/\s+/).filter(Boolean);
+
+function recipeAtoms() {
+  const view = renderWithProviders(<View testID="recipe" {...sheetGrabber} />);
+  const list = atoms(view.getByTestId("recipe"));
+  view.unmount();
+  return list;
+}
+
+describe("FloatingPanel sheet grabber (FZ-8648)", () => {
+  it("draws the recipe in the native sheet", () => {
+    const recipe = recipeAtoms();
+    const result = renderWithProviders(
+      <NativePanel open onOpenChange={() => {}} trigger={<Text>Open</Text>}>
+        <Text>Row</Text>
+      </NativePanel>,
+    );
+    const capsule = result.getByTestId("floating-panel-grabber").firstElementChild as Element;
+    expect(atoms(capsule)).toEqual(expect.arrayContaining(recipe));
+  });
+
+  it("draws the recipe in the web sheet, with no transform", async () => {
+    const recipe = recipeAtoms();
+    const result = renderWithProviders(
+      <FloatingPanel open sheet onOpenChange={() => {}} trigger={<Text>Open</Text>}>
+        <Text>Row</Text>
+      </FloatingPanel>,
+    );
+    await result.findByTestId("floating-panel-sheet");
+    const handle = result.getByLabelText("Resize");
+    expect(atoms(handle)).toEqual(expect.arrayContaining(recipe));
+    expect(handle.getAttribute("style") ?? "").not.toMatch(/transform/);
+  });
+});