@multiplatform.one/forms 7.46.0 → 7.47.0

package/dist/cjs/InputParts/index.cjs

@@ -22,6 +22,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var InputParts_exports = {};
 __export(InputParts_exports, {
+  FieldTrailingOverlay: () => FieldTrailingOverlay,
   FocusContext: () => FocusContext,
   FocusWiredTextArea: () => FocusWiredTextArea,
   INPUT_MODE_TO_KEYBOARD: () => INPUT_MODE_TO_KEYBOARD,
@@ -51,6 +52,7 @@ var import_theme2 = require("@multiplatform.one/theme");
 var import_colorRamps = require("../shared/colorRamps.cjs");
 var import_groupContext = require("../shared/groupContext.cjs");
 var import_nativeAutoFocus = require("../shared/nativeAutoFocus.cjs");
+var import_pressSlopProps = require("../shared/pressSlopProps.cjs");
 var import_tableCellContext = require("../shared/tableCellContext.cjs");
 var import_fieldLayout = require("../fieldLayout.cjs");
 var import_themedPrimitives = require("../themedPrimitives.cjs");
@@ -239,6 +241,16 @@ const InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 });
+const FieldTrailingOverlayContext = (0, import_react.createContext)(false);
+function FieldTrailingOverlay({
+  active,
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FieldTrailingOverlayContext.Provider, {
+    value: active,
+    children
+  });
+}
 function wrapNativePressable(onPress, disabled, node) {
   if (import_tamagui.isWeb || !onPress) return node;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
@@ -344,11 +356,22 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   const insetPadProps = sizeRecipeEscaped || typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? void 0 : {
     paddingHorizontal: fieldInset
   };
+  const trailingOverlay = (0, import_react.useContext)(FieldTrailingOverlayContext);
+  const trailingSlot = trailingOverlay ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "aria-hidden": true,
+    "data-field-action-slot": "",
+    width: familyRecipe.height,
+    flexShrink: 0,
+    pointerEvents: "none"
+  }) : null;
+  const trailingPadProps = trailingOverlay ? {
+    paddingInlineEnd: 0
+  } : void 0;
   if (inTableCell) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
       focused,
       setFocused,
-      children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(InputGroupFrame, {
         touch: hydrationTouch,
         ref: forwardedRef,
         borderWidth: 0,
@@ -364,11 +387,12 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
         ...controlFragment,
         ...passthroughSizeProps,
         ...insetPadProps,
+        ...trailingPadProps,
         ...sizeRecipeEscapeOverride,
         ...framePressProps,
         ...boxRingAttrs,
         overflow: boxOverflow,
-        children
+        children: [children, trailingSlot]
       }))
     });
   }
@@ -394,7 +418,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
     focused,
     setFocused,
-    children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+    children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(InputGroupFrame, {
       touch: hydrationTouch,
       ref: forwardedRef,
       ...knobProps.body,
@@ -419,6 +443,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       ...props,
       ...passthroughSizeProps,
       ...insetPadProps,
+      ...trailingPadProps,
       ...sizeRecipeEscapeOverride,
       ...framePressProps,
       ...boxRingAttrs,
@@ -430,7 +455,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
         }
       } : void 0),
       overflow: boxOverflow,
-      children
+      children: [children, trailingSlot]
     }))
   });
 });
@@ -756,7 +781,8 @@ const InputButtonImpl = InputButton.styleable((buttonProps, ref) => {
     if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
   }, [ref, tabIndexProp]);
   if (glyphRing) {
-    const square2 = (0, import_theme2.sizeRecipeForToken)(String(size ?? "$true"), {
+    const measured = props.height;
+    const square2 = typeof measured === "number" ? measured : (0, import_theme2.sizeRecipeForToken)(String(size ?? "$true"), {
       touch: hydrationTouch
     }).height;
     const disabled = props.disabled === true;
@@ -800,6 +826,69 @@ const InputButtonImpl = InputButton.styleable((buttonProps, ref) => {
     children: textChild ?? getThemedIcon(children)
   });
 });
+const InputActionImpl = (0, import_react.forwardRef)(function InputAction({
+  label,
+  onPress,
+  disabled,
+  pressed,
+  controls,
+  size,
+  height,
+  tabIndex,
+  children,
+  ...rest
+}, ref) {
+  const {
+    size: contextSize
+  } = InputContext.useStyledContext();
+  const hydrationTouch = (0, import_theme2.useTouchSurface)();
+  const token = size ?? contextSize ?? "$true";
+  const square = height ?? (0, import_theme2.sizeRecipeForToken)(String(token), {
+    touch: hydrationTouch
+  }).height;
+  const activate = () => {
+    if (!disabled) onPress?.();
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputButtonImpl, {
+    ref,
+    glyphRing: true,
+    size: token,
+    disabled,
+    tabIndex,
+    "aria-label": label,
+    accessibilityLabel: label,
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled: !!disabled
+    },
+    ...(import_tamagui.isWeb && pressed !== void 0 ? {
+      "aria-pressed": pressed
+    } : void 0),
+    ...(controls ? {
+      "aria-controls": controls
+    } : void 0),
+    height: square,
+    width: square,
+    ...(0, import_pressSlopProps.pressSlopProps)(square, true),
+    "data-field-action": "trailing",
+    onPress: disabled ? void 0 : e => {
+      e?.stopPropagation?.();
+      activate();
+    },
+    onKeyDown: e => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      e.stopPropagation();
+      activate();
+    },
+    ...rest,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputIcon, {
+      "aria-hidden": true,
+      color: import_colorRamps.formCommonColors.muted,
+      children
+    })
+  });
+});
 const InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "InputIconFrame",
   justifyContent: "center",
@@ -1066,6 +1155,7 @@ const InputCompound = Object.assign(InputContainerImpl, {
   TextArea: FocusWiredTextArea,
   Section: InputSection,
   Button: InputButtonImpl,
+  Action: InputActionImpl,
   Icon: InputIcon,
   Info: InputInfo,
   Meta: InputFieldMeta,

package/dist/cjs/InputParts/index.native.js

@@ -24,6 +24,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var InputParts_exports = {};
 __export(InputParts_exports, {
+  FieldTrailingOverlay: () => FieldTrailingOverlay,
   FocusContext: () => FocusContext,
   FocusWiredTextArea: () => FocusWiredTextArea,
   INPUT_MODE_TO_KEYBOARD: () => INPUT_MODE_TO_KEYBOARD,
@@ -54,6 +55,7 @@ var import_theme2 = require("@multiplatform.one/theme");
 var import_colorRamps = require("../shared/colorRamps.native.js");
 var import_groupContext = require("../shared/groupContext.native.js");
 var import_nativeAutoFocus = require("../shared/nativeAutoFocus.native.js");
+var import_pressSlopProps = require("../shared/pressSlopProps.native.js");
 var import_tableCellContext = require("../shared/tableCellContext.native.js");
 var import_fieldLayout = require("../fieldLayout.native.js");
 var import_themedPrimitives = require("../themedPrimitives.native.js");
@@ -255,6 +257,17 @@ var InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 });
+var FieldTrailingOverlayContext = /* @__PURE__ */(0, import_react.createContext)(false);
+function FieldTrailingOverlay(param) {
+  var {
+    active,
+    children
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FieldTrailingOverlayContext.Provider, {
+    value: active,
+    children
+  });
+}
 function wrapNativePressable(onPress, disabled, node) {
   if (import_tamagui.isWeb || !onPress) return node;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
@@ -376,11 +389,22 @@ function (groupProps, forwardedRef) {
   var insetPadProps = sizeRecipeEscaped || typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null ? void 0 : {
     paddingHorizontal: fieldInset
   };
+  var trailingOverlay = (0, import_react.useContext)(FieldTrailingOverlayContext);
+  var trailingSlot = trailingOverlay ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "aria-hidden": true,
+    "data-field-action-slot": "",
+    width: familyRecipe.height,
+    flexShrink: 0,
+    pointerEvents: "none"
+  }) : null;
+  var trailingPadProps = trailingOverlay ? {
+    paddingInlineEnd: 0
+  } : void 0;
   if (inTableCell) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
       focused,
       setFocused: setFocused2,
-      children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(InputGroupFrame, {
         touch: hydrationTouch,
         ref: forwardedRef,
         borderWidth: 0,
@@ -404,11 +428,12 @@ function (groupProps, forwardedRef) {
         ...controlFragment,
         ...passthroughSizeProps,
         ...insetPadProps,
+        ...trailingPadProps,
         ...sizeRecipeEscapeOverride,
         ...framePressProps,
         ...boxRingAttrs,
         overflow: boxOverflow,
-        children
+        children: [children, trailingSlot]
       }))
     });
   }
@@ -434,7 +459,7 @@ function (groupProps, forwardedRef) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusContext.Provider, {
     focused,
     setFocused: setFocused2,
-    children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+    children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(InputGroupFrame, {
       touch: hydrationTouch,
       ref: forwardedRef,
       ...knobProps.body,
@@ -459,6 +484,7 @@ function (groupProps, forwardedRef) {
       ...props,
       ...passthroughSizeProps,
       ...insetPadProps,
+      ...trailingPadProps,
       ...sizeRecipeEscapeOverride,
       ...framePressProps,
       ...boxRingAttrs,
@@ -474,7 +500,7 @@ function (groupProps, forwardedRef) {
         }
       } : void 0),
       overflow: boxOverflow,
-      children
+      children: [children, trailingSlot]
     }))
   });
 });
@@ -808,7 +834,8 @@ var InputButtonImpl = InputButton.styleable(function (buttonProps, ref) {
     if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
   }, [ref, tabIndexProp]);
   if (glyphRing) {
-    var square = (0, import_theme2.sizeRecipeForToken)(String(size !== null && size !== void 0 ? size : "$true"), {
+    var measured = props.height;
+    var square = typeof measured === "number" ? measured : (0, import_theme2.sizeRecipeForToken)(String(size !== null && size !== void 0 ? size : "$true"), {
       touch: hydrationTouch
     }).height;
     var disabled = props.disabled === true;
@@ -856,6 +883,72 @@ var InputButtonImpl = InputButton.styleable(function (buttonProps, ref) {
     children: textChild !== null && textChild !== void 0 ? textChild : getThemedIcon(children)
   });
 });
+var InputActionImpl = /* @__PURE__ */(0, import_react.forwardRef)(function InputAction(param, ref) {
+  var {
+    label,
+    onPress,
+    disabled,
+    pressed,
+    controls,
+    size,
+    height,
+    tabIndex,
+    children,
+    ...rest
+  } = param;
+  var _ref;
+  var {
+    size: contextSize
+  } = InputContext.useStyledContext();
+  var hydrationTouch = (0, import_theme2.useTouchSurface)();
+  var token = (_ref = size !== null && size !== void 0 ? size : contextSize) !== null && _ref !== void 0 ? _ref : "$true";
+  var square = height !== null && height !== void 0 ? height : (0, import_theme2.sizeRecipeForToken)(String(token), {
+    touch: hydrationTouch
+  }).height;
+  var activate = function activate2() {
+    if (!disabled) onPress === null || onPress === void 0 ? void 0 : onPress();
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputButtonImpl, {
+    ref,
+    glyphRing: true,
+    size: token,
+    disabled,
+    tabIndex,
+    "aria-label": label,
+    accessibilityLabel: label,
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled: !!disabled
+    },
+    ...(import_tamagui.isWeb && pressed !== void 0 ? {
+      "aria-pressed": pressed
+    } : void 0),
+    ...(controls ? {
+      "aria-controls": controls
+    } : void 0),
+    height: square,
+    width: square,
+    ...(0, import_pressSlopProps.pressSlopProps)(square, true),
+    "data-field-action": "trailing",
+    onPress: disabled ? void 0 : function (e) {
+      var _e_stopPropagation;
+      e === null || e === void 0 ? void 0 : (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+      activate();
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      e.stopPropagation();
+      activate();
+    },
+    ...rest,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputIcon, {
+      "aria-hidden": true,
+      color: import_colorRamps.formCommonColors.muted,
+      children
+    })
+  });
+});
 var InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "InputIconFrame",
   justifyContent: "center",
@@ -1135,6 +1228,7 @@ var InputCompound = Object.assign(InputContainerImpl, {
   TextArea: FocusWiredTextArea,
   Section: InputSection,
   Button: InputButtonImpl,
+  Action: InputActionImpl,
   Icon: InputIcon,
   Info: InputInfo,
   Meta: InputFieldMeta,