@multiplatform.one/forms 7.34.4 → 7.36.0

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

@@ -306,7 +306,7 @@ const SelectItem = (0, import_react.memo)(function SelectItem2({
     active: isActive,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
-    height: ctx.knobProps.control.height,
+    height: ctx.knobProps.menuRow.minHeight,
     paddingHorizontal: ctx.knobProps.panelPadding.padding,
     ...ctx.knobProps.gap,
     onMouseEnter: () => setActiveIndex(index),
@@ -319,7 +319,7 @@ const SelectItem = (0, import_react.memo)(function SelectItem2({
         backgroundColor: isSelected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
       }
     }),
-    ...(0, import_theme2.transitionProps)(ctx.knobProps.transition),
+    ...(0, import_theme2.transitionProps)(ctx.knobProps.motion.control),
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontFamily: ctx.knobProps.body.fontFamily,
       fontWeight: ctx.knobProps.body.fontWeight,
@@ -349,6 +349,10 @@ function FloatingSelectCore({
   selectedOrder,
   dismissible
 }) {
+  const {
+    style: elevatedSurfaceStyle,
+    ...elevatedSurfaceProps
+  } = knobProps.elevatedSurface;
   const hydrationTouch = (0, import_theme.useTouchSurface)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
@@ -564,7 +568,7 @@ function FloatingSelectCore({
     }
     panel.initializingRef.current = false;
     void dropdownElement.offsetHeight;
-    if (isInitial) dropdownElement.style.transition = import_FloatingPanel.panelTransition;
+    if (isInitial) dropdownElement.style.transition = panel.panelTransition;
     requestAnimationFrame(() => {
       if (dropdownElement) {
         panel.updateArrows(dropdownElement);
@@ -573,7 +577,7 @@ function FloatingSelectCore({
         });
       }
     });
-  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, options.length]);
+  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length]);
   repositionRef.current = repositionOverlay;
   (0, import_react.useLayoutEffect)(() => {
     if (!open || !panel.mounted) return;
@@ -855,10 +859,10 @@ function FloatingSelectCore({
               ...(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: import_FloatingPanel.panelTransition,
+              transition: panel.panelTransition,
               transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
               ...dragProps.style
             },
@@ -894,10 +898,8 @@ function FloatingSelectCore({
             },
             onScroll: handleScroll
           }),
-          backgroundColor: "$background",
+          ...elevatedSurfaceProps,
           borderRadius: panel.dropdownRadius,
-          borderWidth: panel.hasBorder ? knobProps.borderRadius.borderWidth : 0,
-          borderColor: panel.hasBorder ? import_colorRamps.formInputColors.border.focus : "transparent",
           "data-testid": "select-dropdown",
           paddingVertical: 0,
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
@@ -1002,7 +1004,6 @@ function NativeSelectCore({
   }, [options, value, multiple, selectedOrder]);
   const textColor = knobProps.textAccentColor;
   const markColor = useSelectedMarkColor();
-  const sheetTransition = knobProps.transition ?? "medium";
   const hasScrollableContent = displayOptions.length > 6;
   const selectedIndex = displayOptions.findIndex(o => o.value === value);
   (0, import_react.useEffect)(() => {
@@ -1095,7 +1096,7 @@ function NativeSelectCore({
         borderRadius: 0,
         ...knobProps.gap,
         paddingHorizontal: knobProps.panelPadding.padding,
-        height: knobProps.control.height,
+        height: knobProps.menuRow.minHeight,
         onPress: import_tamagui.isWeb ? () => handleSelect(option.value) : void 0,
         onMouseEnter: () => setActiveIndex(i),
         onPointerDown: import_tamagui.isWeb ? () => setKbNav(false) : void 0,
@@ -1301,7 +1302,6 @@ function NativeSelectCore({
     scrollable: hasScrollableContent,
     disabled,
     contentPadding: "none",
-    transition: typeof sheetTransition === "string" ? sheetTransition : "medium",
     children: listContent
   });
 }
@@ -1330,7 +1330,6 @@ function Select({
   selectedOrder,
   dismissible,
   skeleton,
-  compact,
   native,
   "aria-label": ariaLabel,
   ...rest
@@ -1346,7 +1345,6 @@ function Select({
   } = (0, import_utils.useFormField)({
     form: formProp,
     id: idProp,
-    compact,
     size: sizeProp
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);

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

@@ -404,8 +404,8 @@ var SelectItem = /* @__PURE__ */(0, import_react.memo)(function SelectItem2(para
     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.
@@ -423,7 +423,7 @@ var SelectItem = /* @__PURE__ */(0, import_react.memo)(function SelectItem2(para
         backgroundColor: isSelected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
       }
     }),
-    ...(0, import_theme2.transitionProps)(ctx.knobProps.transition),
+    ...(0, import_theme2.transitionProps)(ctx.knobProps.motion.control),
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontFamily: ctx.knobProps.body.fontFamily,
       fontWeight: ctx.knobProps.body.fontWeight,
@@ -456,6 +456,10 @@ function FloatingSelectCore(param) {
   } = param;
   var _ref, _ref1, _ref2, _panel_x;
   var _overlayStyle_current;
+  var {
+    style: elevatedSurfaceStyle,
+    ...elevatedSurfaceProps
+  } = knobProps.elevatedSurface;
   var hydrationTouch = (0, import_theme.useTouchSurface)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
@@ -712,7 +716,7 @@ function FloatingSelectCore(param) {
     }
     panel.initializingRef.current = false;
     void dropdownElement.offsetHeight;
-    if (isInitial) dropdownElement.style.transition = import_FloatingPanel.panelTransition;
+    if (isInitial) dropdownElement.style.transition = panel.panelTransition;
     requestAnimationFrame(function () {
       if (dropdownElement) {
         panel.updateArrows(dropdownElement);
@@ -721,7 +725,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;
   (0, import_react.useLayoutEffect)(function () {
     if (!open || !panel.mounted) return;
@@ -1043,10 +1047,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: import_FloatingPanel.panelTransition,
+              transition: panel.panelTransition,
               transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
               ...dragProps.style
             },
@@ -1086,10 +1090,8 @@ function FloatingSelectCore(param) {
             },
             onScroll: handleScroll
           }),
-          backgroundColor: "$background",
+          ...elevatedSurfaceProps,
           borderRadius: panel.dropdownRadius,
-          borderWidth: panel.hasBorder ? knobProps.borderRadius.borderWidth : 0,
-          borderColor: panel.hasBorder ? import_colorRamps.formInputColors.border.focus : "transparent",
           "data-testid": "select-dropdown",
           paddingVertical: 0,
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
@@ -1158,7 +1160,7 @@ function NativeSelectCore(param) {
     dismissible,
     native
   } = param;
-  var _knobProps_transition, _ref, _ref1, _ref2;
+  var _ref, _ref1, _ref2;
   var hydrationTouch = (0, import_theme.useTouchSurface)();
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var fieldA11y = (0, import_fieldLayout.useFieldA11y)();
@@ -1236,7 +1238,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;
@@ -1337,11 +1338,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: import_tamagui.isWeb ? function () {
           return handleSelect(option.value);
         } : void 0,
@@ -1573,7 +1574,6 @@ function NativeSelectCore(param) {
     scrollable: hasScrollableContent,
     disabled,
     contentPadding: "none",
-    transition: typeof sheetTransition === "string" ? sheetTransition : "medium",
     children: listContent
   });
 }
@@ -1603,7 +1603,6 @@ function Select(param) {
     selectedOrder,
     dismissible,
     skeleton,
-    compact,
     native,
     "aria-label": ariaLabel,
     ...rest
@@ -1620,7 +1619,6 @@ function Select(param) {
   } = (0, import_utils.useFormField)({
     form: formProp,
     id: idProp,
-    compact,
     size: sizeProp
   });
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);