react-native-system-ui 0.0.7 → 1.0.0

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

@@ -74,17 +74,17 @@ const FieldClearButton = ({
   onPress
 }) => {
   if (!show) return null;
-  const webMouseDownProps = _reactNative().Platform.OS === 'web' ? {
-    onMouseDown: event => {
-      event.preventDefault?.();
-      event.stopPropagation?.();
+  const webMDProps = _reactNative().Platform.OS === 'web' ? {
+    onMouseDown: e => {
+      e.preventDefault?.();
+      e.stopPropagation?.();
     }
   } : undefined;
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     style: [tokens.layout.clearIcon, {
       paddingHorizontal: tokens.spacing.rightIconGap
     }]
-  }, webMouseDownProps, {
+  }, webMDProps, {
     onPressIn: onPressIn,
     onPressOut: onPressOut,
     onPress: onPress,
@@ -120,7 +120,7 @@ const FieldInput = ({
   editable,
   restInputProps
 }) => {
-  const inputStyles = [isTextarea ? tokens.layout.textarea : tokens.layout.input, {
+  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,
@@ -134,7 +134,7 @@ const FieldInput = ({
   }, inputStyle];
   return /*#__PURE__*/_react().default.createElement(_reactNative().TextInput, _extends({
     ref: inputRef,
-    style: inputStyles,
+    style: inputStyleArray,
     value: value,
     onChangeText: onChangeText,
     onFocus: onFocus,
@@ -170,7 +170,7 @@ const FieldControlRow = ({
     }]
   }, controlNode, clearNode), rightIconNode, suffixNode);
 };
-const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+const FieldImpl = (props, ref) => {
   const {
     tokensOverride,
     label,
@@ -242,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 = (0, _react().useMemo)(() => [{
+  const titleS = [{
     width: labelWidth,
     minWidth: labelWidth,
     maxWidth: labelWidth,
@@ -250,39 +250,51 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     marginRight: tokens.spacing.labelGap,
     flexShrink: 0,
     flexGrow: 0
-  }, 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]);
+  }, 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] = (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 clearHandledRef = (0, _react().useRef)(false);
   const inputRef = (0, _react().useRef)(null);
   const introId = (0, _react().useId)();
   const errorId = (0, _react().useId)();
   const describedBy = (0, _react().useMemo)(() => {
-    const ids = [(0, _validate.isRenderable)(errorMessage) ? errorId : null, (0, _validate.isRenderable)(resolvedDescription) ? introId : null].filter(Boolean);
+    const ids = [(0, _validate.isRenderable)(errorMessage) ? errorId : null, (0, _validate.isRenderable)(descriptionText) ? introId : null].filter(Boolean);
     return ids.length ? ids : undefined;
-  }, [errorId, errorMessage, introId, resolvedDescription]);
+  }, [errorId, errorMessage, introId, descriptionText]);
   const lineHeight = tokens.defaults.textareaLineHeight;
-  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 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 = (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 onChangeTextRef = (0, _react().useRef)(onChangeText);
+  onChangeTextRef.current = onChangeText;
+  const onOverlimitRef = (0, _react().useRef)(onOverlimit);
+  onOverlimitRef.current = onOverlimit;
+  const onFocusRef = (0, _react().useRef)(onFocus);
+  onFocusRef.current = onFocus;
+  const onBlurRef = (0, _react().useRef)(onBlur);
+  onBlurRef.current = onBlur;
+  const onPressInRef = (0, _react().useRef)(onPressIn);
+  onPressInRef.current = onPressIn;
+  const onClickInputRef = (0, _react().useRef)(onClickInput);
+  onClickInputRef.current = onClickInput;
+  const onClearRef = (0, _react().useRef)(onClear);
+  onClearRef.current = onClear;
   const formatValue = (0, _react().useCallback)((inputValue, trigger = 'onChange') => formatter && trigger === formatTrigger ? formatter(inputValue) : inputValue, [formatTrigger, formatter]);
-  const updateValue = (0, _react().useCallback)((next, trigger = 'onChange') => {
-    const formatted = formatValue(next, trigger);
-    if (!isControlled) {
-      setInternalValue(formatted);
-    }
-    onChangeText?.(formatted);
-  }, [formatValue, isControlled, onChangeText]);
+  const updateValue = (0, _react().useCallback)((newValue, trigger = 'onChange') => {
+    const formatted = formatValue(newValue, trigger);
+    if (!isControlled) setInternalValue(formatted);
+    onChangeTextRef.current?.(formatted);
+  }, [formatValue, isControlled]);
   (0, _react().useImperativeHandle)(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur(),
@@ -291,75 +303,68 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
       return inputRef.current;
     }
   }));
-  const finalTextAlign = controlAlign !== 'left' ? controlAlign : inputAlign;
+  const textAlign = controlAlign !== 'left' ? controlAlign : inputAlign;
   const showClear = clearable && !readOnly && (value ?? '') !== '' && (clearTrigger === 'always' || clearTrigger === 'focus' && (focused || pressingClear));
   const handleChangeText = (0, _react().useCallback)(text => {
-    let next = text ?? '';
+    let newValue = text ?? '';
     if (type === 'number' || type === 'digit') {
-      const allowDot = type === 'number';
-      next = (0, _string.formatNumberInput)(next, allowDot, allowDot);
+      const allowDecimal = type === 'number';
+      newValue = (0, _string.formatNumberInput)(newValue, allowDecimal, allowDecimal);
     }
-    if ((0, _validate.isFiniteNumber)(maxLength) && maxLength >= 0 && next.length > maxLength) {
-      onOverlimit?.(next);
-      next = next.slice(0, maxLength);
+    ;
+    if ((0, _validate.isFiniteNumber)(maxLength) && maxLength >= 0 && newValue.length > maxLength) {
+      onOverlimitRef.current?.(newValue);
+      newValue = newValue.slice(0, maxLength);
     }
-    updateValue(next, 'onChange');
-  }, [maxLength, onOverlimit, type, updateValue]);
-  const handleFocus = (0, _react().useCallback)(event => {
+    ;
+    updateValue(newValue, 'onChange');
+  }, [maxLength, type, updateValue]);
+  const handleFocus = (0, _react().useCallback)(e => {
     setFocused(true);
-    onFocus?.(event);
-    if (readOnly) {
-      inputRef.current?.blur();
-    }
-  }, [onFocus, readOnly]);
-  const handleBlur = (0, _react().useCallback)(event => {
-    if (_reactNative().Platform.OS !== 'web' && clearJustHandledRef.current) {
-      clearJustHandledRef.current = false;
+    onFocusRef.current?.(e);
+    if (readOnly) inputRef.current?.blur();
+  }, [readOnly]);
+  const handleBlur = (0, _react().useCallback)(e => {
+    if (_reactNative().Platform.OS !== 'web' && clearHandledRef.current) {
+      clearHandledRef.current = false;
       setFocused(false);
-      onBlur?.(event);
+      onBlurRef.current?.(e);
       return;
     }
+    ;
     updateValue(value ?? '', 'onBlur');
     setFocused(false);
-    onBlur?.(event);
-  }, [onBlur, updateValue, value]);
-  const handlePressIn = (0, _react().useCallback)(event => {
-    onPressIn?.(event);
-    onClickInput?.();
-  }, [onClickInput, onPressIn]);
-  const handleContentSizeChange = (0, _react().useCallback)(event => {
+    onBlurRef.current?.(e);
+  }, [updateValue, value]);
+  const handlePressIn = (0, _react().useCallback)(e => {
+    onPressInRef.current?.(e);
+    onClickInputRef.current?.();
+  }, []);
+  const handleContentSizeChange = (0, _react().useCallback)(e => {
     if (!isTextarea) return;
-    const contentHeight = event.nativeEvent.contentSize?.height ?? 0;
+    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);
-    }
+      if (maxHeight) nextHeight = Math.min(nextHeight, maxHeight);
+    } else if (minHeight) nextHeight = Math.max(minHeight, contentHeight);
     setTextareaHeight(nextHeight);
   }, [autoSize, isTextarea, maxHeight, minHeight]);
   const handleClear = (0, _react().useCallback)(() => {
-    if (_reactNative().Platform.OS !== 'web') {
-      clearJustHandledRef.current = true;
-    }
+    if (_reactNative().Platform.OS !== 'web') clearHandledRef.current = true;
     updateValue('');
     inputRef.current?.clear?.();
     inputRef.current?.focus?.();
-    onClear?.();
-  }, [onClear, updateValue]);
+    onClearRef.current?.();
+  }, [updateValue]);
   const handleClearPressIn = (0, _react().useCallback)(() => {
     setPressingClear(true);
-    if (_reactNative().Platform.OS !== 'web') {
-      handleClear();
-    }
+    if (_reactNative().Platform.OS !== 'web') handleClear();
   }, [handleClear]);
   const handleClearPressOut = (0, _react().useCallback)(() => {
     setPressingClear(false);
-    clearJustHandledRef.current = false;
+    clearHandledRef.current = false;
   }, []);
   const controlNode = (0, _validate.isRenderable)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.children, {
@@ -371,7 +376,7 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     isTextarea: isTextarea,
     disabled: disabled,
     error: error,
-    finalTextAlign: finalTextAlign,
+    finalTextAlign: textAlign,
     lineHeight: lineHeight,
     textareaHeight: textareaHeight,
     minHeight: minHeight,
@@ -383,27 +388,25 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     onPressIn: handlePressIn,
     rows: rows,
     keyboardType: restInputProps.keyboardType ?? mapKeyboardType(type),
-    placeholderTextColor: resolvedPlaceholderColor,
+    placeholderTextColor: placeholderColor,
     onContentSizeChange: handleContentSizeChange,
     describedBy: describedBy,
     secureTextEntry: type === 'password',
     editable: !disabled && !readOnly,
     restInputProps: restInputProps
   });
-  const contentWrapperStyle = (0, _react().useMemo)(() => [{
+  const contentWrapStyle = [{
     width: '100%',
     justifyContent: alignMap[controlAlign]
-  }, contentStyle], [contentStyle, 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);
-    }
+    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 tooltipNode = (0, _validate.isRenderable)(tooltip) ? (() => {
@@ -424,6 +427,7 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
       icon = customIcon ?? defaultIcon;
       dialogProps = rest;
     }
+    ;
     return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
       style: [tokens.layout.tooltip, {
         marginLeft: tokens.spacing.rightIconGap
@@ -433,8 +437,8 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     }, icon);
   })() : null;
   const labelNode = (0, _validate.isRenderable)(label) ? (() => {
-    const isPlain = (0, _validate.isText)(label);
-    const content = isPlain ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    const isPlainText = (0, _validate.isText)(label);
+    const content = isPlainText ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       style: [{
         color: disabled ? tokens.colors.disabled : tokens.colors.label,
         fontSize: tokens.typography.labelSize,
@@ -446,25 +450,22 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
       style: tokens.layout.labelRow
     }, content, tooltipNode);
   })() : null;
-  const wordLimitNode = showWordLimit && maxLength !== undefined && maxLength !== null ? (() => {
+  const wordLimitNode = showWordLimit && maxLength != null ? (() => {
     const currentCount = (value ?? '').length;
     const content = (0, _validate.isFunction)(showWordLimit) ? showWordLimit({
       currentCount,
       maxLength
     }) : `${currentCount}/${maxLength}`;
-    if (content === null || content === false) return null;
-    if ((0, _validate.isText)(content)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        style: [tokens.layout.wordLimit, {
-          color: tokens.colors.wordLimit,
-          fontSize: tokens.typography.wordLimitSize ?? 12,
-          textAlign: 'right',
-          alignSelf: 'flex-end',
-          marginTop: tokens.spacing.wordLimitMarginTop
-        }]
-      }, content);
-    }
-    return content;
+    if (!(0, _validate.isRenderable)(content)) return null;
+    return (0, _validate.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().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 = (0, _validate.isRenderable)(errorMessage) ? (0, _validate.isText)(errorMessage) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     nativeID: errorId,
@@ -483,7 +484,7 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     }],
     accessibilityLiveRegion: "polite"
   }, errorMessage) : null;
-  const introNode = (0, _validate.isRenderable)(resolvedDescription) ? (0, _validate.isText)(resolvedDescription) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  const introNode = (0, _validate.isRenderable)(descriptionText) ? (0, _validate.isText)(descriptionText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     nativeID: introId,
     style: [tokens.layout.message, {
       color: tokens.colors.intro,
@@ -491,22 +492,22 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
       textAlign: controlAlign,
       marginTop: tokens.spacing.introMarginTop
     }, introStyle]
-  }, resolvedDescription) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, descriptionText) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     nativeID: introId,
     style: {
       marginTop: tokens.spacing.introMarginTop
     }
-  }, resolvedDescription) : null;
+  }, descriptionText) : 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, {
+  const suffixNode = suffix ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.suffix, {
       paddingLeft: tokens.spacing.suffixGap
     }]
-  }, renderAffix(resolvedSuffix)) : null;
+  }, renderAffix(suffix)) : null;
   const leftIconNode = leftIcon ? /*#__PURE__*/_react().default.createElement(FieldSlot, {
     onPress: onClickLeftIcon,
     style: [tokens.layout.leftIcon, {
@@ -539,9 +540,9 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     isLink: isLink,
     arrowDirection: arrowDirection,
     extra: extra,
-    titleStyle: mergedTitleStyle,
+    titleStyle: titleS,
     style: style,
-    contentStyle: contentWrapperStyle,
+    contentStyle: contentWrapStyle,
     accessibilityState: error ? {
       invalid: true
     } : undefined,
@@ -557,6 +558,8 @@ const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, r
     rightIconNode: rightIconNode,
     suffixNode: suffixNode
   }), wordLimitNode, messageNode, introNode);
-});
-Field.displayName = 'Field';
+};
+const FieldForwardRef = /*#__PURE__*/_react().default.forwardRef(FieldImpl);
+FieldForwardRef.displayName = 'Field';
+const Field = exports.Field = /*#__PURE__*/_react().default.memo(FieldForwardRef);
 var _default = exports.default = Field;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FlexContext = exports.Flex = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -19,7 +19,7 @@ function _reactNative() {
   return data;
 }
 var _tokens = require("./tokens");
-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); }
 const FlexContext = exports.FlexContext = /*#__PURE__*/_react().default.createContext({
   horizontalGap: 0,
   verticalGap: 0,
@@ -39,7 +39,7 @@ const justifyMap = {
   around: 'space-around',
   between: 'space-between'
 };
-const Flex = props => {
+const FlexImpl = props => {
   const {
     tokensOverride,
     children,
@@ -57,29 +57,29 @@ const Flex = props => {
   const gutter = gutterProp ?? tokens.defaults.gutter;
   const align = alignProp ?? tokens.defaults.align;
   const justify = justifyProp ?? tokens.defaults.justify;
-  const columns = columnsProp ?? tokens.defaults.columns;
-  const resolvedColumns = Math.max(1, columns);
+  const resolvedColumns = Math.max(1, columnsProp ?? tokens.defaults.columns);
   const [hRaw, vRaw] = Array.isArray(gutter) ? gutter : [gutter, 0];
-  const horizontalGap = Math.max(0, hRaw ?? 0);
-  const verticalGap = Math.max(0, vRaw ?? 0);
-  const supportsGap = _reactNative().Platform.OS === 'web';
+  const hGap = Math.max(0, hRaw ?? 0),
+    vGap = Math.max(0, vRaw ?? 0);
+  const web = _reactNative().Platform.OS === 'web';
+  const contextValue = (0, _react().useMemo)(() => ({
+    horizontalGap: hGap,
+    verticalGap: vGap,
+    columns: resolvedColumns
+  }), [hGap, vGap, resolvedColumns]);
   return /*#__PURE__*/_react().default.createElement(FlexContext.Provider, {
-    value: {
-      horizontalGap,
-      verticalGap,
-      columns: resolvedColumns
-    }
+    value: contextValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.container, {
       flexDirection: direction,
       flexWrap: wrap,
       alignItems: alignMap[align],
       justifyContent: justifyMap[justify],
-      marginHorizontal: !supportsGap && horizontalGap ? -horizontalGap / 2 : undefined,
-      marginVertical: !supportsGap && verticalGap ? -verticalGap / 2 : undefined,
-      columnGap: supportsGap ? horizontalGap : undefined,
-      rowGap: supportsGap ? verticalGap : undefined
+      marginHorizontal: !web && hGap ? -hGap / 2 : undefined,
+      marginVertical: !web && vGap ? -vGap / 2 : undefined,
+      columnGap: web ? hGap : undefined,
+      rowGap: web ? vGap : undefined
     }, style]
   }, children));
 };
-exports.Flex = Flex;
+const Flex = exports.Flex = /*#__PURE__*/_react().default.memo(FlexImpl);

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

@@ -21,12 +21,12 @@ function _reactNative() {
 var _FlexContext = require("./FlexContext");
 var _utils = require("../../utils");
 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); }
-const parseFlex = value => {
-  if ((0, _utils.isNumber)(value)) return {
-    flex: value
+const parseFlex = v => {
+  if ((0, _utils.isNumber)(v)) return {
+    flex: v
   };
-  if (!value) return undefined;
-  const str = value.trim();
+  if (!v) return undefined;
+  const str = v.trim();
   if (!str) return undefined;
   if (str === 'auto') return {
     flexGrow: 1,
@@ -51,9 +51,7 @@ const parseFlex = value => {
       if (basisStr === 'auto') flexBasis = 'auto';else if (basisStr) {
         const pxMatch = basisStr.match(/^(-?\d+(?:\.\d+)?)px$/);
         const basisNum = pxMatch ? Number(pxMatch[1]) : Number(basisStr);
-        if ((0, _utils.isNumber)(basisNum)) {
-          flexBasis = basisNum;
-        }
+        if ((0, _utils.isNumber)(basisNum)) flexBasis = basisNum;
       }
       return {
         flexGrow: grow,
@@ -64,32 +62,33 @@ const parseFlex = value => {
   }
   return undefined;
 };
-const FlexItem = ({
+const FlexItemImpl = ({
   span,
   flex,
-  style,
-  children
+  style: s,
+  children: c
 }) => {
   const {
-    horizontalGap,
-    verticalGap,
-    columns
+    horizontalGap: hg,
+    verticalGap: vg,
+    columns: cols
   } = (0, _react().useContext)(_FlexContext.FlexContext);
-  const supportsGap = _reactNative().Platform.OS === 'web';
+  const sg = _reactNative().Platform.OS === 'web';
   if ((0, _utils.isNumber)(span) && span <= 0) return null;
-  const widthStyle = {};
+  const ws = {};
   if ((0, _utils.isNumber)(span)) {
-    const safeColumns = Math.max(1, columns);
-    const percent = Math.min(Math.max(span, 0), safeColumns) / safeColumns;
-    widthStyle.width = `${percent * 100}%`;
-    widthStyle.flexGrow = 0;
-    widthStyle.flexShrink = 0;
+    const sc = Math.max(1, cols);
+    const p = Math.min(Math.max(span, 0), sc) / sc;
+    ws.width = `${p * 100}%`;
+    ws.flexGrow = 0;
+    ws.flexShrink = 0;
   }
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [supportsGap ? null : {
-      paddingHorizontal: horizontalGap / 2,
-      paddingVertical: verticalGap / 2
-    }, widthStyle, parseFlex(flex), style]
-  }, children);
+    style: [sg ? null : {
+      paddingHorizontal: hg / 2,
+      paddingVertical: vg / 2
+    }, ws, parseFlex(flex), s]
+  }, c);
 };
-exports.FlexItem = FlexItem;
+const FlexItem = exports.FlexItem = /*#__PURE__*/_react().default.memo(FlexItemImpl);
+FlexItem.displayName = 'FlexItem';