@multiplatform.one/forms 7.75.0 → 7.77.0

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

@@ -45,6 +45,7 @@ var ReactNative = __toESM(require("react-native-web"));
 var import_react_native = require("react-native-web");
 var import_tamagui = require("tamagui");
 var import_Chip = require("../../Chip/index.cjs");
+var import_fieldRowContext = require("../../shared/fieldRowContext.cjs");
 var import_pickerTriggerContract = require("../../shared/pickerTriggerContract.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
@@ -78,6 +79,17 @@ const selectRowOutlineRest = {
   ...selectOutlineRest,
   borderRadius: 0
 };
+function TriggerCaret({
+  color
+}) {
+  return (0, import_fieldRowContext.useFieldRow)() ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretRightIcon, {
+    size: 16,
+    color
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
+    size: 16,
+    color
+  });
+}
 const SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "SelectRow",
   ...import_theme2.menuRowFrame,
@@ -389,6 +401,7 @@ function FloatingSelectCore({
   const [open, setOpen] = (0, import_react.useState)(false);
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
   const [controlledScrolling, setControlledScrolling] = (0, import_react.useState)(false);
+  const rowFace = (0, import_fieldRowContext.useFieldRow)();
   const {
     kbTrigger,
     kbNav,
@@ -846,9 +859,11 @@ function FloatingSelectCore({
       suppressFocusRing: open,
       size: knobProps.sizeToken,
       ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
-      paddingHorizontal: knobProps.panelPadding.padding,
-      ...(inTableCell ?
-      // Chromeless in cells.
+      ...(rowFace ? null : {
+        paddingHorizontal: knobProps.panelPadding.padding
+      }),
+      ...(inTableCell || rowFace ?
+      // Chromeless in cells and field rows.
       {} : {
         borderWidth: knobProps.borderRadius.borderWidth
       }),
@@ -859,7 +874,7 @@ function FloatingSelectCore({
         minWidth: 0,
         paddingVertical: "$2",
         justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
-        alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+        alignItems: multiple && selectedValues.length > 0 ? "center" : rowFace ? "flex-end" : "flex-start",
         children: multiple && selectedValues.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           flexDirection: "row",
           flexWrap: "nowrap",
@@ -882,7 +897,7 @@ function FloatingSelectCore({
           ...knobProps.controlType,
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
-          color: selectedOption ? textColor : import_colorRamps.formCommonColors.muted,
+          color: selectedOption ? rowFace ? "$textMuted" : textColor : import_colorRamps.formCommonColors.muted,
           numberOfLines: 1,
           userSelect: "none",
           children: selectedOption?.label ?? placeholder
@@ -890,8 +905,7 @@ function FloatingSelectCore({
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         flexShrink: 0,
         alignSelf: "center",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-          size: 16,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerCaret, {
           color: glyphColor
         })
       })]
@@ -1044,6 +1058,7 @@ function NativeSelectCore({
   const listRef = (0, import_react.useRef)(null);
   const listboxId = `${id}-listbox`;
   const optionId = index => `${listboxId}-option-${index}`;
+  const rowFace = (0, import_fieldRowContext.useFieldRow)();
   const {
     kbTrigger,
     kbNav,
@@ -1251,9 +1266,11 @@ function NativeSelectCore({
         disabled,
         size: knobProps.sizeToken,
         ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
-        paddingHorizontal: knobProps.panelPadding.padding,
+        ...(rowFace ? null : {
+          paddingHorizontal: knobProps.panelPadding.padding
+        }),
         pointerEvents: "none",
-        ...(inTableCell ? {} : {
+        ...(inTableCell || rowFace ? {} : {
           borderWidth: knobProps.borderRadius.borderWidth
         }),
         "data-testid": "select-trigger",
@@ -1263,21 +1280,19 @@ function NativeSelectCore({
           minWidth: 0,
           paddingVertical: "$2",
           justifyContent: "flex-start",
-          alignItems: "flex-start",
+          alignItems: rowFace ? "flex-end" : "flex-start",
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
             ...knobProps.controlType,
             fontFamily: knobProps.body.fontFamily,
             fontWeight: knobProps.body.fontWeight,
-            color: selectedOption ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
+            color: selectedOption ? rowFace ? "$textMuted" : import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
             numberOfLines: 1,
             children: triggerValueText
           })
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           flexShrink: 0,
           alignSelf: "center",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-            size: 16
-          })
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerCaret, {})
         })]
       })
     });
@@ -1304,8 +1319,10 @@ function NativeSelectCore({
       disabled,
       size: knobProps.sizeToken,
       ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
-      paddingHorizontal: knobProps.panelPadding.padding,
-      ...(inTableCell ? {} : {
+      ...(rowFace ? null : {
+        paddingHorizontal: knobProps.panelPadding.padding
+      }),
+      ...(inTableCell || rowFace ? {} : {
         borderWidth: knobProps.borderRadius.borderWidth
       }),
       ...(import_tamagui.isWeb ? selectTriggerRingProps(kbTrigger, open) : void 0),
@@ -1345,7 +1362,7 @@ function NativeSelectCore({
         minWidth: 0,
         paddingVertical: "$2",
         justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
-        alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+        alignItems: multiple && selectedValues.length > 0 ? "center" : rowFace ? "flex-end" : "flex-start",
         children: multiple && selectedValues.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           flexDirection: "row",
           flexWrap: "nowrap",
@@ -1368,15 +1385,14 @@ function NativeSelectCore({
           ...knobProps.controlType,
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
-          color: selectedOption ? textColor : import_colorRamps.formCommonColors.muted,
+          color: selectedOption ? rowFace ? "$textMuted" : textColor : import_colorRamps.formCommonColors.muted,
           numberOfLines: 1,
           children: selectedOption?.label ?? placeholder
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         flexShrink: 0,
         alignSelf: "center",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-          size: 16,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerCaret, {
           color: glyphColor
         })
       })]
@@ -1440,7 +1456,8 @@ function Select({
   const compactMenu = (0, import_compactFace.resolveCompactFace)((0, import_compactFace.pickerCompactFace)(options?.length ?? 0), insideOverlay) === "menu";
   const shouldUseSheet = !import_tamagui.isWeb || !effectiveGtSm && !compactMenu;
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
-  const inline = !inTableCell && (0, import_shouldInlineChoices.shouldInlineChoices)({
+  const inFieldRow = (0, import_fieldRowContext.useFieldRow)();
+  const inline = !inTableCell && !inFieldRow && (0, import_shouldInlineChoices.shouldInlineChoices)({
     insideOverlay,
     multiple,
     options
@@ -1453,7 +1470,7 @@ function Select({
     options,
     panelWidth
   });
-  if (!inline) {
+  if (!inline && !inFieldRow) {
     (0, import_devWarn.warnSelectTooFewOptions)({
       count: options?.length ?? 0,
       multiple,

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

@@ -48,6 +48,7 @@ var ReactNative = __toESM(require("react-native"));
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
 var import_Chip = require("../../Chip");
+var import_fieldRowContext = require("../../shared/fieldRowContext.native.js");
 var import_pickerTriggerContract = require("../../shared/pickerTriggerContract.native.js");
 var import_Skeleton = require("../../Skeleton");
 var import_fieldLayout = require("../../fieldLayout.native.js");
@@ -80,6 +81,18 @@ var selectRowOutlineRest = {
   ...selectOutlineRest,
   borderRadius: 0
 };
+function TriggerCaret(param) {
+  var {
+    color
+  } = param;
+  return (0, import_fieldRowContext.useFieldRow)() ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretRightIcon, {
+    size: 16,
+    color
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
+    size: 16,
+    color
+  });
+}
 var SelectRow = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "SelectRow",
   ...import_theme2.menuRowFrame,
@@ -497,6 +510,7 @@ function FloatingSelectCore(param) {
   var [open, setOpen] = (0, import_react.useState)(false);
   var [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
   var [controlledScrolling, setControlledScrolling] = (0, import_react.useState)(false);
+  var rowFace = (0, import_fieldRowContext.useFieldRow)();
   var {
     kbTrigger,
     kbNav,
@@ -1028,9 +1042,11 @@ function FloatingSelectCore(param) {
       suppressFocusRing: open,
       size: knobProps.sizeToken,
       ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
-      paddingHorizontal: knobProps.panelPadding.padding,
-      ...(inTableCell ?
-      // Chromeless in cells.
+      ...(rowFace ? null : {
+        paddingHorizontal: knobProps.panelPadding.padding
+      }),
+      ...(inTableCell || rowFace ?
+      // Chromeless in cells and field rows.
       {} : {
         borderWidth: knobProps.borderRadius.borderWidth
       }),
@@ -1042,7 +1058,7 @@ function FloatingSelectCore(param) {
         minWidth: 0,
         paddingVertical: "$2",
         justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
-        alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+        alignItems: multiple && selectedValues.length > 0 ? "center" : rowFace ? "flex-end" : "flex-start",
         children: multiple && selectedValues.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           flexDirection: "row",
           flexWrap: "nowrap",
@@ -1070,7 +1086,7 @@ function FloatingSelectCore(param) {
           ...knobProps.controlType,
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
-          color: selectedOption ? textColor : import_colorRamps.formCommonColors.muted,
+          color: selectedOption ? rowFace ? "$textMuted" : textColor : import_colorRamps.formCommonColors.muted,
           numberOfLines: 1,
           userSelect: "none",
           children: (_ref = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref !== void 0 ? _ref : placeholder
@@ -1078,8 +1094,7 @@ function FloatingSelectCore(param) {
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         flexShrink: 0,
         alignSelf: "center",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-          size: 16,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerCaret, {
           color: glyphColor
         })
       })]
@@ -1246,6 +1261,7 @@ function NativeSelectCore(param) {
   var optionId = function optionId2(index) {
     return `${listboxId}-option-${index}`;
   };
+  var rowFace = (0, import_fieldRowContext.useFieldRow)();
   var {
     kbTrigger,
     kbNav,
@@ -1510,9 +1526,11 @@ function NativeSelectCore(param) {
         disabled,
         size: knobProps.sizeToken,
         ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
-        paddingHorizontal: knobProps.panelPadding.padding,
+        ...(rowFace ? null : {
+          paddingHorizontal: knobProps.panelPadding.padding
+        }),
         pointerEvents: "none",
-        ...(inTableCell ? {} : {
+        ...(inTableCell || rowFace ? {} : {
           borderWidth: knobProps.borderRadius.borderWidth
         }),
         "data-testid": "select-trigger",
@@ -1522,21 +1540,19 @@ function NativeSelectCore(param) {
           minWidth: 0,
           paddingVertical: "$2",
           justifyContent: "flex-start",
-          alignItems: "flex-start",
+          alignItems: rowFace ? "flex-end" : "flex-start",
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
             ...knobProps.controlType,
             fontFamily: knobProps.body.fontFamily,
             fontWeight: knobProps.body.fontWeight,
-            color: selectedOption ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
+            color: selectedOption ? rowFace ? "$textMuted" : import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
             numberOfLines: 1,
             children: triggerValueText
           })
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           flexShrink: 0,
           alignSelf: "center",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-            size: 16
-          })
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerCaret, {})
         })]
       })
     });
@@ -1565,8 +1581,10 @@ function NativeSelectCore(param) {
       disabled,
       size: knobProps.sizeToken,
       ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
-      paddingHorizontal: knobProps.panelPadding.padding,
-      ...(inTableCell ? {} : {
+      ...(rowFace ? null : {
+        paddingHorizontal: knobProps.panelPadding.padding
+      }),
+      ...(inTableCell || rowFace ? {} : {
         borderWidth: knobProps.borderRadius.borderWidth
       }),
       ...(import_tamagui.isWeb ? selectTriggerRingProps(kbTrigger, open) : void 0),
@@ -1616,7 +1634,7 @@ function NativeSelectCore(param) {
         minWidth: 0,
         paddingVertical: "$2",
         justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
-        alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+        alignItems: multiple && selectedValues.length > 0 ? "center" : rowFace ? "flex-end" : "flex-start",
         children: multiple && selectedValues.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           flexDirection: "row",
           flexWrap: "nowrap",
@@ -1644,15 +1662,14 @@ function NativeSelectCore(param) {
           ...knobProps.controlType,
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
-          color: selectedOption ? textColor : import_colorRamps.formCommonColors.muted,
+          color: selectedOption ? rowFace ? "$textMuted" : textColor : import_colorRamps.formCommonColors.muted,
           numberOfLines: 1,
           children: (_ref2 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref2 !== void 0 ? _ref2 : placeholder
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         flexShrink: 0,
         alignSelf: "center",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-          size: 16,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerCaret, {
           color: glyphColor
         })
       })]
@@ -1718,7 +1735,8 @@ function Select(param) {
   var compactMenu = (0, import_compactFace.resolveCompactFace)((0, import_compactFace.pickerCompactFace)((_ref = options === null || options === void 0 ? void 0 : options.length) !== null && _ref !== void 0 ? _ref : 0), insideOverlay) === "menu";
   var shouldUseSheet = !import_tamagui.isWeb || !effectiveGtSm && !compactMenu;
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
-  var inline = !inTableCell && (0, import_shouldInlineChoices.shouldInlineChoices)({
+  var inFieldRow = (0, import_fieldRowContext.useFieldRow)();
+  var inline = !inTableCell && !inFieldRow && (0, import_shouldInlineChoices.shouldInlineChoices)({
     insideOverlay,
     multiple,
     options
@@ -1731,7 +1749,7 @@ function Select(param) {
     options,
     panelWidth
   });
-  if (!inline) {
+  if (!inline && !inFieldRow) {
     var _ref1;
     (0, import_devWarn.warnSelectTooFewOptions)({
       count: (_ref1 = options === null || options === void 0 ? void 0 : options.length) !== null && _ref1 !== void 0 ? _ref1 : 0,