react-native-system-ui 0.0.4 → 0.0.6

package/dist/cjs/components/field/Field.js

@@ -30,10 +30,146 @@ var _dialog = _interopRequireDefault(require("../dialog"));
 var _string = require("../../utils/string");
 var _validate = require("../../utils/validate");
 var _tokens = require("./tokens");
-var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const alignMap = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+const mapKeyboardType = type => {
+  switch (type) {
+    case 'number':
+      return 'decimal-pad';
+    case 'digit':
+      return 'number-pad';
+    case 'tel':
+      return 'phone-pad';
+    default:
+      return undefined;
+  }
+};
+const FieldSlot = ({
+  onPress,
+  style,
+  children,
+  accessibilityRole = 'button'
+}) => {
+  if (!children) return null;
+  return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+    onPress: onPress,
+    accessibilityRole: accessibilityRole,
+    style: style
+  }, children) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: style
+  }, children);
+};
+const FieldClearButton = ({
+  show,
+  tokens,
+  clearIcon,
+  onPressIn,
+  onPressOut,
+  onPress
+}) => {
+  if (!show) return null;
+  const webMouseDownProps = _reactNative().Platform.OS === 'web' ? {
+    onMouseDown: event => {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+    }
+  } : undefined;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    style: [tokens.layout.clearIcon, {
+      paddingHorizontal: tokens.spacing.rightIconGap
+    }]
+  }, webMouseDownProps, {
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    onPress: onPress,
+    accessibilityRole: "button"
+  }), /*#__PURE__*/_react().default.isValidElement(clearIcon) ? clearIcon : /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Clear, {
+    size: tokens.sizes.clearIcon,
+    fill: tokens.colors.clear,
+    color: tokens.colors.clear
+  }));
+};
+const FieldInput = ({
+  inputRef,
+  tokens,
+  isTextarea,
+  disabled,
+  error,
+  finalTextAlign,
+  lineHeight,
+  textareaHeight,
+  minHeight,
+  inputStyle,
+  value,
+  onChangeText,
+  onFocus,
+  onBlur,
+  onPressIn,
+  rows,
+  placeholderTextColor,
+  keyboardType,
+  onContentSizeChange,
+  describedBy,
+  secureTextEntry,
+  editable,
+  restInputProps
+}) => {
+  const inputStyles = [isTextarea ? tokens.layout.textarea : tokens.layout.input, {
+    color: disabled ? tokens.colors.disabled : error ? tokens.colors.error : tokens.colors.input,
+    fontSize: tokens.typography.inputSize,
+    textAlign: finalTextAlign,
+    ...(isTextarea ? {
+      lineHeight,
+      height: textareaHeight,
+      minHeight
+    } : {
+      minHeight: tokens.sizes.controlMinHeight
+    })
+  }, inputStyle];
+  return /*#__PURE__*/_react().default.createElement(_reactNative().TextInput, _extends({
+    ref: inputRef,
+    style: inputStyles,
+    value: value,
+    onChangeText: onChangeText,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onPressIn: onPressIn,
+    editable: editable,
+    secureTextEntry: secureTextEntry,
+    multiline: isTextarea,
+    numberOfLines: isTextarea ? rows : undefined,
+    keyboardType: keyboardType,
+    placeholderTextColor: placeholderTextColor,
+    onContentSizeChange: isTextarea ? onContentSizeChange : undefined
+  }, describedBy ? {
+    accessibilityDescribedBy: describedBy
+  } : null, {
+    clearButtonMode: "never"
+  }, restInputProps));
+};
+const FieldControlRow = ({
+  tokens,
+  prefixNode,
+  leftIconNode,
+  controlNode,
+  clearNode,
+  rightIconNode,
+  suffixNode
+}) => {
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.body
+  }, prefixNode, leftIconNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.controlWrapper, {
+      minHeight: tokens.sizes.controlMinHeight
+    }]
+  }, controlNode, clearNode), rightIconNode, suffixNode);
+};
 const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const {
     tokensOverride,
@@ -106,7 +242,7 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
   const clearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
   const rows = rowsProp ?? tokens.defaults.rows;
   const formatTrigger = formatTriggerProp ?? tokens.defaults.formatTrigger;
-  const mergedTitleStyle = [{
+  const mergedTitleStyle = (0, _react().useMemo)(() => [{
     width: labelWidth,
     minWidth: labelWidth,
     maxWidth: labelWidth,
@@ -114,29 +250,30 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     marginRight: tokens.spacing.labelGap,
     flexShrink: 0,
     flexGrow: 0
-  }, titleStyle];
-  const resolvedSuffix = suffixProp ?? button;
-  const resolvedDescription = intro ?? description;
-  const resolvedPlaceholderColor = placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder);
+  }, titleStyle], [labelWidth, titleStyle, tokens.spacing.labelGap]);
+  const resolvedSuffix = (0, _react().useMemo)(() => suffixProp ?? button, [button, suffixProp]);
+  const resolvedDescription = (0, _react().useMemo)(() => intro ?? description, [description, intro]);
+  const resolvedPlaceholderColor = (0, _react().useMemo)(() => placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder), [disabled, placeholderTextColor, tokens.colors.disabled, tokens.colors.placeholder]);
   const isTextarea = type === 'textarea';
   const isControlled = valueProp !== undefined;
   const [internalValue, setInternalValue] = (0, _react().useState)(defaultValue);
   const value = isControlled ? valueProp ?? '' : internalValue;
   const [focused, setFocused] = (0, _react().useState)(false);
   const [pressingClear, setPressingClear] = (0, _react().useState)(false);
+  const clearJustHandledRef = (0, _react().useRef)(false);
   const inputRef = (0, _react().useRef)(null);
   const introId = (0, _react().useId)();
   const errorId = (0, _react().useId)();
-  const describedBy = (() => {
+  const describedBy = (0, _react().useMemo)(() => {
     const ids = [(0, _validate.isRenderable)(errorMessage) ? errorId : null, (0, _validate.isRenderable)(resolvedDescription) ? introId : null].filter(Boolean);
     return ids.length ? ids : undefined;
-  })();
+  }, [errorId, errorMessage, introId, resolvedDescription]);
   const lineHeight = tokens.defaults.textareaLineHeight;
-  const autoSizeConfig = autoSize && (0, _validate.isObject)(autoSize) ? autoSize : undefined;
-  const minRows = !isTextarea ? 1 : autoSizeConfig && (0, _validate.isDef)(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows);
-  const maxRows = !isTextarea ? undefined : autoSizeConfig && (0, _validate.isDef)(autoSizeConfig.maxRows) ? Math.max(1, autoSizeConfig.maxRows) : undefined;
-  const minHeight = isTextarea ? Math.max(tokens.sizes.textareaMinHeight, minRows * lineHeight) : undefined;
-  const maxHeight = isTextarea && maxRows ? Math.max(tokens.sizes.textareaMinHeight, maxRows * lineHeight) : undefined;
+  const autoSizeConfig = (0, _react().useMemo)(() => autoSize && (0, _validate.isObject)(autoSize) ? autoSize : undefined, [autoSize]);
+  const minRows = (0, _react().useMemo)(() => !isTextarea ? 1 : autoSizeConfig && (0, _validate.isDef)(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows), [autoSizeConfig, isTextarea, rows]);
+  const maxRows = (0, _react().useMemo)(() => !isTextarea ? undefined : autoSizeConfig && (0, _validate.isDef)(autoSizeConfig.maxRows) ? Math.max(1, autoSizeConfig.maxRows) : undefined, [autoSizeConfig, isTextarea]);
+  const minHeight = (0, _react().useMemo)(() => isTextarea ? Math.max(tokens.sizes.textareaMinHeight, minRows * lineHeight) : undefined, [isTextarea, lineHeight, minRows, tokens.sizes.textareaMinHeight]);
+  const maxHeight = (0, _react().useMemo)(() => isTextarea && maxRows ? Math.max(tokens.sizes.textareaMinHeight, maxRows * lineHeight) : undefined, [isTextarea, lineHeight, maxRows, tokens.sizes.textareaMinHeight]);
   const [textareaHeight, setTextareaHeight] = (0, _react().useState)(minHeight);
   const formatValue = (0, _react().useCallback)((inputValue, trigger = 'onChange') => formatter && trigger === formatTrigger ? formatter(inputValue) : inputValue, [formatTrigger, formatter]);
   const updateValue = (0, _react().useCallback)((next, trigger = 'onChange') => {
@@ -176,6 +313,12 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     }
   }, [onFocus, readOnly]);
   const handleBlur = (0, _react().useCallback)(event => {
+    if (_reactNative().Platform.OS !== 'web' && clearJustHandledRef.current) {
+      clearJustHandledRef.current = false;
+      setFocused(false);
+      onBlur?.(event);
+      return;
+    }
     updateValue(value ?? '', 'onBlur');
     setFocused(false);
     onBlur?.(event);
@@ -200,28 +343,70 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     setTextareaHeight(nextHeight);
   }, [autoSize, isTextarea, maxHeight, minHeight]);
   const handleClear = (0, _react().useCallback)(() => {
+    if (_reactNative().Platform.OS !== 'web') {
+      clearJustHandledRef.current = true;
+    }
     updateValue('');
     inputRef.current?.clear?.();
     inputRef.current?.focus?.();
     onClear?.();
   }, [onClear, updateValue]);
-  const renderLabel = () => {
-    if (!(0, _validate.isRenderable)(label)) return null;
-    const isPlain = (0, _validate.isText)(label);
-    const content = isPlain ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [{
-        color: disabled ? tokens.colors.disabled : tokens.colors.label,
-        fontSize: tokens.typography.labelSize,
-        textAlign: labelAlign
-      }, labelStyle],
-      numberOfLines: 1
-    }, label, colon ? ':' : '') : label;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: tokens.layout.labelRow
-    }, content, (0, _validate.isRenderable)(tooltip) ? renderTooltip() : null);
+  const handleClearPressIn = (0, _react().useCallback)(() => {
+    setPressingClear(true);
+    if (_reactNative().Platform.OS !== 'web') {
+      handleClear();
+    }
+  }, [handleClear]);
+  const handleClearPressOut = (0, _react().useCallback)(() => {
+    setPressingClear(false);
+    clearJustHandledRef.current = false;
+  }, []);
+  const controlNode = (0, _validate.isRenderable)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.children, {
+      minHeight: tokens.sizes.controlMinHeight
+    }]
+  }, children) : /*#__PURE__*/_react().default.createElement(FieldInput, {
+    inputRef: inputRef,
+    tokens: tokens,
+    isTextarea: isTextarea,
+    disabled: disabled,
+    error: error,
+    finalTextAlign: finalTextAlign,
+    lineHeight: lineHeight,
+    textareaHeight: textareaHeight,
+    minHeight: minHeight,
+    inputStyle: inputStyle,
+    value: value ?? '',
+    onChangeText: handleChangeText,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onPressIn: handlePressIn,
+    rows: rows,
+    keyboardType: restInputProps.keyboardType ?? mapKeyboardType(type),
+    placeholderTextColor: resolvedPlaceholderColor,
+    onContentSizeChange: handleContentSizeChange,
+    describedBy: describedBy,
+    secureTextEntry: type === 'password',
+    editable: !disabled && !readOnly,
+    restInputProps: restInputProps
+  });
+  const contentWrapperStyle = (0, _react().useMemo)(() => [{
+    width: '100%',
+    justifyContent: alignMap[controlAlign]
+  }, contentStyle], [contentStyle, controlAlign]);
+  const renderAffix = node => {
+    if ((0, _validate.isText)(node)) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        style: [tokens.layout.affixText, {
+          color: tokens.colors.input,
+          fontSize: tokens.typography.inputSize
+        }],
+        numberOfLines: 1
+      }, node);
+    }
+    return node;
   };
-  const renderTooltip = () => {
-    if (!(0, _validate.isRenderable)(tooltip)) return null;
+  const tooltipNode = (0, _validate.isRenderable)(tooltip) ? (() => {
     const defaultIcon = /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().QuestionO, {
       size: tokens.sizes.icon,
       fill: tokens.colors.tooltip,
@@ -246,102 +431,22 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
       onPress: () => _dialog.default.show(dialogProps),
       accessibilityRole: "button"
     }, icon);
-  };
-  const renderLeftIcon = () => {
-    if (!leftIcon) return null;
-    const content = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [tokens.layout.leftIcon, {
-        marginRight: tokens.spacing.leftIconGap,
-        minWidth: tokens.sizes.icon
-      }]
-    }, leftIcon);
-    if (!onClickLeftIcon) return content;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-      onPress: onClickLeftIcon,
-      accessibilityRole: "button"
-    }, content);
-  };
-  const renderRightIcon = () => {
-    if (!rightIcon) return null;
-    const node = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [tokens.layout.rightIcon, {
-        paddingHorizontal: tokens.spacing.rightIconGap
-      }]
-    }, rightIcon);
-    if (!onClickRightIcon) return node;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-      onPress: onClickRightIcon,
-      accessibilityRole: "button"
-    }, node);
-  };
-  const renderClearIcon = () => {
-    if (!showClear) return null;
-    const webMouseDownProps = _reactNative().Platform.OS === 'web' ? {
-      onMouseDown: event => {
-        event.preventDefault?.();
-        event.stopPropagation?.();
-      }
-    } : undefined;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-      style: [tokens.layout.clearIcon, {
-        paddingHorizontal: tokens.spacing.rightIconGap
-      }]
-    }, webMouseDownProps, {
-      onPressIn: () => setPressingClear(true),
-      onPressOut: () => setPressingClear(false),
-      onPress: handleClear,
-      accessibilityRole: "button"
-    }), /*#__PURE__*/_react().default.isValidElement(clearIcon) ? clearIcon : /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Clear, {
-      size: tokens.sizes.clearIcon,
-      fill: tokens.colors.clear,
-      color: tokens.colors.clear
-    }));
-  };
-  const renderControl = () => {
-    if ((0, _validate.isRenderable)(children)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: [tokens.layout.children, {
-          minHeight: tokens.sizes.controlMinHeight
-        }]
-      }, children);
-    }
-    const inputStyles = [isTextarea ? tokens.layout.textarea : tokens.layout.input, {
-      color: disabled ? tokens.colors.disabled : error ? tokens.colors.error : tokens.colors.input,
-      fontSize: tokens.typography.inputSize,
-      textAlign: finalTextAlign,
-      ...(isTextarea ? {
-        lineHeight,
-        height: textareaHeight,
-        minHeight
-      } : {
-        minHeight: tokens.sizes.controlMinHeight
-      })
-    }, inputStyle];
-    return /*#__PURE__*/_react().default.createElement(_reactNative().TextInput, _extends({
-      ref: inputRef,
-      style: inputStyles,
-      value: value,
-      onChangeText: handleChangeText,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onPressIn: handlePressIn,
-      editable: !disabled && !readOnly,
-      secureTextEntry: type === 'password',
-      multiline: isTextarea,
-      numberOfLines: isTextarea ? rows : undefined,
-      keyboardType: restInputProps.keyboardType ?? (0, _utils.mapKeyboardType)(type),
-      placeholderTextColor: resolvedPlaceholderColor,
-      onContentSizeChange: isTextarea ? handleContentSizeChange : undefined
-      // @ts-ignore
-      ,
-      accessibilityDescribedBy: describedBy,
-      clearButtonMode: "never"
-    }, restInputProps));
-  };
-  const renderWordLimit = () => {
-    if (!showWordLimit || maxLength === undefined || maxLength === null) {
-      return null;
-    }
+  })() : null;
+  const labelNode = (0, _validate.isRenderable)(label) ? (() => {
+    const isPlain = (0, _validate.isText)(label);
+    const content = isPlain ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [{
+        color: disabled ? tokens.colors.disabled : tokens.colors.label,
+        fontSize: tokens.typography.labelSize,
+        textAlign: labelAlign
+      }, labelStyle],
+      numberOfLines: 1
+    }, label, colon ? ':' : '') : label;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: tokens.layout.labelRow
+    }, content, tooltipNode);
+  })() : null;
+  const wordLimitNode = showWordLimit && maxLength !== undefined && maxLength !== null ? (() => {
     const currentCount = (value ?? '').length;
     const content = (0, _validate.isFunction)(showWordLimit) ? showWordLimit({
       currentCount,
@@ -360,69 +465,72 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
       }, content);
     }
     return content;
-  };
-  const renderMessage = () => {
-    if (!(0, _validate.isRenderable)(errorMessage)) return null;
-    if ((0, _validate.isText)(errorMessage)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        nativeID: errorId,
-        style: [tokens.layout.message, {
-          color: tokens.colors.error,
-          fontSize: tokens.typography.messageSize,
-          textAlign: errorMessageAlign,
-          marginTop: tokens.spacing.messageMarginTop
-        }, errorMessageStyle],
-        accessibilityLiveRegion: "polite"
-      }, errorMessage);
-    }
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      nativeID: errorId,
-      style: [tokens.layout.message, {
-        alignSelf: _utils.alignMap[errorMessageAlign],
-        marginTop: tokens.spacing.messageMarginTop
-      }],
-      accessibilityLiveRegion: "polite"
-    }, errorMessage);
-  };
-  const renderIntro = () => {
-    if (!(0, _validate.isRenderable)(resolvedDescription)) return null;
-    if ((0, _validate.isText)(resolvedDescription)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        nativeID: introId,
-        style: [tokens.layout.message, {
-          color: tokens.colors.intro,
-          fontSize: tokens.typography.introSize,
-          textAlign: controlAlign,
-          marginTop: tokens.spacing.introMarginTop
-        }, introStyle]
-      }, resolvedDescription);
+  })() : null;
+  const messageNode = (0, _validate.isRenderable)(errorMessage) ? (0, _validate.isText)(errorMessage) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    nativeID: errorId,
+    style: [tokens.layout.message, {
+      color: tokens.colors.error,
+      fontSize: tokens.typography.messageSize,
+      textAlign: errorMessageAlign,
+      marginTop: tokens.spacing.messageMarginTop
+    }, errorMessageStyle],
+    accessibilityLiveRegion: "polite"
+  }, errorMessage) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    nativeID: errorId,
+    style: [tokens.layout.message, {
+      alignSelf: alignMap[errorMessageAlign],
+      marginTop: tokens.spacing.messageMarginTop
+    }],
+    accessibilityLiveRegion: "polite"
+  }, errorMessage) : null;
+  const introNode = (0, _validate.isRenderable)(resolvedDescription) ? (0, _validate.isText)(resolvedDescription) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    nativeID: introId,
+    style: [tokens.layout.message, {
+      color: tokens.colors.intro,
+      fontSize: tokens.typography.introSize,
+      textAlign: controlAlign,
+      marginTop: tokens.spacing.introMarginTop
+    }, introStyle]
+  }, resolvedDescription) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    nativeID: introId,
+    style: {
+      marginTop: tokens.spacing.introMarginTop
     }
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      nativeID: introId,
-      style: {
-        marginTop: tokens.spacing.introMarginTop
-      }
-    }, resolvedDescription);
-  };
-  const contentWrapperStyle = [{
-    width: '100%',
-    justifyContent: _utils.alignMap[controlAlign]
-  }, contentStyle];
-  const renderAffix = node => {
-    if ((0, _validate.isText)(node)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        style: [tokens.layout.affixText, {
-          color: tokens.colors.input,
-          fontSize: tokens.typography.inputSize
-        }],
-        numberOfLines: 1
-      }, node);
-    }
-    return node;
-  };
+  }, resolvedDescription) : null;
+  const prefixNode = prefix ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.prefix, {
+      paddingRight: tokens.spacing.prefixGap
+    }]
+  }, renderAffix(prefix)) : null;
+  const suffixNode = resolvedSuffix ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.suffix, {
+      paddingLeft: tokens.spacing.suffixGap
+    }]
+  }, renderAffix(resolvedSuffix)) : null;
+  const leftIconNode = leftIcon ? /*#__PURE__*/_react().default.createElement(FieldSlot, {
+    onPress: onClickLeftIcon,
+    style: [tokens.layout.leftIcon, {
+      marginRight: tokens.spacing.leftIconGap,
+      minWidth: tokens.sizes.icon
+    }]
+  }, leftIcon) : null;
+  const rightIconNode = rightIcon ? /*#__PURE__*/_react().default.createElement(FieldSlot, {
+    onPress: onClickRightIcon,
+    style: [tokens.layout.rightIcon, {
+      paddingHorizontal: tokens.spacing.rightIconGap
+    }]
+  }, rightIcon) : null;
+  const clearNode = showClear ? /*#__PURE__*/_react().default.createElement(FieldClearButton, {
+    show: showClear,
+    tokens: tokens,
+    clearIcon: clearIcon,
+    onPressIn: handleClearPressIn,
+    onPressOut: _reactNative().Platform.OS === 'web' ? handleClearPressOut : undefined,
+    onPress: _reactNative().Platform.OS === 'web' ? handleClear : undefined
+  }) : null;
   return /*#__PURE__*/_react().default.createElement(_cell.default, {
-    title: renderLabel(),
-    icon: renderLeftIcon(),
+    title: labelNode,
+    icon: undefined,
     required: required,
     border: border,
     center: center,
@@ -440,21 +548,15 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     accessibilityLabel: (0, _validate.isText)(label) ? String(label) : undefined,
     onPress: onClick,
     android_ripple: androidRipple
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.body
-  }, prefix ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.prefix, {
-      paddingRight: tokens.spacing.prefixGap
-    }]
-  }, renderAffix(prefix)) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.controlWrapper, {
-      minHeight: tokens.sizes.controlMinHeight
-    }]
-  }, renderControl(), renderClearIcon()), renderRightIcon(), resolvedSuffix ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.suffix, {
-      paddingLeft: tokens.spacing.suffixGap
-    }]
-  }, renderAffix(resolvedSuffix)) : null), renderWordLimit(), renderMessage(), renderIntro());
+  }, /*#__PURE__*/_react().default.createElement(FieldControlRow, {
+    tokens: tokens,
+    prefixNode: prefixNode,
+    leftIconNode: leftIconNode,
+    controlNode: controlNode,
+    clearNode: clearNode,
+    rightIconNode: rightIconNode,
+    suffixNode: suffixNode
+  }), wordLimitNode, messageNode, introNode);
 });
 Field.displayName = 'Field';
 var _default = exports.default = Field;

package/dist/cjs/components/flex/Flex.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Flex = void 0;
+exports.FlexContext = exports.Flex = void 0;
 function _react() {
   const data = _interopRequireDefault(require("react"));
   _react = function () {
@@ -18,9 +18,13 @@ function _reactNative() {
   };
   return data;
 }
-var _FlexContext = require("./FlexContext");
 var _tokens = require("./tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const FlexContext = exports.FlexContext = /*#__PURE__*/_react().default.createContext({
+  horizontalGap: 0,
+  verticalGap: 0,
+  columns: 24
+});
 const alignMap = {
   start: 'flex-start',
   center: 'center',
@@ -59,7 +63,7 @@ const Flex = props => {
   const horizontalGap = Math.max(0, hRaw ?? 0);
   const verticalGap = Math.max(0, vRaw ?? 0);
   const supportsGap = _reactNative().Platform.OS === 'web';
-  return /*#__PURE__*/_react().default.createElement(_FlexContext.FlexContext.Provider, {
+  return /*#__PURE__*/_react().default.createElement(FlexContext.Provider, {
     value: {
       horizontalGap,
       verticalGap,

package/dist/cjs/components/flex/FlexContext.js

@@ -3,17 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FlexContext = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FlexContext = exports.FlexContext = /*#__PURE__*/_react().default.createContext({
-  horizontalGap: 0,
-  verticalGap: 0,
-  columns: 24
-});
+Object.defineProperty(exports, "FlexContext", {
+  enumerable: true,
+  get: function () {
+    return _Flex.FlexContext;
+  }
+});
+var _Flex = require("./Flex");