react-native-system-ui 0.0.6 → 1.0.0

package/dist/cjs/components/overlay/Overlay.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Overlay = exports.ExitAnimationContext = void 0;
+exports.default = exports.Overlay = void 0;
 function _react() {
   const data = _interopRequireDefault(require("react"));
   _react = function () {
@@ -32,65 +32,50 @@ function _interactions() {
   };
   return data;
 }
+var _tokens = require("./tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ExitAnimationContext = exports.ExitAnimationContext = /*#__PURE__*/_react().default.createContext({
-  exited: true,
-  setExited: _exited => {}
-});
-const Overlay = exports.Overlay = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+const IS_WEB = _reactNative().Platform.OS === 'web';
+const OverlayImpl = (props, ref) => {
   const {
     children,
-    isOpen,
-    visible,
-    useRNModal = false,
-    useRNModalOnAndroid = false,
-    isKeyboardDismissable = true,
-    animationPreset = 'fade',
+    isOpen: isOpenProp,
+    visible: visibleProp,
+    useRNModal: useRNModalProp,
+    useRNModalOnAndroid: useRNModalOnAndroidProp = false,
+    isKeyboardDismissable: isKeyboardDismissableProp = true,
+    animationPreset: animationPresetProp = 'fade',
     onRequestClose,
     style
   } = props;
-  const resolvedOpen = isOpen ?? visible ?? false;
-  const [exited, setExited] = _react().default.useState(!resolvedOpen);
+  const tokens = (0, _tokens.useOverlayTokens)();
+  const shouldUseModal = useRNModalProp ?? !IS_WEB;
+  const webOverlayStyle = IS_WEB ? {
+    zIndex: tokens.layer.zIndex,
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  } : undefined;
+  const resolvedOpen = isOpenProp ?? visibleProp ?? false;
   (0, _interactions().useKeyboardDismissable)({
-    enabled: _reactNative().Platform.OS !== 'web' && resolvedOpen && isKeyboardDismissable,
+    enabled: !IS_WEB && resolvedOpen && isKeyboardDismissableProp,
     callback: onRequestClose ?? (() => {})
   });
-  let styleObj = {};
-  if (_reactNative().Platform.OS === 'web') {
-    styleObj.zIndex = 9999;
-  }
-  if (animationPreset === 'slide') {
-    styleObj.overflow = 'hidden';
-    styleObj.display = 'flex';
-  } else {
-    styleObj.display = exited && !resolvedOpen ? 'none' : 'flex';
-  }
-  if (!resolvedOpen && exited) {
-    return null;
-  }
-  if (useRNModal || useRNModalOnAndroid && _reactNative().Platform.OS === 'android') {
-    return /*#__PURE__*/_react().default.createElement(ExitAnimationContext.Provider, {
-      value: {
-        exited,
-        setExited
-      }
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().Modal, {
-      statusBarTranslucent: true,
-      transparent: true,
-      visible: resolvedOpen,
-      onRequestClose: onRequestClose,
-      animationType: animationPreset,
-      ref: ref
-    }, children));
-  }
+  if (!resolvedOpen) return null;
+  if (shouldUseModal || useRNModalOnAndroidProp && _reactNative().Platform.OS === 'android') return /*#__PURE__*/_react().default.createElement(_reactNative().Modal, {
+    statusBarTranslucent: true,
+    transparent: true,
+    visible: resolvedOpen,
+    onRequestClose: onRequestClose,
+    animationType: animationPresetProp,
+    ref: ref
+  }, children);
   return /*#__PURE__*/_react().default.createElement(_overlays().OverlayContainer, {
-    style: [style, styleObj]
-  }, /*#__PURE__*/_react().default.createElement(ExitAnimationContext.Provider, {
-    value: {
-      exited,
-      setExited
-    }
-  }, children));
-});
-Overlay.displayName = 'Overlay';
+    style: [style, webOverlayStyle]
+  }, children);
+};
+const OverlayForwardRef = /*#__PURE__*/_react().default.forwardRef(OverlayImpl);
+OverlayForwardRef.displayName = 'Overlay';
+const Overlay = exports.Overlay = /*#__PURE__*/_react().default.memo(OverlayForwardRef);
 var _default = exports.default = Overlay;

package/dist/cjs/components/overlay/tokens.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useOverlayTokens = void 0;
 var _designSystem = require("../../design-system");
-const createOverlayTokens = _foundations => {
-  return {};
-};
+const createOverlayTokens = _foundations => ({
+  layer: {
+    zIndex: 9999
+  }
+});
 const useOverlayTokens = exports.useOverlayTokens = (0, _designSystem.createComponentTokensHook)('overlay', createOverlayTokens);

package/dist/cjs/components/password-input/PasswordInput.js

@@ -22,17 +22,18 @@ var _hooks = require("../../hooks");
 var _number = require("../../utils/number");
 var _validate = require("../../utils/validate");
 var _tokens = require("./tokens");
+var _hairline = require("../../utils/hairline");
 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 HIDDEN_INPUT_PROPS = {
+const HIP = {
   caretHidden: true,
   autoCorrect: false,
   spellCheck: false,
   importantForAutofill: 'no',
   autoComplete: 'off'
 };
-const sanitizeNumber = value => value.replace(/[^0-9]/g, '');
-const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+const stripNonNumeric = v => v.replace(/[^0-9]/g, '');
+const PasswordInputImpl = (props, ref) => {
   const {
     value,
     defaultValue,
@@ -60,7 +61,7 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     onBlur,
     ...rest
   } = props;
-  const lengthSafe = Math.max(1, Math.floor((0, _number.parseNumberLike)(length, 6) ?? 6));
+  const lengthValue = Math.max(1, Math.floor((0, _number.parseNumberLike)(length, 6) ?? 6));
   const tokens = (0, _tokens.usePasswordInputTokens)(tokensOverride);
   const {
     colors,
@@ -70,32 +71,36 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     opacity,
     spacing
   } = tokens;
-  const inputRef = (0, _react().useRef)(null);
-  const [cursorVisible, setCursorVisible] = (0, _react().useState)(true);
-  const blinkTimer = (0, _react().useRef)(null);
-  const [focused, setFocused] = (0, _react().useState)(autoFocus);
+  const inputRef = (0, _react().useRef)(null),
+    [cursorVisible, setCursorVisible] = (0, _react().useState)(true),
+    blinkTimer = (0, _react().useRef)(null),
+    [focused, setFocused] = (0, _react().useState)(autoFocus);
   const keyboardType = type === 'number' ? 'number-pad' : 'default';
   const inputMode = type === 'number' ? 'numeric' : 'text';
   const [code = '', setCode] = (0, _hooks.useControllableValue)(props, {
     defaultValue: ''
   });
-  const normalizeValue = (0, _react().useCallback)(nextValue => {
-    let next = nextValue === null || nextValue === undefined ? '' : (0, _validate.isString)(nextValue) ? nextValue : String(nextValue);
-    if (type === 'number') {
-      next = sanitizeNumber(next);
-    }
-    if (lengthSafe > 0 && next.length > lengthSafe) {
-      next = next.slice(0, lengthSafe);
-    }
-    return next;
-  }, [lengthSafe, type]);
+  const normalizeValue = (0, _react().useCallback)(v => {
+    let normalized = v === null || v === undefined ? '' : (0, _validate.isString)(v) ? v : String(v);
+    if (type === 'number') normalized = stripNonNumeric(normalized);
+    if (lengthValue > 0 && normalized.length > lengthValue) normalized = normalized.slice(0, lengthValue);
+    return normalized;
+  }, [lengthValue, type]);
   const normalizedCode = normalizeValue(code);
-  const updateValue = (0, _react().useCallback)(nextValue => {
-    const normalized = normalizeValue(nextValue);
+  const validatorRef = (0, _react().useRef)(validator),
+    onFocusRef = (0, _react().useRef)(onFocus),
+    onBlurRef = (0, _react().useRef)(onBlur),
+    onSubmitRef = (0, _react().useRef)(onSubmit);
+  validatorRef.current = validator;
+  onFocusRef.current = onFocus;
+  onBlurRef.current = onBlur;
+  onSubmitRef.current = onSubmit;
+  const updateValue = (0, _react().useCallback)(v => {
+    const normalized = normalizeValue(v);
     if (normalized === normalizedCode) return;
-    if (validator && !validator(normalized)) return;
+    if (validatorRef.current && !validatorRef.current(normalized)) return;
     setCode(normalized);
-  }, [normalizeValue, normalizedCode, setCode, validator]);
+  }, [normalizeValue, normalizedCode, setCode]);
   const focusInput = (0, _react().useCallback)(() => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -118,40 +123,41 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     }, 60);
     return () => clearTimeout(timer);
   }, [autoFocus, disabled]);
-  const handleChangeText = (0, _react().useCallback)(text => {
-    updateValue(text ?? '');
+  const handleChangeText = (0, _react().useCallback)(txt => {
+    updateValue(txt ?? '');
   }, [updateValue]);
   const handleFocus = (0, _react().useCallback)(() => {
     setFocused(true);
-    onFocus?.();
-  }, [onFocus]);
+    onFocusRef.current?.();
+  }, []);
   const handleBlur = (0, _react().useCallback)(() => {
     setFocused(false);
-    onBlur?.();
-  }, [onBlur]);
+    onBlurRef.current?.();
+  }, []);
   const prevSubmitRef = (0, _react().useRef)({
     value: normalizedCode,
-    length: lengthSafe
+    length: lengthValue
   });
   (0, _react().useEffect)(() => {
     const prev = prevSubmitRef.current;
     prevSubmitRef.current = {
       value: normalizedCode,
-      length: lengthSafe
+      length: lengthValue
     };
-    if (!onSubmit) return;
-    if (prev.length !== lengthSafe) return;
-    if (lengthSafe <= 0 || normalizedCode.length !== lengthSafe) return;
+    if (!onSubmitRef.current) return;
+    if (prev.length !== lengthValue) return;
+    if (lengthValue <= 0 || normalizedCode.length !== lengthValue) return;
     if (prev.value === normalizedCode) return;
-    onSubmit(normalizedCode);
+    onSubmitRef.current(normalizedCode);
     inputRef.current?.blur();
-  }, [lengthSafe, normalizedCode, onSubmit]);
+  }, [lengthValue, normalizedCode]);
   (0, _react().useEffect)(() => {
     const shouldBlink = showCursor && focused && !disabled;
     if (blinkTimer.current) {
       clearInterval(blinkTimer.current);
       blinkTimer.current = null;
     }
+    ;
     if (shouldBlink) {
       setCursorVisible(true);
       blinkTimer.current = setInterval(() => {
@@ -160,6 +166,7 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     } else {
       setCursorVisible(false);
     }
+    ;
     return () => {
       if (blinkTimer.current) {
         clearInterval(blinkTimer.current);
@@ -168,13 +175,13 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     };
   }, [disabled, focused, showCursor]);
   const cells = Array.from({
-    length: lengthSafe
-  }, (_, index) => {
-    const char = normalizedCode?.[index];
+    length: lengthValue
+  }, (_, i) => {
+    const char = normalizedCode?.[i];
     const isFilled = !!char;
-    const showBlink = showCursor && focused && !disabled && normalizedCode.length === index && index < lengthSafe;
+    const showBlink = showCursor && focused && !disabled && normalizedCode.length === i && i < lengthValue;
     return {
-      key: index,
+      key: i,
       char,
       isFilled,
       showBlink
@@ -182,11 +189,11 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   });
   const gutterValue = Math.max(0, (0, _number.parseNumberLike)(gutter, 0) ?? 0);
   const hasGutter = gutterValue > 0;
-  const tip = errorInfo ?? info;
+  const tipInfo = errorInfo ?? info;
   const tipColor = errorInfo ? colors.error : colors.muted;
   const backgroundColor = hasGutter ? colors.transparent : colors.background;
   const hiddenInputProps = {
-    ...HIDDEN_INPUT_PROPS,
+    ...HIP,
     underlineColorAndroid: colors.transparent
   };
   const cellTextBase = {
@@ -195,16 +202,13 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     fontWeight: typography.cellTextWeight,
     fontFamily: typography.fontFamily
   };
-  const wrapperStyle = [styles.wrapper, {
+  const wrapperStyle = [S.w, {
     backgroundColor,
     borderRadius: radii.wrapper,
     paddingHorizontal: spacing.none,
     opacity: disabled ? opacity.disabled : 1
-  }, !hasGutter && {
-    borderWidth: _reactNative().StyleSheet.hairlineWidth,
-    borderColor: colors.border
   }];
-  const securityStyle = [styles.security, {
+  const sheetStyle = [S.s, {
     borderRadius: hasGutter ? 0 : radii.wrapper,
     backgroundColor
   }];
@@ -219,26 +223,21 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       disabled
     }
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: securityStyle
-  }, cells.map((item, index) => {
+    style: sheetStyle
+  }, cells.map((item, i) => {
     const filledTextStyle = [cellTextBase, cellTextStyle, !mask && item.isFilled && highlightTextStyle];
-    const baseCell = [styles.cell, {
+    const baseCell = [S.c, {
       backgroundColor: colors.background,
       height: sizing.cellHeight
     }, cellStyle, item.isFilled && cellFilledStyle];
     if (hasGutter) {
-      baseCell.push(styles.cellGutter, {
-        borderColor: colors.border,
+      baseCell.push(S.cg, {
         borderRadius: radii.cellGutter
-      }, index > 0 && {
+      }, i > 0 && {
         marginLeft: gutterValue
       });
-    } else if (index < lengthSafe - 1) {
-      baseCell.push({
-        borderRightWidth: _reactNative().StyleSheet.hairlineWidth,
-        borderRightColor: colors.border
-      });
     }
+    ;
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       key: item.key,
       style: baseCell
@@ -255,7 +254,7 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       numberOfLines: 1
     }, item.char ?? ''), item.showBlink ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       testID: "password-input-cursor",
-      style: [styles.cursor, {
+      style: [S.cr, {
         width: sizing.cursorWidth,
         height: `${sizing.cursorHeightRatio * 100}%`,
         borderRadius: sizing.cursorWidth / 2,
@@ -264,64 +263,84 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
         backgroundColor: colors.cursor,
         opacity: cursorVisible ? 1 : 0
       }, cursorStyle]
-    }) : null);
+    }) : null, hasGutter && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: (0, _hairline.createHairlineView)({
+        position: 'all',
+        color: colors.border,
+        borderRadius: radii.cellGutter
+      })
+    }), !hasGutter && i < lengthValue - 1 && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: (0, _hairline.createHairlineView)({
+        position: 'right',
+        color: colors.border,
+        top: 0,
+        bottom: 0
+      })
+    }));
   }), /*#__PURE__*/_react().default.createElement(_reactNative().TextInput, _extends({
     ref: inputRef,
     value: normalizedCode,
     editable: !disabled,
     keyboardType: keyboardType,
     inputMode: inputMode,
-    maxLength: lengthSafe,
+    maxLength: lengthValue,
     autoFocus: false,
     secureTextEntry: mask
   }, hiddenInputProps, {
-    style: [styles.hiddenInput, {
+    style: [S.hi, {
       opacity: opacity.hidden
     }],
     onChangeText: handleChangeText,
     onFocus: handleFocus,
     onBlur: handleBlur,
     accessible: false
-  })))), tip ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.infoWrapper, {
+  }))), !hasGutter && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: (0, _hairline.createHairlineView)({
+      position: 'all',
+      color: colors.border,
+      borderRadius: radii.wrapper
+    })
+  })), tipInfo ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [S.iw, {
       marginTop: spacing.infoMarginTop
     }]
-  }, (0, _validate.isText)(tip) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.infoText, {
+  }, (0, _validate.isText)(tipInfo) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [S.it, {
       color: tipColor
     }]
-  }, tip) : tip) : null);
-});
+  }, tipInfo) : tipInfo) : null);
+};
+const PasswordInputForwardRef = /*#__PURE__*/_react().default.forwardRef(PasswordInputImpl);
+PasswordInputForwardRef.displayName = 'PasswordInput';
+const PasswordInput = /*#__PURE__*/_react().default.memo(PasswordInputForwardRef);
 var _default = exports.default = PasswordInput;
-const styles = _reactNative().StyleSheet.create({
-  wrapper: {
+const S = _reactNative().StyleSheet.create({
+  w: {
     alignSelf: 'stretch'
   },
-  security: {
+  s: {
     flexDirection: 'row',
     alignItems: 'center',
     position: 'relative',
     overflow: 'hidden'
   },
-  cell: {
+  c: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center'
   },
-  cellGutter: {
-    borderWidth: _reactNative().StyleSheet.hairlineWidth
-  },
-  cursor: {
+  cg: {},
+  cr: {
     position: 'absolute',
     left: '50%'
   },
-  hiddenInput: {
+  hi: {
     ..._reactNative().StyleSheet.absoluteFillObject
   },
-  infoWrapper: {
+  iw: {
     alignItems: 'center'
   },
-  infoText: {
+  it: {
     textAlign: 'center'
   }
 });