@multiplatform.one/forms 7.34.4 → 7.36.0

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

@@ -16,7 +16,7 @@ import { formCommonColors, formInputColors, formSelectedColors } from "../../sha
 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, panelTransition, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.native.js";
+import { FloatingPanel, useFloatingPanel, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.native.js";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal.native.js";
 import { zIndex } from "../../shared/zIndex.native.js";
 import { useDragScroll } from "../../shared/useDragScroll.native.js";
@@ -364,8 +364,8 @@ var SelectItem = /* @__PURE__ */memo(function SelectItem2(param) {
     active: isActive,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
-    height: ctx.knobProps.control.height,
-    // LC-18 KNOB-TOTALITY (UX-021): menu rows re-rhythm with the space knob —
+    height: ctx.knobProps.menuRow.minHeight,
+    // LC-18 KNOB-TOTALITY (UX-021): menu rows re-rhythm with the spacing roles —
     // horizontal inset from the panelPadding token (SP-EDGE, sidebar-row
     // precedent) over menuRowFrame's static $3; in-row gap rides the gap
     // fragment.
@@ -383,7 +383,7 @@ var SelectItem = /* @__PURE__ */memo(function SelectItem2(param) {
         backgroundColor: isSelected ? formInputColors.background.base : formInputColors.background.focus
       }
     }),
-    ...transitionProps(ctx.knobProps.transition),
+    ...transitionProps(ctx.knobProps.motion.control),
     children: [/* @__PURE__ */_jsx(Text, {
       fontFamily: ctx.knobProps.body.fontFamily,
       fontWeight: ctx.knobProps.body.fontWeight,
@@ -416,6 +416,10 @@ function FloatingSelectCore(param) {
   } = param;
   var _ref, _ref1, _ref2, _panel_x;
   var _overlayStyle_current;
+  var {
+    style: elevatedSurfaceStyle,
+    ...elevatedSurfaceProps
+  } = knobProps.elevatedSurface;
   var hydrationTouch = useTouchSurface();
   var inTableCell = useIsInTableCell();
   var describedBy = useFieldDescribedBy();
@@ -672,7 +676,7 @@ function FloatingSelectCore(param) {
     }
     panel.initializingRef.current = false;
     void dropdownElement.offsetHeight;
-    if (isInitial) dropdownElement.style.transition = panelTransition;
+    if (isInitial) dropdownElement.style.transition = panel.panelTransition;
     requestAnimationFrame(function () {
       if (dropdownElement) {
         panel.updateArrows(dropdownElement);
@@ -681,7 +685,7 @@ function FloatingSelectCore(param) {
         });
       }
     });
-  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, options.length]);
+  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length]);
   repositionRef.current = repositionOverlay;
   useLayoutEffect(function () {
     if (!open || !panel.mounted) return;
@@ -1003,10 +1007,10 @@ function FloatingSelectCore(param) {
               ...(overlayStyle.current ? {
                 maxHeight: overlayStyle.current.maxHeight
               } : {}),
-              boxShadow: "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)",
+              ...elevatedSurfaceStyle,
               opacity: panel.visible ? 1 : 0,
               transform: panel.visible ? "scale(1)" : "scale(0.96)",
-              transition: panelTransition,
+              transition: panel.panelTransition,
               transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
               ...dragProps.style
             },
@@ -1046,10 +1050,8 @@ function FloatingSelectCore(param) {
             },
             onScroll: handleScroll
           }),
-          backgroundColor: "$background",
+          ...elevatedSurfaceProps,
           borderRadius: panel.dropdownRadius,
-          borderWidth: panel.hasBorder ? knobProps.borderRadius.borderWidth : 0,
-          borderColor: panel.hasBorder ? formInputColors.border.focus : "transparent",
           "data-testid": "select-dropdown",
           paddingVertical: 0,
           children: [/* @__PURE__ */_jsx(ScrollArrow, {
@@ -1118,7 +1120,7 @@ function NativeSelectCore(param) {
     dismissible,
     native
   } = param;
-  var _knobProps_transition, _ref, _ref1, _ref2;
+  var _ref, _ref1, _ref2;
   var hydrationTouch = useTouchSurface();
   var describedBy = useFieldDescribedBy();
   var fieldA11y = useFieldA11y();
@@ -1196,7 +1198,6 @@ function NativeSelectCore(param) {
   }, [options, value, multiple, selectedOrder]);
   var textColor = knobProps.textAccentColor;
   var markColor = useSelectedMarkColor();
-  var sheetTransition = (_knobProps_transition = knobProps.transition) !== null && _knobProps_transition !== void 0 ? _knobProps_transition : "medium";
   var hasScrollableContent = displayOptions.length > 6;
   var selectedIndex = displayOptions.findIndex(function (o2) {
     return o2.value === value;
@@ -1297,11 +1298,11 @@ function NativeSelectCore(param) {
         flexDirection: "row",
         alignItems: "center",
         borderRadius: 0,
-        // LC-18 (UX-021): sheet rows ride the space knob like the floating
+        // LC-18 (UX-021): sheet rows ride the spacing roles like the floating
         // menu rows — panelPadding inset + gap fragment.
         ...knobProps.gap,
         paddingHorizontal: knobProps.panelPadding.padding,
-        height: knobProps.control.height,
+        height: knobProps.menuRow.minHeight,
         onPress: isWeb ? function () {
           return handleSelect(option.value);
         } : void 0,
@@ -1533,7 +1534,6 @@ function NativeSelectCore(param) {
     scrollable: hasScrollableContent,
     disabled,
     contentPadding: "none",
-    transition: typeof sheetTransition === "string" ? sheetTransition : "medium",
     children: listContent
   });
 }
@@ -1563,7 +1563,6 @@ function Select(param) {
     selectedOrder,
     dismissible,
     skeleton,
-    compact,
     native,
     "aria-label": ariaLabel,
     ...rest
@@ -1580,7 +1579,6 @@ function Select(param) {
   } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
     size: sizeProp
   });
   var resolvedValidators = useResolvedValidators(required, validators, label, name);