@multiplatform.one/forms 7.34.4 → 7.36.0

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

@@ -17,7 +17,7 @@ import { Spinner } from "../../Spinner/index.native.js";
 import { formCommonColors, formInputColors, formSelectedColors } from "../../shared/colorRamps.native.js";
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
 import { SyncFocusToOpen, 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";
@@ -285,7 +285,7 @@ var ComboboxItem = /* @__PURE__ */memo(function ComboboxItem2(param) {
       height: "auto",
       paddingVertical: "$2"
     } : void 0),
-    ...transitionProps(ctx.knobProps.transition),
+    ...transitionProps(ctx.knobProps.motion.control),
     children: [option.description ? /* @__PURE__ */_jsxs(YStack, {
       flex: 1,
       minWidth: 0,
@@ -352,6 +352,10 @@ function FloatingComboboxCore(param) {
     onOpenChange
   } = param;
   var _ref;
+  var {
+    style: elevatedSurfaceStyle,
+    ...elevatedSurfaceProps
+  } = knobProps.elevatedSurface;
   var hydrationTouch = useTouchSurface();
   if (isWeb) ensureKeyboardModalityTracking();
   var {
@@ -620,7 +624,7 @@ function FloatingComboboxCore(param) {
       };
       if (listScrollRef.current) listScrollRef.current.scrollTop = 0;
       void dropdownElement.offsetHeight;
-      if (suppressTransition) dropdownElement.style.transition = panelTransition;
+      if (suppressTransition) dropdownElement.style.transition = panel.panelTransition;
       requestAnimationFrame(function () {
         if (listScrollRef.current) {
           panel.updateArrows(listScrollRef.current);
@@ -700,7 +704,7 @@ function FloatingComboboxCore(param) {
       };
     }
     void dropdownElement.offsetHeight;
-    if (suppressTransition) dropdownElement.style.transition = panelTransition;
+    if (suppressTransition) dropdownElement.style.transition = panel.panelTransition;
     requestAnimationFrame(function () {
       if (listScrollRef.current) {
         panel.updateArrows(listScrollRef.current);
@@ -709,7 +713,7 @@ function FloatingComboboxCore(param) {
         });
       }
     });
-  }, [panel.placement, panel.updateArrows, popoverWidth, panel.refs]);
+  }, [panel.placement, panel.updateArrows, popoverWidth, panel.refs, panel.panelTransition]);
   repositionRef.current = function () {
     return repositionOverlay("wheel");
   };
@@ -1255,17 +1259,15 @@ function FloatingComboboxCore(param) {
             overflow: "hidden",
             display: "flex",
             flexDirection: "column",
-            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",
             boxSizing: "border-box"
           },
-          backgroundColor: "$background",
+          ...elevatedSurfaceProps,
           borderRadius: panel.dropdownRadius,
-          borderWidth: panel.hasBorder ? knobProps.borderRadius.borderWidth : 0,
-          borderColor: panel.hasBorder ? formInputColors.border.focus : "transparent",
           "data-testid": "combobox-dropdown",
           children: [!hideSearch && /* @__PURE__ */_jsx(InputParts, {
             size: knobProps.sizeToken,
@@ -1371,7 +1373,7 @@ function FloatingComboboxCore(param) {
                   backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
                 } : void 0,
                 onPress: handleCreate,
-                ...transitionProps(knobProps.transition),
+                ...transitionProps(knobProps.motion.control),
                 children: [/* @__PURE__ */_jsx(PlusIcon, {
                   size: 14,
                   color: knobProps.textAccentColor
@@ -1404,7 +1406,7 @@ function FloatingComboboxCore(param) {
               pressStyle: {
                 backgroundColor: formInputColors.background.focus
               },
-              ...transitionProps(knobProps.transition),
+              ...transitionProps(knobProps.motion.control),
               children: [/* @__PURE__ */_jsx(PlusIcon, {
                 size: 14,
                 color: knobProps.textAccentColor
@@ -1529,7 +1531,7 @@ function NativeComboboxCore(param) {
     open: openProp,
     onOpenChange
   } = param;
-  var _ref, _knobProps_transition, _ref1, _ref2;
+  var _ref, _ref1, _ref2;
   var _theme_color7;
   var hydrationTouch = useTouchSurface();
   if (isWeb) ensureKeyboardModalityTracking();
@@ -1647,7 +1649,6 @@ function NativeComboboxCore(param) {
     setInternalFilter("");
   }, [onCreate, filter, multiple, value, onValueChange, setOpen]);
   var hasScrollableContent = Boolean(onSearch) || filtered.length > 6;
-  var sheetTransition = (_knobProps_transition = knobProps.transition) !== null && _knobProps_transition !== void 0 ? _knobProps_transition : "medium";
   var sortedFiltered = useMemo(function () {
     if (filter.trim()) return filtered;
     var current = Array.isArray(value) ? value : value ? [value] : [];
@@ -2144,8 +2145,8 @@ function NativeComboboxCore(param) {
     triggerEnd: clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? /* @__PURE__ */_jsx(Button, {
       size: knobProps.sizeToken,
       chromeless: true,
-      minWidth: 44,
-      minHeight: 44,
+      width: knobProps.control.height,
+      paddingHorizontal: 0,
       "aria-label": t("Clear"),
       icon: /* @__PURE__ */_jsx(XIcon, {
         size: 14
@@ -2163,7 +2164,6 @@ function NativeComboboxCore(param) {
     scrollable: hasScrollableContent,
     disabled,
     contentPadding: "none",
-    transition: typeof sheetTransition === "string" ? sheetTransition : "medium",
     scrollViewProps: {
       onScroll: function onScroll(e) {
         if (!onLoadMore || !hasMore || loading) return;
@@ -2219,7 +2219,6 @@ function Combobox(param) {
     selectedOrder,
     dismissible,
     skeleton,
-    compact,
     creatable,
     onCreate,
     createLabel,
@@ -2243,8 +2242,7 @@ function Combobox(param) {
     id
   } = useFormField({
     form: formProp,
-    id: idProp,
-    compact
+    id: idProp
   });
   var resolvedValidators = useResolvedValidators(required, validators, label, name);
   var [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);