@multiplatform.one/forms 7.34.4 → 7.35.0

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

@@ -36,17 +36,17 @@ var import_react3 = require("@floating-ui/react");
 var import_theme2 = require("@multiplatform.one/theme");
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
-var import_Button = require("../../Button");
-var import_Chip = require("../../Chip");
+var import_Button = require("../../Button/index.native.js");
+var import_Chip = require("../../Chip/index.native.js");
 var import_pickerTriggerContract = require("../../shared/pickerTriggerContract.native.js");
-var import_Skeleton = require("../../Skeleton");
+var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
-var import_InputParts = require("../../InputParts");
-var import_Spinner = require("../../Spinner");
+var import_InputParts = require("../../InputParts/index.native.js");
+var import_Spinner = require("../../Spinner/index.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_floatingList = require("../../shared/floatingList.native.js");
-var import_FloatingPanel = require("../../FloatingPanel");
+var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
 var import_PanelPortal = require("../../FloatingPanel/PanelPortal.native.js");
 var import_zIndex = require("../../shared/zIndex.native.js");
 var import_useDragScroll = require("../../shared/useDragScroll.native.js");
@@ -314,7 +314,7 @@ var ComboboxItem = /* @__PURE__ */(0, import_react.memo)(function ComboboxItem2(
       height: "auto",
       paddingVertical: "$2"
     } : void 0),
-    ...(0, import_theme2.transitionProps)(ctx.knobProps.transition),
+    ...(0, import_theme2.transitionProps)(ctx.knobProps.motion.control),
     children: [option.description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
       flex: 1,
       minWidth: 0,
@@ -381,6 +381,10 @@ function FloatingComboboxCore(param) {
     onOpenChange
   } = param;
   var _ref;
+  var {
+    style: elevatedSurfaceStyle,
+    ...elevatedSurfaceProps
+  } = knobProps.elevatedSurface;
   var hydrationTouch = (0, import_theme.useTouchSurface)();
   if (import_tamagui.isWeb) (0, import_theme2.ensureKeyboardModalityTracking)();
   var {
@@ -649,7 +653,7 @@ function FloatingComboboxCore(param) {
       };
       if (listScrollRef.current) listScrollRef.current.scrollTop = 0;
       void dropdownElement.offsetHeight;
-      if (suppressTransition) dropdownElement.style.transition = import_FloatingPanel.panelTransition;
+      if (suppressTransition) dropdownElement.style.transition = panel.panelTransition;
       requestAnimationFrame(function () {
         if (listScrollRef.current) {
           panel.updateArrows(listScrollRef.current);
@@ -729,7 +733,7 @@ function FloatingComboboxCore(param) {
       };
     }
     void dropdownElement.offsetHeight;
-    if (suppressTransition) dropdownElement.style.transition = import_FloatingPanel.panelTransition;
+    if (suppressTransition) dropdownElement.style.transition = panel.panelTransition;
     requestAnimationFrame(function () {
       if (listScrollRef.current) {
         panel.updateArrows(listScrollRef.current);
@@ -738,7 +742,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");
   };
@@ -1284,17 +1288,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: import_FloatingPanel.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 ? import_colorRamps.formInputColors.border.focus : "transparent",
           "data-testid": "combobox-dropdown",
           children: [!hideSearch && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
             size: knobProps.sizeToken,
@@ -1400,7 +1402,7 @@ function FloatingComboboxCore(param) {
                   backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
                 } : void 0,
                 onPress: handleCreate,
-                ...(0, import_theme2.transitionProps)(knobProps.transition),
+                ...(0, import_theme2.transitionProps)(knobProps.motion.control),
                 children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
                   size: 14,
                   color: knobProps.textAccentColor
@@ -1433,7 +1435,7 @@ function FloatingComboboxCore(param) {
               pressStyle: {
                 backgroundColor: import_colorRamps.formInputColors.background.focus
               },
-              ...(0, import_theme2.transitionProps)(knobProps.transition),
+              ...(0, import_theme2.transitionProps)(knobProps.motion.control),
               children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
                 size: 14,
                 color: knobProps.textAccentColor
@@ -1558,7 +1560,7 @@ function NativeComboboxCore(param) {
     open: openProp,
     onOpenChange
   } = param;
-  var _ref, _knobProps_transition, _ref1, _ref2;
+  var _ref, _ref1, _ref2;
   var _theme_color7;
   var hydrationTouch = (0, import_theme.useTouchSurface)();
   if (import_tamagui.isWeb) (0, import_theme2.ensureKeyboardModalityTracking)();
@@ -1676,7 +1678,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 = (0, import_react.useMemo)(function () {
     if (filter.trim()) return filtered;
     var current = Array.isArray(value) ? value : value ? [value] : [];
@@ -2173,8 +2174,8 @@ function NativeComboboxCore(param) {
     triggerEnd: clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
       size: knobProps.sizeToken,
       chromeless: true,
-      minWidth: 44,
-      minHeight: 44,
+      width: knobProps.control.height,
+      paddingHorizontal: 0,
       "aria-label": t("Clear"),
       icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
         size: 14
@@ -2192,7 +2193,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;
@@ -2248,7 +2248,6 @@ function Combobox(param) {
     selectedOrder,
     dismissible,
     skeleton,
-    compact,
     creatable,
     onCreate,
     createLabel,
@@ -2272,8 +2271,7 @@ function Combobox(param) {
     id
   } = (0, import_utils.useFormField)({
     form: formProp,
-    id: idProp,
-    compact
+    id: idProp
   });
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
   var [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(defaultValue);