react-native-system-ui 1.0.2 → 1.0.4

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

@@ -1,539 +1 @@
-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); }
-import React, { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Platform, Pressable, Text, TextInput, View } from 'react-native';
-import { Clear, QuestionO } from 'react-native-system-icon';
-import Cell from '../cell';
-import Dialog from '../dialog';
-import { formatNumberInput } from '../../utils/string';
-import { isDef, isFiniteNumber, isFunction, isObject, isRenderable, isText } from '../../utils/validate';
-import { useFieldTokens } from './tokens';
-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.createElement(Pressable, {
-    onPress: onPress,
-    accessibilityRole: accessibilityRole,
-    style: style
-  }, children) : /*#__PURE__*/React.createElement(View, {
-    style: style
-  }, children);
-};
-const FieldClearButton = ({
-  show,
-  tokens,
-  clearIcon,
-  onPressIn,
-  onPressOut,
-  onPress
-}) => {
-  if (!show) return null;
-  const webMDProps = Platform.OS === 'web' ? {
-    onMouseDown: e => {
-      e.preventDefault?.();
-      e.stopPropagation?.();
-    }
-  } : undefined;
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [tokens.layout.clearIcon, {
-      paddingHorizontal: tokens.spacing.rightIconGap
-    }]
-  }, webMDProps, {
-    onPressIn: onPressIn,
-    onPressOut: onPressOut,
-    onPress: onPress,
-    accessibilityRole: "button"
-  }), /*#__PURE__*/React.isValidElement(clearIcon) ? clearIcon : /*#__PURE__*/React.createElement(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 inputStyleArray = [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.createElement(TextInput, _extends({
-    ref: inputRef,
-    style: inputStyleArray,
-    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.createElement(View, {
-    style: tokens.layout.body
-  }, prefixNode, leftIconNode, /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.controlWrapper, {
-      minHeight: tokens.sizes.controlMinHeight
-    }]
-  }, controlNode, clearNode), rightIconNode, suffixNode);
-};
-const FieldImpl = (props, ref) => {
-  const {
-    tokensOverride,
-    label,
-    labelWidth: labelWidthProp,
-    labelAlign: labelAlignProp,
-    inputAlign: inputAlignProp,
-    controlAlign: controlAlignProp,
-    required = false,
-    colon = false,
-    intro,
-    description,
-    tooltip,
-    error = false,
-    errorMessage,
-    errorMessageAlign = 'left',
-    disabled = false,
-    readOnly = false,
-    clearable = false,
-    clearTrigger: clearTriggerProp,
-    clearIcon,
-    leftIcon,
-    rightIcon,
-    prefix,
-    suffix: suffixProp,
-    button,
-    extra,
-    value: valueProp,
-    defaultValue = '',
-    type = 'text',
-    rows: rowsProp,
-    autoSize = false,
-    formatter,
-    formatTrigger: formatTriggerProp,
-    showWordLimit = false,
-    onOverlimit,
-    onClear,
-    onClick,
-    onClickInput,
-    onClickLeftIcon,
-    onClickRightIcon,
-    border,
-    center,
-    clickable,
-    isLink,
-    arrowDirection,
-    size,
-    titleStyle,
-    contentStyle,
-    inputStyle,
-    labelStyle,
-    introStyle,
-    errorMessageStyle,
-    style,
-    androidRipple,
-    children,
-    placeholderTextColor,
-    onFocus,
-    onBlur,
-    onPressIn,
-    onChangeText,
-    maxLength,
-    ...restInputProps
-  } = props;
-  const tokens = useFieldTokens(tokensOverride);
-  const labelWidth = labelWidthProp ?? tokens.defaults.labelWidth;
-  const labelAlign = labelAlignProp ?? tokens.defaults.labelAlign;
-  const inputAlign = inputAlignProp ?? tokens.defaults.inputAlign;
-  const controlAlign = controlAlignProp ?? tokens.defaults.controlAlign;
-  const clearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
-  const rows = rowsProp ?? tokens.defaults.rows;
-  const formatTrigger = formatTriggerProp ?? tokens.defaults.formatTrigger;
-  const titleS = [{
-    width: labelWidth,
-    minWidth: labelWidth,
-    maxWidth: labelWidth,
-    flexBasis: labelWidth,
-    marginRight: tokens.spacing.labelGap,
-    flexShrink: 0,
-    flexGrow: 0
-  }, titleStyle];
-  const suffix = suffixProp ?? button;
-  const descriptionText = intro ?? description;
-  const placeholderColor = placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder);
-  const isTextarea = type === 'textarea';
-  const isControlled = valueProp !== undefined;
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const value = isControlled ? valueProp ?? '' : internalValue;
-  const [focused, setFocused] = useState(false);
-  const [pressingClear, setPressingClear] = useState(false);
-  const clearHandledRef = useRef(false);
-  const inputRef = useRef(null);
-  const introId = useId();
-  const errorId = useId();
-  const describedBy = useMemo(() => {
-    const ids = [isRenderable(errorMessage) ? errorId : null, isRenderable(descriptionText) ? introId : null].filter(Boolean);
-    return ids.length ? ids : undefined;
-  }, [errorId, errorMessage, introId, descriptionText]);
-  const lineHeight = tokens.defaults.textareaLineHeight;
-  const autoSizeConfig = autoSize && isObject(autoSize) ? autoSize : undefined;
-  const minRows = !isTextarea ? 1 : autoSizeConfig && isDef(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows);
-  const maxRows = !isTextarea ? undefined : autoSizeConfig && isDef(autoSizeConfig.maxRows) ? Math.max(1, autoSizeConfig.maxRows) : undefined;
-  const minHeight = useMemo(() => isTextarea ? Math.max(tokens.sizes.textareaMinHeight, minRows * lineHeight) : undefined, [isTextarea, lineHeight, minRows, tokens.sizes.textareaMinHeight]);
-  const maxHeight = useMemo(() => isTextarea && maxRows ? Math.max(tokens.sizes.textareaMinHeight, maxRows * lineHeight) : undefined, [isTextarea, lineHeight, maxRows, tokens.sizes.textareaMinHeight]);
-  const [textareaHeight, setTextareaHeight] = useState(minHeight);
-  const onChangeTextRef = useRef(onChangeText);
-  onChangeTextRef.current = onChangeText;
-  const onOverlimitRef = useRef(onOverlimit);
-  onOverlimitRef.current = onOverlimit;
-  const onFocusRef = useRef(onFocus);
-  onFocusRef.current = onFocus;
-  const onBlurRef = useRef(onBlur);
-  onBlurRef.current = onBlur;
-  const onPressInRef = useRef(onPressIn);
-  onPressInRef.current = onPressIn;
-  const onClickInputRef = useRef(onClickInput);
-  onClickInputRef.current = onClickInput;
-  const onClearRef = useRef(onClear);
-  onClearRef.current = onClear;
-  const formatValue = useCallback((inputValue, trigger = 'onChange') => formatter && trigger === formatTrigger ? formatter(inputValue) : inputValue, [formatTrigger, formatter]);
-  const updateValue = useCallback((newValue, trigger = 'onChange') => {
-    const formatted = formatValue(newValue, trigger);
-    if (!isControlled) setInternalValue(formatted);
-    onChangeTextRef.current?.(formatted);
-  }, [formatValue, isControlled]);
-  useImperativeHandle(ref, () => ({
-    focus: () => inputRef.current?.focus(),
-    blur: () => inputRef.current?.blur(),
-    clear: () => updateValue(''),
-    get nativeElement() {
-      return inputRef.current;
-    }
-  }));
-  const textAlign = controlAlign !== 'left' ? controlAlign : inputAlign;
-  const showClear = clearable && !readOnly && (value ?? '') !== '' && (clearTrigger === 'always' || clearTrigger === 'focus' && (focused || pressingClear));
-  const handleChangeText = useCallback(text => {
-    let newValue = text ?? '';
-    if (type === 'number' || type === 'digit') {
-      const allowDecimal = type === 'number';
-      newValue = formatNumberInput(newValue, allowDecimal, allowDecimal);
-    }
-    ;
-    if (isFiniteNumber(maxLength) && maxLength >= 0 && newValue.length > maxLength) {
-      onOverlimitRef.current?.(newValue);
-      newValue = newValue.slice(0, maxLength);
-    }
-    ;
-    updateValue(newValue, 'onChange');
-  }, [maxLength, type, updateValue]);
-  const handleFocus = useCallback(e => {
-    setFocused(true);
-    onFocusRef.current?.(e);
-    if (readOnly) inputRef.current?.blur();
-  }, [readOnly]);
-  const handleBlur = useCallback(e => {
-    if (Platform.OS !== 'web' && clearHandledRef.current) {
-      clearHandledRef.current = false;
-      setFocused(false);
-      onBlurRef.current?.(e);
-      return;
-    }
-    ;
-    updateValue(value ?? '', 'onBlur');
-    setFocused(false);
-    onBlurRef.current?.(e);
-  }, [updateValue, value]);
-  const handlePressIn = useCallback(e => {
-    onPressInRef.current?.(e);
-    onClickInputRef.current?.();
-  }, []);
-  const handleContentSizeChange = useCallback(e => {
-    if (!isTextarea) return;
-    const contentHeight = e.nativeEvent.contentSize?.height ?? 0;
-    if (!contentHeight) return;
-    let nextHeight = contentHeight;
-    if (autoSize) {
-      nextHeight = Math.max(minHeight ?? contentHeight, contentHeight);
-      if (maxHeight) nextHeight = Math.min(nextHeight, maxHeight);
-    } else if (minHeight) nextHeight = Math.max(minHeight, contentHeight);
-    setTextareaHeight(nextHeight);
-  }, [autoSize, isTextarea, maxHeight, minHeight]);
-  const handleClear = useCallback(() => {
-    if (Platform.OS !== 'web') clearHandledRef.current = true;
-    updateValue('');
-    inputRef.current?.clear?.();
-    inputRef.current?.focus?.();
-    onClearRef.current?.();
-  }, [updateValue]);
-  const handleClearPressIn = useCallback(() => {
-    setPressingClear(true);
-    if (Platform.OS !== 'web') handleClear();
-  }, [handleClear]);
-  const handleClearPressOut = useCallback(() => {
-    setPressingClear(false);
-    clearHandledRef.current = false;
-  }, []);
-  const controlNode = isRenderable(children) ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.children, {
-      minHeight: tokens.sizes.controlMinHeight
-    }]
-  }, children) : /*#__PURE__*/React.createElement(FieldInput, {
-    inputRef: inputRef,
-    tokens: tokens,
-    isTextarea: isTextarea,
-    disabled: disabled,
-    error: error,
-    finalTextAlign: textAlign,
-    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: placeholderColor,
-    onContentSizeChange: handleContentSizeChange,
-    describedBy: describedBy,
-    secureTextEntry: type === 'password',
-    editable: !disabled && !readOnly,
-    restInputProps: restInputProps
-  });
-  const contentWrapStyle = [{
-    width: '100%',
-    justifyContent: alignMap[controlAlign]
-  }, contentStyle];
-  const renderAffix = node => {
-    if (isText(node)) return /*#__PURE__*/React.createElement(Text, {
-      style: [tokens.layout.affixText, {
-        color: tokens.colors.input,
-        fontSize: tokens.typography.inputSize
-      }],
-      numberOfLines: 1
-    }, node);
-    return node;
-  };
-  const tooltipNode = isRenderable(tooltip) ? (() => {
-    const defaultIcon = /*#__PURE__*/React.createElement(QuestionO, {
-      size: tokens.sizes.icon,
-      fill: tokens.colors.tooltip,
-      color: tokens.colors.tooltip
-    });
-    let icon = defaultIcon;
-    let dialogProps = {
-      message: tooltip
-    };
-    if (! /*#__PURE__*/React.isValidElement(tooltip) && !isText(tooltip)) {
-      const {
-        icon: customIcon,
-        ...rest
-      } = tooltip;
-      icon = customIcon ?? defaultIcon;
-      dialogProps = rest;
-    }
-    ;
-    return /*#__PURE__*/React.createElement(Pressable, {
-      style: [tokens.layout.tooltip, {
-        marginLeft: tokens.spacing.rightIconGap
-      }],
-      onPress: () => Dialog.show(dialogProps),
-      accessibilityRole: "button"
-    }, icon);
-  })() : null;
-  const labelNode = isRenderable(label) ? (() => {
-    const isPlainText = isText(label);
-    const content = isPlainText ? /*#__PURE__*/React.createElement(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.createElement(View, {
-      style: tokens.layout.labelRow
-    }, content, tooltipNode);
-  })() : null;
-  const wordLimitNode = showWordLimit && maxLength != null ? (() => {
-    const currentCount = (value ?? '').length;
-    const content = isFunction(showWordLimit) ? showWordLimit({
-      currentCount,
-      maxLength
-    }) : `${currentCount}/${maxLength}`;
-    if (!isRenderable(content)) return null;
-    return isText(content) ? /*#__PURE__*/React.createElement(Text, {
-      style: [tokens.layout.wordLimit, {
-        color: tokens.colors.wordLimit,
-        fontSize: tokens.typography.wordLimitSize ?? 12,
-        textAlign: 'right',
-        alignSelf: 'flex-end',
-        marginTop: tokens.spacing.wordLimitMarginTop
-      }]
-    }, content) : content;
-  })() : null;
-  const messageNode = isRenderable(errorMessage) ? isText(errorMessage) ? /*#__PURE__*/React.createElement(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.createElement(View, {
-    nativeID: errorId,
-    style: [tokens.layout.message, {
-      alignSelf: alignMap[errorMessageAlign],
-      marginTop: tokens.spacing.messageMarginTop
-    }],
-    accessibilityLiveRegion: "polite"
-  }, errorMessage) : null;
-  const introNode = isRenderable(descriptionText) ? isText(descriptionText) ? /*#__PURE__*/React.createElement(Text, {
-    nativeID: introId,
-    style: [tokens.layout.message, {
-      color: tokens.colors.intro,
-      fontSize: tokens.typography.introSize,
-      textAlign: controlAlign,
-      marginTop: tokens.spacing.introMarginTop
-    }, introStyle]
-  }, descriptionText) : /*#__PURE__*/React.createElement(View, {
-    nativeID: introId,
-    style: {
-      marginTop: tokens.spacing.introMarginTop
-    }
-  }, descriptionText) : null;
-  const prefixNode = prefix ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.prefix, {
-      paddingRight: tokens.spacing.prefixGap
-    }]
-  }, renderAffix(prefix)) : null;
-  const suffixNode = suffix ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.suffix, {
-      paddingLeft: tokens.spacing.suffixGap
-    }]
-  }, renderAffix(suffix)) : null;
-  const leftIconNode = leftIcon ? /*#__PURE__*/React.createElement(FieldSlot, {
-    onPress: onClickLeftIcon,
-    style: [tokens.layout.leftIcon, {
-      marginRight: tokens.spacing.leftIconGap,
-      minWidth: tokens.sizes.icon
-    }]
-  }, leftIcon) : null;
-  const rightIconNode = rightIcon ? /*#__PURE__*/React.createElement(FieldSlot, {
-    onPress: onClickRightIcon,
-    style: [tokens.layout.rightIcon, {
-      paddingHorizontal: tokens.spacing.rightIconGap
-    }]
-  }, rightIcon) : null;
-  const clearNode = showClear ? /*#__PURE__*/React.createElement(FieldClearButton, {
-    show: showClear,
-    tokens: tokens,
-    clearIcon: clearIcon,
-    onPressIn: handleClearPressIn,
-    onPressOut: Platform.OS === 'web' ? handleClearPressOut : undefined,
-    onPress: Platform.OS === 'web' ? handleClear : undefined
-  }) : null;
-  return /*#__PURE__*/React.createElement(Cell, {
-    title: labelNode,
-    icon: undefined,
-    required: required,
-    border: border,
-    center: center,
-    size: size,
-    clickable: clickable,
-    isLink: isLink,
-    arrowDirection: arrowDirection,
-    extra: extra,
-    titleStyle: titleS,
-    style: style,
-    contentStyle: contentWrapStyle,
-    accessibilityState: error ? {
-      invalid: true
-    } : undefined,
-    accessibilityLabel: isText(label) ? String(label) : undefined,
-    onPress: onClick,
-    android_ripple: androidRipple
-  }, /*#__PURE__*/React.createElement(FieldControlRow, {
-    tokens: tokens,
-    prefixNode: prefixNode,
-    leftIconNode: leftIconNode,
-    controlNode: controlNode,
-    clearNode: clearNode,
-    rightIconNode: rightIconNode,
-    suffixNode: suffixNode
-  }), wordLimitNode, messageNode, introNode);
-};
-const FieldForwardRef = /*#__PURE__*/React.forwardRef(FieldImpl);
-FieldForwardRef.displayName = 'Field';
-export const Field = /*#__PURE__*/React.memo(FieldForwardRef);
-export default Field;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}import React,{useCallback,useId,useImperativeHandle,useMemo,useRef,useState}from"react";import{Platform,Pressable,Text,TextInput,View}from"react-native";import{Clear,QuestionO}from"react-native-system-icon";import Cell from"../cell";import Dialog from"../dialog";import{formatNumberInput}from"../../utils/string";import{isDef,isFiniteNumber,isFunction,isObject,isRenderable,isText}from"../../utils/validate";import{useFieldTokens}from"./tokens";const alignMap={left:"flex-start",center:"center",right:"flex-end"},mapKeyboardType=e=>{switch(e){case"number":return"decimal-pad";case"digit":return"number-pad";case"tel":return"phone-pad";default:return}},FieldSlot=({onPress:e,style:t,children:n,accessibilityRole:r="button"})=>n?e?React.createElement(Pressable,{onPress:e,accessibilityRole:r,style:t},n):React.createElement(View,{style:t},n):null,FieldClearButton=({show:e,tokens:t,clearIcon:n,onPressIn:r,onPressOut:l,onPress:i})=>{if(!e)return null;const o="web"===Platform.OS?{onMouseDown:e=>{e.preventDefault?.(),e.stopPropagation?.()}}:void 0;return React.createElement(Pressable,_extends({style:[t.layout.clearIcon,{paddingHorizontal:t.spacing.rightIconGap}]},o,{onPressIn:r,onPressOut:l,onPress:i,accessibilityRole:"button"}),React.isValidElement(n)?n:React.createElement(Clear,{size:t.sizes.clearIcon,fill:t.colors.clear,color:t.colors.clear}))},FieldInput=({inputRef:e,tokens:t,isTextarea:n,disabled:r,error:l,finalTextAlign:i,lineHeight:o,textareaHeight:a,minHeight:s,inputStyle:c,value:u,onChangeText:d,onFocus:g,onBlur:p,onPressIn:m,rows:f,placeholderTextColor:y,keyboardType:b,onContentSizeChange:h,describedBy:x,secureTextEntry:R,editable:T,restInputProps:w})=>{const I=[n?t.layout.textarea:t.layout.input,{color:r?t.colors.disabled:l?t.colors.error:t.colors.input,fontSize:t.typography.inputSize,textAlign:i,...n?{lineHeight:o,height:a,minHeight:s}:{minHeight:t.sizes.controlMinHeight}},c];return React.createElement(TextInput,_extends({ref:e,style:I,value:u,onChangeText:d,onFocus:g,onBlur:p,onPressIn:m,editable:T,secureTextEntry:R,multiline:n,numberOfLines:n?f:void 0,keyboardType:b,placeholderTextColor:y,onContentSizeChange:n?h:void 0},x?{accessibilityDescribedBy:x}:null,{clearButtonMode:"never"},w))},FieldControlRow=({tokens:e,prefixNode:t,leftIconNode:n,controlNode:r,clearNode:l,rightIconNode:i,suffixNode:o})=>React.createElement(View,{style:e.layout.body},t,n,React.createElement(View,{style:[e.layout.controlWrapper,{minHeight:e.sizes.controlMinHeight}]},r,l),i,o),FieldImpl=(e,t)=>{const{tokensOverride:n,label:r,labelWidth:l,labelAlign:i,inputAlign:o,controlAlign:a,required:s=!1,colon:c=!1,intro:u,description:d,tooltip:g,error:p=!1,errorMessage:m,errorMessageAlign:f="left",disabled:y=!1,readOnly:b=!1,clearable:h=!1,clearTrigger:x,clearIcon:R,leftIcon:T,rightIcon:w,prefix:I,suffix:S,button:C,extra:v,value:k,defaultValue:P="",type:z="text",rows:E,autoSize:M=!1,formatter:F,formatTrigger:H,showWordLimit:O=!1,onOverlimit:L,onClear:N,onClick:A,onClickInput:D,onClickLeftIcon:B,onClickRightIcon:V,border:G,center:W,clickable:_,isLink:j,arrowDirection:q,size:K,titleStyle:Q,contentStyle:$,inputStyle:J,labelStyle:U,introStyle:X,errorMessageStyle:Y,style:Z,androidRipple:ee,children:te,placeholderTextColor:ne,onFocus:re,onBlur:le,onPressIn:ie,onChangeText:oe,maxLength:ae,...se}=e,ce=useFieldTokens(n),ue=l??ce.defaults.labelWidth,de=i??ce.defaults.labelAlign,ge=o??ce.defaults.inputAlign,pe=a??ce.defaults.controlAlign,me=x??ce.defaults.clearTrigger,fe=E??ce.defaults.rows,ye=H??ce.defaults.formatTrigger,be=[{width:ue,minWidth:ue,maxWidth:ue,flexBasis:ue,marginRight:ce.spacing.labelGap,flexShrink:0,flexGrow:0},Q],he=S??C,xe=u??d,Re=ne??(y?ce.colors.disabled:ce.colors.placeholder),Te="textarea"===z,we=void 0!==k,[Ie,Se]=useState(P),Ce=we?k??"":Ie,[ve,ke]=useState(!1),[Pe,ze]=useState(!1),Ee=useRef(!1),Me=useRef(null),Fe=useId(),He=useId(),Oe=useMemo(()=>{const e=[isRenderable(m)?He:null,isRenderable(xe)?Fe:null].filter(Boolean);return e.length?e:void 0},[He,m,Fe,xe]),Le=ce.defaults.textareaLineHeight,Ne=M&&isObject(M)?M:void 0,Ae=Te?Ne&&isDef(Ne.minRows)?Math.max(1,Ne.minRows):Math.max(1,fe):1,De=Te&&Ne&&isDef(Ne.maxRows)?Math.max(1,Ne.maxRows):void 0,Be=useMemo(()=>Te?Math.max(ce.sizes.textareaMinHeight,Ae*Le):void 0,[Te,Le,Ae,ce.sizes.textareaMinHeight]),Ve=useMemo(()=>Te&&De?Math.max(ce.sizes.textareaMinHeight,De*Le):void 0,[Te,Le,De,ce.sizes.textareaMinHeight]),[Ge,We]=useState(Be),_e=useRef(oe);_e.current=oe;const je=useRef(L);je.current=L;const qe=useRef(re);qe.current=re;const Ke=useRef(le);Ke.current=le;const Qe=useRef(ie);Qe.current=ie;const $e=useRef(D);$e.current=D;const Je=useRef(N);Je.current=N;const Ue=useCallback((e,t="onChange")=>F&&t===ye?F(e):e,[ye,F]),Xe=useCallback((e,t="onChange")=>{const n=Ue(e,t);we||Se(n),_e.current?.(n)},[Ue,we]);useImperativeHandle(t,()=>({focus:()=>Me.current?.focus(),blur:()=>Me.current?.blur(),clear:()=>Xe(""),get nativeElement(){return Me.current}}));const Ye="left"!==pe?pe:ge,Ze=h&&!b&&""!==(Ce??"")&&("always"===me||"focus"===me&&(ve||Pe)),et=useCallback(e=>{let t=e??"";if("number"===z||"digit"===z){const e="number"===z;t=formatNumberInput(t,e,e)}isFiniteNumber(ae)&&ae>=0&&t.length>ae&&(je.current?.(t),t=t.slice(0,ae)),Xe(t,"onChange")},[ae,z,Xe]),tt=useCallback(e=>{ke(!0),qe.current?.(e),b&&Me.current?.blur()},[b]),nt=useCallback(e=>{if("web"!==Platform.OS&&Ee.current)return Ee.current=!1,ke(!1),void Ke.current?.(e);Xe(Ce??"","onBlur"),ke(!1),Ke.current?.(e)},[Xe,Ce]),rt=useCallback(e=>{Qe.current?.(e),$e.current?.()},[]),lt=useCallback(e=>{if(!Te)return;const t=e.nativeEvent.contentSize?.height??0;if(!t)return;let n=t;M?(n=Math.max(Be??t,t),Ve&&(n=Math.min(n,Ve))):Be&&(n=Math.max(Be,t)),We(n)},[M,Te,Ve,Be]),it=useCallback(()=>{"web"!==Platform.OS&&(Ee.current=!0),Xe(""),Me.current?.clear?.(),Me.current?.focus?.(),Je.current?.()},[Xe]),ot=useCallback(()=>{ze(!0),"web"!==Platform.OS&&it()},[it]),at=useCallback(()=>{ze(!1),Ee.current=!1},[]),st=isRenderable(te)?React.createElement(View,{style:[ce.layout.children,{minHeight:ce.sizes.controlMinHeight}]},te):React.createElement(FieldInput,{inputRef:Me,tokens:ce,isTextarea:Te,disabled:y,error:p,finalTextAlign:Ye,lineHeight:Le,textareaHeight:Ge,minHeight:Be,inputStyle:J,value:Ce??"",onChangeText:et,onFocus:tt,onBlur:nt,onPressIn:rt,rows:fe,keyboardType:se.keyboardType??mapKeyboardType(z),placeholderTextColor:Re,onContentSizeChange:lt,describedBy:Oe,secureTextEntry:"password"===z,editable:!y&&!b,restInputProps:se}),ct=[{width:"100%",justifyContent:alignMap[pe]},$],ut=e=>isText(e)?React.createElement(Text,{style:[ce.layout.affixText,{color:ce.colors.input,fontSize:ce.typography.inputSize}],numberOfLines:1},e):e,dt=isRenderable(g)?(()=>{const e=React.createElement(QuestionO,{size:ce.sizes.icon,fill:ce.colors.tooltip,color:ce.colors.tooltip});let t=e,n={message:g};if(!React.isValidElement(g)&&!isText(g)){const{icon:r,...l}=g;t=r??e,n=l}return React.createElement(Pressable,{style:[ce.layout.tooltip,{marginLeft:ce.spacing.rightIconGap}],onPress:()=>Dialog.show(n),accessibilityRole:"button"},t)})():null,gt=isRenderable(r)?(()=>{const e=isText(r)?React.createElement(Text,{style:[{color:y?ce.colors.disabled:ce.colors.label,fontSize:ce.typography.labelSize,textAlign:de},U],numberOfLines:1},r,c?":":""):r;return React.createElement(View,{style:ce.layout.labelRow},e,dt)})():null,pt=O&&null!=ae?(()=>{const e=(Ce??"").length,t=isFunction(O)?O({currentCount:e,maxLength:ae}):`${e}/${ae}`;return isRenderable(t)?isText(t)?React.createElement(Text,{style:[ce.layout.wordLimit,{color:ce.colors.wordLimit,fontSize:ce.typography.wordLimitSize??12,textAlign:"right",alignSelf:"flex-end",marginTop:ce.spacing.wordLimitMarginTop}]},t):t:null})():null,mt=isRenderable(m)?isText(m)?React.createElement(Text,{nativeID:He,style:[ce.layout.message,{color:ce.colors.error,fontSize:ce.typography.messageSize,textAlign:f,marginTop:ce.spacing.messageMarginTop},Y],accessibilityLiveRegion:"polite"},m):React.createElement(View,{nativeID:He,style:[ce.layout.message,{alignSelf:alignMap[f],marginTop:ce.spacing.messageMarginTop}],accessibilityLiveRegion:"polite"},m):null,ft=isRenderable(xe)?isText(xe)?React.createElement(Text,{nativeID:Fe,style:[ce.layout.message,{color:ce.colors.intro,fontSize:ce.typography.introSize,textAlign:pe,marginTop:ce.spacing.introMarginTop},X]},xe):React.createElement(View,{nativeID:Fe,style:{marginTop:ce.spacing.introMarginTop}},xe):null,yt=I?React.createElement(View,{style:[ce.layout.prefix,{paddingRight:ce.spacing.prefixGap}]},ut(I)):null,bt=he?React.createElement(View,{style:[ce.layout.suffix,{paddingLeft:ce.spacing.suffixGap}]},ut(he)):null,ht=T?React.createElement(FieldSlot,{onPress:B,style:[ce.layout.leftIcon,{marginRight:ce.spacing.leftIconGap,minWidth:ce.sizes.icon}]},T):null,xt=w?React.createElement(FieldSlot,{onPress:V,style:[ce.layout.rightIcon,{paddingHorizontal:ce.spacing.rightIconGap}]},w):null,Rt=Ze?React.createElement(FieldClearButton,{show:Ze,tokens:ce,clearIcon:R,onPressIn:ot,onPressOut:"web"===Platform.OS?at:void 0,onPress:"web"===Platform.OS?it:void 0}):null;return React.createElement(Cell,{title:gt,icon:void 0,required:s,border:G,center:W,size:K,clickable:_,isLink:j,arrowDirection:q,extra:v,titleStyle:be,style:Z,contentStyle:ct,accessibilityState:p?{invalid:!0}:void 0,accessibilityLabel:isText(r)?String(r):void 0,onPress:A,android_ripple:ee},React.createElement(FieldControlRow,{tokens:ce,prefixNode:yt,leftIconNode:ht,controlNode:st,clearNode:Rt,rightIconNode:xt,suffixNode:bt}),pt,mt,ft)},FieldForwardRef=React.forwardRef(FieldImpl);FieldForwardRef.displayName="Field";export const Field=React.memo(FieldForwardRef);export default Field;

package/dist/es/components/field/index.js

@@ -1,6 +1 @@
-import Field from './Field';
-import { CellGroup as FieldGroup } from '../cell';
-export { FieldGroup };
-export { useFieldTokens } from './tokens';
-export default Field;
-export { Field };
+import Field from"./Field";import{CellGroup as FieldGroup}from"../cell";export{FieldGroup};export{useFieldTokens}from"./tokens";export default Field;export{Field};