react-native-system-ui 0.0.7 → 1.0.1

package/dist/es/components/radio/RadioGroup.js

@@ -1,11 +1,11 @@
 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, useMemo, useRef } from 'react';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 import { useRadioGroup } from '@react-native-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
 import { useRadioTokens } from './tokens';
 export const RadioGroupContext = /*#__PURE__*/React.createContext(null);
-export const RadioGroup = props => {
+const RadioGroupImpl = props => {
   const {
     value,
     defaultValue,
@@ -40,8 +40,7 @@ export const RadioGroup = props => {
     defaultValue: defaultValue == null ? undefined : String(defaultValue),
     isDisabled: disabled,
     onChange: key => {
-      const raw = registryRef.current.get(key);
-      onChange?.(raw ?? key);
+      onChange?.(registryRef.current.get(key) ?? key);
     },
     name
   });
@@ -52,33 +51,14 @@ export const RadioGroup = props => {
     'aria-label': accessibilityLabel,
     name
   }, state);
-  const resolvedRadioGroupProps = useMemo(() => ({
+  const rProps = useMemo(() => ({
     ...(radioGroupProps ?? {}),
     ...(accessibilityHint && {
       'aria-describedby': accessibilityHint
     }),
     'aria-disabled': disabled
   }), [accessibilityHint, disabled, radioGroupProps]);
-  const supportsGap = Platform.OS === 'web';
-  const childrenArray = useMemo(() => React.Children.toArray(children).filter(child => child != null && typeof child !== 'boolean'), [children]);
-  const childrenLength = childrenArray.length;
-  const itemStyleForIndex = useCallback(index => {
-    if (supportsGap) return tokens.layout.groupItem;
-    const isLast = index === childrenLength - 1;
-    if (direction === 'horizontal') {
-      return [tokens.layout.groupItem, !isLast && {
-        marginRight: gap
-      }];
-    }
-    return isLast ? tokens.layout.groupItem : [tokens.layout.groupItem, {
-      marginBottom: gap
-    }];
-  }, [childrenLength, direction, gap, supportsGap, tokens.layout.groupItem]);
-  const containerGapStyle = useMemo(() => supportsGap ? {
-    columnGap: direction === 'horizontal' ? gap : undefined,
-    rowGap: gap
-  } : null, [direction, gap, supportsGap]);
-  const contextValue = useMemo(() => ({
+  const ctxVal = useMemo(() => ({
     state,
     direction,
     iconSize,
@@ -87,27 +67,16 @@ export const RadioGroup = props => {
     registerValue,
     unregisterValue
   }), [checkedColor, direction, iconSize, labelDisabled, registerValue, state, unregisterValue]);
-  const containerStyle = useMemo(() => [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, containerGapStyle, style], [containerGapStyle, direction, style, tokens.layout.groupHorizontal, tokens.layout.groupVertical]);
-  const renderedChildren = useMemo(() => supportsGap ? childrenArray : childrenArray.map((child, index) => {
-    const key = /*#__PURE__*/React.isValidElement(child) && child.key !== null ? child.key : index;
-    const itemStyle = itemStyleForIndex(index);
-    if (/*#__PURE__*/React.isValidElement(child) && child.type !== React.Fragment) {
-      const element = child;
-      return /*#__PURE__*/React.cloneElement(element, {
-        style: [element.props.style, itemStyle],
-        key
-      });
-    }
-    return /*#__PURE__*/React.createElement(View, {
-      key: key,
-      style: itemStyle
-    }, child);
-  }), [childrenArray, itemStyleForIndex, supportsGap]);
+  const ctrStyle = [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, {
+    columnGap: direction === 'horizontal' ? gap : undefined,
+    rowGap: gap
+  }, style];
   return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(View, _extends({}, resolvedRadioGroupProps, viewProps, {
+    value: ctxVal
+  }, /*#__PURE__*/React.createElement(View, _extends({}, rProps, viewProps, {
     accessibilityLabel: accessibilityLabel,
     accessibilityHint: accessibilityHint,
-    style: containerStyle
-  }), renderedChildren));
-};
+    style: ctrStyle
+  }), children));
+};
+export const RadioGroup = /*#__PURE__*/React.memo(RadioGroupImpl);

package/dist/es/components/radio/tokens.js

@@ -1,5 +1,9 @@
 import { StyleSheet } from 'react-native';
 import { createComponentTokensHook } from '../../design-system';
+const centered = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
 const createRadioTokens = foundations => {
   const {
     palette,
@@ -7,7 +11,6 @@ const createRadioTokens = foundations => {
     fontSize,
     typography
   } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
     defaults: {
       iconSize: 20,
@@ -22,17 +25,11 @@ const createRadioTokens = foundations => {
         flexDirection: 'row',
         alignItems: 'center'
       },
-      iconWrapper: {
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
+      iconWrapper: centered,
       labelWrapper: {
         flexShrink: 1
       },
-      icon: {
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
+      icon: centered,
       label: {
         includeFontPadding: false
       },
@@ -54,7 +51,7 @@ const createRadioTokens = foundations => {
       checkedBackground: palette.primary[500],
       disabledBorder: palette.default[300],
       disabledBackground: palette.default[100],
-      checkmark: onPrimary,
+      checkmark: palette.primary.foreground ?? '#ffffff',
       label: palette.default.foreground ?? '#111827',
       labelDisabled: palette.default[400]
     },

package/dist/es/components/safe-area-view/SafeAreaView.js

@@ -1,43 +1,40 @@
 import React from 'react';
 import { View } from 'react-native';
 import { useSafeAreaPadding } from '../../hooks/useSafeAreaPadding';
-export const SafeAreaView = ({
+const SafeAreaViewImpl = ({
   edge,
   style,
   children,
   onLayout,
   pointerEvents
 }) => {
-  const p = useSafeAreaPadding({});
-  if (edge === 'top') {
-    return /*#__PURE__*/React.createElement(View, {
-      style: [{
-        width: '100%',
-        minHeight: p.paddingTop
-      }, style],
-      onLayout: onLayout,
-      pointerEvents: pointerEvents ?? 'none'
-    });
-  }
-  if (edge === 'bottom') {
-    return /*#__PURE__*/React.createElement(View, {
-      style: [{
-        width: '100%',
-        minHeight: p.paddingBottom
-      }, style],
-      pointerEvents: pointerEvents ?? 'none'
-    });
-  }
+  const pad = useSafeAreaPadding({});
+  if (edge === 'top') return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      width: '100%',
+      minHeight: pad.paddingTop
+    }, style],
+    onLayout: onLayout,
+    pointerEvents: pointerEvents ?? 'none'
+  });
+  if (edge === 'bottom') return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      width: '100%',
+      minHeight: pad.paddingBottom
+    }, style],
+    pointerEvents: pointerEvents ?? 'none'
+  });
   return /*#__PURE__*/React.createElement(View, {
     style: [{
       width: '100%',
-      paddingTop: p.paddingTop,
-      paddingBottom: p.paddingBottom,
-      paddingLeft: p.paddingLeft,
-      paddingRight: p.paddingRight
+      paddingTop: pad.paddingTop,
+      paddingBottom: pad.paddingBottom,
+      paddingLeft: pad.paddingLeft,
+      paddingRight: pad.paddingRight
     }, style],
     onLayout: onLayout,
     pointerEvents: pointerEvents
   }, children);
 };
+export const SafeAreaView = /*#__PURE__*/React.memo(SafeAreaViewImpl);
 SafeAreaView.displayName = 'SafeAreaView';

package/dist/es/components/search/Search.js

@@ -1,5 +1,5 @@
 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, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useCallback, useImperativeHandle, useRef } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { Search as SearchIcon } from 'react-native-system-icon';
 import { useAriaPress, useControllableValue } from '../../hooks';
@@ -15,7 +15,7 @@ const SearchComponent = (props, ref) => {
     action,
     actionText,
     showAction = false,
-    shape: shapeProp,
+    shape: shapeP,
     background,
     style: containerStyle,
     fieldStyle,
@@ -36,62 +36,72 @@ const SearchComponent = (props, ref) => {
     ...restFieldProps
   } = props;
   const tokens = useSearchTokens(tokensOverride);
-  const shape = shapeProp ?? tokens.defaults.shape;
+  const shape = shapeP ?? tokens.defaults.shape;
   const [value, triggerChange] = useControllableValue(props, {
     defaultValue: ''
   });
   const inputValue = value ?? '';
-  const resolvedInputAlign = useMemo(() => align ?? inputAlign, [align, inputAlign]);
+  const rInputAlign = align ?? inputAlign;
+  const onChangeTextRef = useRef(onChangeText),
+    onCancelRef = useRef(onCancel),
+    onSearchRef = useRef(onSearch),
+    onSubmitEditingRef = useRef(onSubmitEditing),
+    inputValueRef = useRef(inputValue);
+  onChangeTextRef.current = onChangeText;
+  onCancelRef.current = onCancel;
+  onSearchRef.current = onSearch;
+  onSubmitEditingRef.current = onSubmitEditing;
+  inputValueRef.current = inputValue;
   const handleChange = useCallback(next => {
     triggerChange(next);
-    onChangeText?.(next);
-  }, [onChangeText, triggerChange]);
+    onChangeTextRef.current?.(next);
+  }, [triggerChange]);
   const handleCancel = useCallback(() => {
     handleChange('');
-    onCancel?.();
-  }, [handleChange, onCancel]);
+    onCancelRef.current?.();
+  }, [handleChange]);
   const handleSubmit = useCallback(event => {
-    onSearch?.(inputValue);
-    onSubmitEditing?.(event);
-  }, [inputValue, onSearch, onSubmitEditing]);
-  const resolvedBackground = useMemo(() => background ?? tokens.colors.background, [background, tokens.colors.background]);
-  const resolvedLeftIcon = useMemo(() => leftIcon ?? /*#__PURE__*/React.createElement(SearchIcon, {
+    onSearchRef.current?.(inputValueRef.current);
+    onSubmitEditingRef.current?.(event);
+  }, []);
+  const rBg = background ?? tokens.colors.background;
+  const rLeftIcon = leftIcon ?? /*#__PURE__*/React.createElement(SearchIcon, {
     size: tokens.icon.size,
     fill: tokens.colors.icon,
     color: tokens.colors.icon
-  }), [leftIcon, tokens.colors.icon, tokens.icon.size]);
-  const resolvedClearTrigger = useMemo(() => clearTrigger ?? tokens.defaults.clearTrigger, [clearTrigger, tokens.defaults.clearTrigger]);
-  const resolvedReturnKeyType = useMemo(() => returnKeyType ?? 'search', [returnKeyType]);
-  const shouldShowAction = useMemo(() => !!action || showAction, [action, showAction]);
-  const isCustomActionText = useMemo(() => /*#__PURE__*/React.isValidElement(actionText), [actionText]);
-  const shouldRenderCancelAction = useMemo(() => shouldShowAction && !action && !isCustomActionText, [action, isCustomActionText, shouldShowAction]);
-  const radius = useMemo(() => shape === 'round' ? tokens.radius.round : tokens.radius.square, [shape, tokens.radius.round, tokens.radius.square]);
+  });
+  const rClearTrigger = clearTrigger ?? tokens.defaults.clearTrigger;
+  const rReturnKey = returnKeyType ?? 'search';
+  const showAct = !!action || showAction;
+  const customActTxt = /*#__PURE__*/React.isValidElement(actionText);
+  const renderCancelAct = showAct && !action && !customActTxt;
+  const radius = shape === 'round' ? tokens.radius.round : tokens.radius.square;
   const inputRef = useRef(null);
   useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur(),
     clear: () => handleChange('')
   }), [handleChange]);
-  const cancelActionPress = useAriaPress({
-    disabled: !shouldRenderCancelAction,
+  const cancelActPress = useAriaPress({
+    disabled: !renderCancelAct,
     onPress: handleCancel,
     extraProps: {
       accessibilityRole: 'button',
       testID: 'rnsu-search-action'
     }
   });
-  const containerStyles = useMemo(() => [styles.container, {
+  const ctrStyles = [S.ctr, {
     paddingHorizontal: tokens.spacing.paddingHorizontal,
     paddingVertical: tokens.spacing.paddingVertical,
-    backgroundColor: resolvedBackground
-  }, containerStyle], [containerStyle, resolvedBackground, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
-  const contentStyles = useMemo(() => [styles.content, {
+    backgroundColor: rBg
+  }, containerStyle];
+  const cntStyles = [S.cnt, {
     borderRadius: radius,
     paddingHorizontal: tokens.spacing.contentPaddingHorizontal,
     paddingVertical: tokens.spacing.contentPaddingVertical,
     backgroundColor: tokens.colors.contentBackground
-  }], [radius, tokens.colors.contentBackground, tokens.spacing.contentPaddingHorizontal, tokens.spacing.contentPaddingVertical]);
-  const labelNode = useMemo(() => !label ? null : isText(label) ? /*#__PURE__*/React.createElement(Text, {
+  }];
+  const labelEl = !label ? null : isText(label) ? /*#__PURE__*/React.createElement(Text, {
     style: {
       marginRight: tokens.spacing.labelGap,
       color: tokens.colors.label,
@@ -102,21 +112,21 @@ const SearchComponent = (props, ref) => {
     style: {
       marginRight: tokens.spacing.labelGap
     }
-  }, label), [label, tokens.colors.label, tokens.spacing.labelGap, tokens.typography.label, tokens.typography.labelWeight]);
-  const actionNode = action ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.actionWrapper, {
+  }, label);
+  const actEl = action ? /*#__PURE__*/React.createElement(View, {
+    style: [S.act, {
       marginLeft: tokens.spacing.actionGap
     }]
-  }, action) : !shouldShowAction ? null : isCustomActionText ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.actionWrapper, {
+  }, action) : !showAct ? null : customActTxt ? /*#__PURE__*/React.createElement(View, {
+    style: [S.act, {
       marginLeft: tokens.spacing.actionGap
     }]
   }, actionText) : /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [styles.actionWrapper, {
+    style: [S.act, {
       marginLeft: tokens.spacing.actionGap,
-      opacity: cancelActionPress.states.pressed ? tokens.opacity.actionPressed : 1
+      opacity: cancelActPress.states.pressed ? tokens.opacity.actionPressed : 1
     }]
-  }, cancelActionPress.interactionProps), /*#__PURE__*/React.createElement(Text, {
+  }, cancelActPress.interactionProps), /*#__PURE__*/React.createElement(Text, {
     style: {
       color: tokens.colors.action,
       fontSize: tokens.typography.action,
@@ -124,57 +134,55 @@ const SearchComponent = (props, ref) => {
     }
   }, actionText ?? locale.cancel));
   return /*#__PURE__*/React.createElement(View, {
-    style: containerStyles
+    style: ctrStyles
   }, /*#__PURE__*/React.createElement(View, {
-    style: contentStyles
-  }, labelNode, /*#__PURE__*/React.createElement(View, {
-    style: styles.fieldWrapper
+    style: cntStyles
+  }, labelEl, /*#__PURE__*/React.createElement(View, {
+    style: S.field
   }, /*#__PURE__*/React.createElement(Field, _extends({
     ref: inputRef,
     type: "search",
     value: inputValue,
     onChangeText: handleChange,
     clearable: clearable,
-    clearTrigger: resolvedClearTrigger,
-    leftIcon: resolvedLeftIcon,
+    clearTrigger: rClearTrigger,
+    leftIcon: rLeftIcon,
     rightIcon: rightIcon,
     center: !errorMessage,
     errorMessage: errorMessage,
-    inputAlign: resolvedInputAlign,
+    inputAlign: rInputAlign,
     border: false,
-    style: [styles.field, {
+    style: [{
       paddingHorizontal: tokens.spacing.none,
       paddingVertical: tokens.spacing.none
     }, fieldStyle],
-    contentStyle: [styles.fieldContent, {
+    contentStyle: [{
       paddingVertical: tokens.spacing.none
     }, fieldContentStyle],
-    inputStyle: [styles.input, {
+    inputStyle: [{
       paddingVertical: tokens.spacing.none
     }, inputStyle],
     onSubmitEditing: handleSubmit,
-    returnKeyType: resolvedReturnKeyType
-  }, restFieldProps)))), actionNode);
+    returnKeyType: rReturnKey
+  }, restFieldProps)))), actEl);
 };
-export const Search = /*#__PURE__*/React.forwardRef(SearchComponent);
-Search.displayName = 'Search';
-const styles = StyleSheet.create({
-  container: {
+const SearchForwardRef = /*#__PURE__*/React.forwardRef(SearchComponent);
+SearchForwardRef.displayName = 'Search';
+export const Search = /*#__PURE__*/React.memo(SearchForwardRef);
+const S = StyleSheet.create({
+  ctr: {
     flexDirection: 'row',
     alignItems: 'center'
   },
-  content: {
+  cnt: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center'
   },
-  fieldWrapper: {
+  field: {
     flex: 1
   },
-  field: {},
-  fieldContent: {},
-  input: {},
-  actionWrapper: {
+  act: {
     justifyContent: 'center'
   }
 });

package/dist/es/components/selector/Selector.js

@@ -34,8 +34,8 @@ const SelectorOptionItemImpl = ({
     onPress: () => onToggle(option),
     extraProps: {
       accessibilityRole: multiple ? 'checkbox' : 'radio',
-      accessibilityLabel,
-      accessibilityHint,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: accessibilityHint,
       accessibilityState: multiple ? {
         checked: active,
         disabled
@@ -103,10 +103,10 @@ const SelectorImpl = props => {
   const {
     tokensOverride,
     options,
-    columns: columnsProp,
-    multiple: multipleProp,
-    showCheckMark: showCheckMarkProp,
-    disabled: disabledProp,
+    columns: colP,
+    multiple: multP,
+    showCheckMark: showChkP,
+    disabled: disP,
     onChange,
     itemStyle,
     labelStyle,
@@ -115,36 +115,30 @@ const SelectorImpl = props => {
     ...rest
   } = props;
   const tokens = useSelectorTokens(tokensOverride);
-  const columns = columnsProp ?? tokens.defaults.columns ?? 1;
-  const multiple = multipleProp ?? tokens.defaults.multiple;
-  const showCheckMark = showCheckMarkProp ?? tokens.defaults.showCheckMark;
-  const disabled = Boolean(disabledProp ?? tokens.defaults.disabled);
+  const columns = colP ?? tokens.defaults.columns ?? 1;
+  const multiple = multP ?? tokens.defaults.multiple;
+  const showCheckMark = showChkP ?? tokens.defaults.showCheckMark;
+  const disabled = Boolean(disP ?? tokens.defaults.disabled);
   const [value = [], triggerChange] = useControllableValue(props, {
     defaultValue: []
   });
-  const optionByValue = useMemo(() => {
-    const map = new Map();
-    for (const option of options) map.set(option.value, option);
-    return map;
+  const optionsByVal = useMemo(() => {
+    const m = new Map();
+    for (const o of options) m.set(o.value, o);
+    return m;
   }, [options]);
-  const resolvedColumns = useMemo(() => Math.max(1, Math.floor(columns)), [columns]);
-  const basis = useMemo(() => `${100 / resolvedColumns}%`, [resolvedColumns]);
-  const itemMargin = useMemo(() => tokens.spacing.gap / 2, [tokens.spacing.gap]);
+  const rCols = Math.max(1, Math.floor(columns));
+  const basis = `${100 / rCols}%`;
+  const itemMargin = tokens.spacing.gap / 2;
   const selectedSet = useMemo(() => new Set(value), [value]);
   const toggleOption = useCallback(option => {
     if (disabled || option.disabled) return;
     const active = selectedSet.has(option.value);
-    let next;
-    if (multiple) {
-      next = active ? value.filter(item => item !== option.value) : [...value, option.value];
-    } else {
-      next = active ? [] : [option.value];
-    }
-    const items = next.map(v => optionByValue.get(v)).filter(Boolean);
-    triggerChange(next, {
-      items
+    const nextVal = multiple ? active ? value.filter(item => item !== option.value) : [...value, option.value] : active ? [] : [option.value];
+    triggerChange(nextVal, {
+      items: nextVal.map(v => optionsByVal.get(v)).filter(Boolean)
     });
-  }, [disabled, multiple, optionByValue, selectedSet, triggerChange, value]);
+  }, [disabled, multiple, optionsByVal, selectedSet, triggerChange, value]);
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
     style: [tokens.layout.container, {
       marginHorizontal: -itemMargin,