react-native-system-ui 0.0.4 → 0.0.6

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

@@ -1,6 +1,6 @@
 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, useContext, useEffect, useRef } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { Platform, Pressable, Text, View } from 'react-native';
 import { useRadio } from '@react-native-aria/radio';
 import { useToggleState } from '@react-stately/toggle';
 import { RadioGroupContext } from './RadioContext';
@@ -42,7 +42,8 @@ export const Radio = /*#__PURE__*/React.memo(props => {
   const shape = shapeProp ?? tokens.defaults.shape;
   const standaloneKey = serializedValue ?? 'standalone';
   const inputRef = useRef(null);
-  const resolvedAccessibilityLabel = accessibilityLabel ?? ariaLabel ?? (isText(children) ? String(children) : undefined) ?? serializedValue ?? 'radio';
+  const inputElementRef = useRef(null);
+  const resolvedAccessibilityLabel = useMemo(() => accessibilityLabel ?? ariaLabel ?? (isText(children) ? String(children) : undefined) ?? serializedValue ?? 'radio', [accessibilityLabel, ariaLabel, children, serializedValue]);
   const {
     isSelected: standaloneSelected,
     setSelected: setStandaloneSelected
@@ -71,6 +72,7 @@ export const Radio = /*#__PURE__*/React.memo(props => {
     onFocus,
     ...compatibleRest
   } = rest;
+  const ariaRef = Platform.OS === 'web' ? inputElementRef : inputRef;
   const {
     inputProps
   } = useRadio({
@@ -79,7 +81,7 @@ export const Radio = /*#__PURE__*/React.memo(props => {
     'aria-label': resolvedAccessibilityLabel,
     accessibilityLabel: resolvedAccessibilityLabel,
     ...compatibleRest
-  }, state, inputRef);
+  }, state, ariaRef);
   const isChecked = isGroup && group && serializedValue !== undefined ? group.state.selectedValue === serializedValue : checked !== undefined ? checked : standaloneSelected;
   const inputOnPress = inputProps?.onPress;
   const handlePress = useCallback(e => {
@@ -105,14 +107,14 @@ export const Radio = /*#__PURE__*/React.memo(props => {
   } : {};
   const borderColor = resolvedDisabled ? tokens.colors.disabledBorder : isChecked ? resolvedCheckedColor : tokens.colors.border;
   const backgroundColor = resolvedDisabled ? tokens.colors.disabledBackground : tokens.colors.background;
-  const spacingStyle = resolvedLabelPosition === 'left' ? {
+  const spacingStyle = useMemo(() => resolvedLabelPosition === 'left' ? {
     marginRight: tokens.spacing.gap
   } : {
     marginLeft: tokens.spacing.gap
-  };
-  const labelColor = resolvedDisabled ? tokens.colors.labelDisabled : tokens.colors.label;
-  const borderRadius = shape === 'square' ? tokens.radii.square : tokens.radii.round;
-  const labelNode = children === null || children === undefined || children === false ? null : /*#__PURE__*/React.createElement(View, {
+  }, [resolvedLabelPosition, tokens.spacing.gap]);
+  const labelColor = useMemo(() => resolvedDisabled ? tokens.colors.labelDisabled : tokens.colors.label, [resolvedDisabled, tokens.colors.label, tokens.colors.labelDisabled]);
+  const borderRadius = useMemo(() => shape === 'square' ? tokens.radii.square : tokens.radii.round, [shape, tokens.radii.round, tokens.radii.square]);
+  const labelNode = useMemo(() => children === null || children === undefined || children === false ? null : /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.labelWrapper, spacingStyle],
     pointerEvents: "none",
     accessible: false
@@ -125,9 +127,9 @@ export const Radio = /*#__PURE__*/React.memo(props => {
       fontFamily: tokens.typography.fontFamily,
       fontWeight: tokens.typography.fontWeight
     }, labelStyle]
-  }, children) : children);
+  }, children) : children), [children, labelColor, labelStyle, spacingStyle, tokens.layout.label, tokens.layout.labelWrapper, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight, tokens.typography.lineHeightMultiplier]);
   const interactive = !resolvedDisabled && !resolvedLabelDisabled;
-  const defaultIcon = /*#__PURE__*/React.createElement(View, {
+  const defaultIcon = useMemo(() => /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.icon, {
       width: resolvedIconSize,
       height: resolvedIconSize,
@@ -143,14 +145,35 @@ export const Radio = /*#__PURE__*/React.memo(props => {
       borderRadius,
       backgroundColor: resolvedCheckedColor
     }
-  }) : null);
+  }) : null), [backgroundColor, borderColor, borderRadius, isChecked, resolvedCheckedColor, resolvedIconSize, tokens.borders.width, tokens.layout.icon, tokens.sizing.dotScale]);
   const iconVisual = iconRender ? iconRender({
     checked: Boolean(isChecked),
     disabled: Boolean(resolvedDisabled)
   }) ?? null : defaultIcon;
+  const webInputStyle = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    border: 0,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    whiteSpace: 'nowrap'
+  };
+  const {
+    ref: _ignoredAriaRefProp,
+    ...webInputProps
+  } = inputProps ?? {};
+  const webInputNode = Platform.OS === 'web' ? /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputElementRef
+  }, webInputProps, {
+    style: webInputStyle
+  })) : null;
   const iconNode = interactive ? /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.iconWrapper
-  }, iconVisual) : /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
+  }, iconVisual, webInputNode) : /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
     ref: inputRef,
     testID: serializedValue !== undefined ? `radio-icon-${serializedValue}` : undefined,
     disabled: resolvedDisabled,
@@ -160,7 +183,7 @@ export const Radio = /*#__PURE__*/React.memo(props => {
       disabled: resolvedDisabled
     },
     style: tokens.layout.iconWrapper
-  }), iconVisual);
+  }), iconVisual, webInputNode);
   const left = resolvedLabelPosition === 'left';
   const first = left ? labelNode : iconNode;
   const second = left ? iconNode : labelNode;

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

@@ -1,2 +1 @@
-import React from 'react';
-export const RadioGroupContext = /*#__PURE__*/React.createContext(null);
+export { RadioGroupContext } from './RadioGroup';

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

@@ -1,10 +1,10 @@
 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, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { Platform, View } from 'react-native';
 import { useRadioGroup } from '@react-native-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
-import { RadioGroupContext } from './RadioContext';
 import { useRadioTokens } from './tokens';
+export const RadioGroupContext = /*#__PURE__*/React.createContext(null);
 export const RadioGroup = props => {
   const {
     value,
@@ -52,18 +52,19 @@ export const RadioGroup = props => {
     'aria-label': accessibilityLabel,
     name
   }, state);
-  const resolvedRadioGroupProps = {
+  const resolvedRadioGroupProps = useMemo(() => ({
     ...(radioGroupProps ?? {}),
     ...(accessibilityHint && {
       'aria-describedby': accessibilityHint
     }),
     'aria-disabled': disabled
-  };
+  }), [accessibilityHint, disabled, radioGroupProps]);
   const supportsGap = Platform.OS === 'web';
-  const childrenArray = React.Children.toArray(children).filter(child => child != null && typeof child !== 'boolean');
-  const itemStyleForIndex = index => {
+  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 === childrenArray.length - 1;
+    const isLast = index === childrenLength - 1;
     if (direction === 'horizontal') {
       return [tokens.layout.groupItem, !isLast && {
         marginRight: gap
@@ -72,12 +73,12 @@ export const RadioGroup = props => {
     return isLast ? tokens.layout.groupItem : [tokens.layout.groupItem, {
       marginBottom: gap
     }];
-  };
-  const containerGapStyle = supportsGap ? {
+  }, [childrenLength, direction, gap, supportsGap, tokens.layout.groupItem]);
+  const containerGapStyle = useMemo(() => supportsGap ? {
     columnGap: direction === 'horizontal' ? gap : undefined,
     rowGap: gap
-  } : null;
-  const contextValue = {
+  } : null, [direction, gap, supportsGap]);
+  const contextValue = useMemo(() => ({
     state,
     direction,
     iconSize,
@@ -85,14 +86,9 @@ export const RadioGroup = props => {
     labelDisabled,
     registerValue,
     unregisterValue
-  };
-  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(View, _extends({}, resolvedRadioGroupProps, viewProps, {
-    accessibilityLabel: accessibilityLabel,
-    accessibilityHint: accessibilityHint,
-    style: [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, containerGapStyle, style]
-  }), supportsGap ? childrenArray : childrenArray.map((child, index) => {
+  }), [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) {
@@ -106,5 +102,12 @@ export const RadioGroup = props => {
       key: key,
       style: itemStyle
     }, child);
-  })));
+  }), [childrenArray, itemStyleForIndex, supportsGap]);
+  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(View, _extends({}, resolvedRadioGroupProps, viewProps, {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    style: containerStyle
+  }), renderedChildren));
 };

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

@@ -0,0 +1,5 @@
+import { createComponentTokensHook } from '../../design-system';
+const createSafeAreaViewTokens = _foundations => {
+  return {};
+};
+export const useSafeAreaViewTokens = createComponentTokensHook('safeAreaView', createSafeAreaViewTokens);

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, useRef } from 'react';
+import React, { useCallback, useImperativeHandle, useMemo, 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';
@@ -41,7 +41,7 @@ const SearchComponent = (props, ref) => {
     defaultValue: ''
   });
   const inputValue = value ?? '';
-  const resolvedInputAlign = align ?? inputAlign;
+  const resolvedInputAlign = useMemo(() => align ?? inputAlign, [align, inputAlign]);
   const handleChange = useCallback(next => {
     triggerChange(next);
     onChangeText?.(next);
@@ -54,18 +54,18 @@ const SearchComponent = (props, ref) => {
     onSearch?.(inputValue);
     onSubmitEditing?.(event);
   }, [inputValue, onSearch, onSubmitEditing]);
-  const resolvedBackground = background ?? tokens.colors.background;
-  const resolvedLeftIcon = leftIcon ?? /*#__PURE__*/React.createElement(SearchIcon, {
+  const resolvedBackground = useMemo(() => background ?? tokens.colors.background, [background, tokens.colors.background]);
+  const resolvedLeftIcon = useMemo(() => leftIcon ?? /*#__PURE__*/React.createElement(SearchIcon, {
     size: tokens.icon.size,
     fill: tokens.colors.icon,
     color: tokens.colors.icon
-  });
-  const resolvedClearTrigger = clearTrigger ?? tokens.defaults.clearTrigger;
-  const resolvedReturnKeyType = returnKeyType ?? 'search';
-  const shouldShowAction = !!action || showAction;
-  const isCustomActionText = /*#__PURE__*/React.isValidElement(actionText);
-  const shouldRenderCancelAction = shouldShowAction && !action && !isCustomActionText;
-  const radius = shape === 'round' ? tokens.radius.round : tokens.radius.square;
+  }), [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 inputRef = useRef(null);
   useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
@@ -80,18 +80,18 @@ const SearchComponent = (props, ref) => {
       testID: 'rnsu-search-action'
     }
   });
-  const containerStyles = [styles.container, {
+  const containerStyles = useMemo(() => [styles.container, {
     paddingHorizontal: tokens.spacing.paddingHorizontal,
     paddingVertical: tokens.spacing.paddingVertical,
     backgroundColor: resolvedBackground
-  }, containerStyle];
-  const contentStyles = [styles.content, {
+  }, containerStyle], [containerStyle, resolvedBackground, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
+  const contentStyles = useMemo(() => [styles.content, {
     borderRadius: radius,
     paddingHorizontal: tokens.spacing.contentPaddingHorizontal,
     paddingVertical: tokens.spacing.contentPaddingVertical,
     backgroundColor: tokens.colors.contentBackground
-  }];
-  const labelNode = !label ? null : isText(label) ? /*#__PURE__*/React.createElement(Text, {
+  }], [radius, tokens.colors.contentBackground, tokens.spacing.contentPaddingHorizontal, tokens.spacing.contentPaddingVertical]);
+  const labelNode = useMemo(() => !label ? null : isText(label) ? /*#__PURE__*/React.createElement(Text, {
     style: {
       marginRight: tokens.spacing.labelGap,
       color: tokens.colors.label,
@@ -102,7 +102,7 @@ const SearchComponent = (props, ref) => {
     style: {
       marginRight: tokens.spacing.labelGap
     }
-  }, label);
+  }, label), [label, tokens.colors.label, tokens.spacing.labelGap, tokens.typography.label, tokens.typography.labelWeight]);
   const actionNode = action ? /*#__PURE__*/React.createElement(View, {
     style: [styles.actionWrapper, {
       marginLeft: tokens.spacing.actionGap

package/dist/es/components/selector/Selector.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 } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { useSelectorTokens } from './tokens';
 import { useAriaPress, useControllableValue } from '../../hooks';
@@ -122,15 +122,15 @@ const SelectorImpl = props => {
   const [value = [], triggerChange] = useControllableValue(props, {
     defaultValue: []
   });
-  const optionByValue = (() => {
+  const optionByValue = useMemo(() => {
     const map = new Map();
     for (const option of options) map.set(option.value, option);
     return map;
-  })();
-  const resolvedColumns = Math.max(1, Math.floor(columns));
-  const basis = `${100 / resolvedColumns}%`;
-  const itemMargin = tokens.spacing.gap / 2;
-  const selectedSet = new Set(value);
+  }, [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 selectedSet = useMemo(() => new Set(value), [value]);
   const toggleOption = useCallback(option => {
     if (disabled || option.disabled) return;
     const active = selectedSet.has(option.value);

package/dist/es/components/share-sheet/ShareSheet.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 } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { useAriaPress } from '../../hooks';
 import { createHairlineView } from '../../utils/hairline';
@@ -13,20 +13,20 @@ const normalizeOptions = options => {
   }
   return [options];
 };
-const ShareSheetOptionItem = ({
+const ShareSheetOptionItem = /*#__PURE__*/React.memo(({
   option,
   index,
   columns,
   tokens,
   onSelect
 }) => {
-  const optionWidthStyle = {
+  const optionWidthStyle = useMemo(() => ({
     width: `${100 / columns}%`
-  };
-  const iconStyle = {
+  }), [columns]);
+  const iconStyle = useMemo(() => ({
     width: tokens.sizing.icon,
     height: tokens.sizing.icon
-  };
+  }), [tokens.sizing.icon]);
   const press = useAriaPress({
     onPress: () => onSelect(option, index),
     extraProps: {
@@ -59,8 +59,8 @@ const ShareSheetOptionItem = ({
       paddingHorizontal: tokens.spacing.optionDescPaddingHorizontal
     }]
   }, option.description) : null);
-};
-const ShareSheetCancel = ({
+});
+const ShareSheetCancel = /*#__PURE__*/React.memo(({
   cancelText,
   tokens,
   onPress
@@ -88,7 +88,7 @@ const ShareSheetCancel = ({
       fontSize: tokens.typography.cancel
     }]
   }, cancelText) : cancelText));
-};
+});
 const ShareSheet = props => {
   const {
     visible,
@@ -113,8 +113,8 @@ const ShareSheet = props => {
     ...popupProps
   } = props;
   const tokens = useShareSheetTokens(tokensOverride);
-  const groups = normalizeOptions(options);
-  const resolvedColumns = isFiniteNumber(columns) ? Math.max(1, Math.floor(columns)) : 4;
+  const groups = useMemo(() => normalizeOptions(options), [options]);
+  const resolvedColumns = useMemo(() => isFiniteNumber(columns) ? Math.max(1, Math.floor(columns)) : 4, [columns]);
   const hasTitle = isValidNode(title);
   const hasDescription = isValidNode(description);
   const hasCancelText = isValidNode(cancelText);
@@ -128,14 +128,14 @@ const ShareSheet = props => {
     if (closeOnSelect) close();
   }, [close, closeOnSelect, onSelect]);
   const onPopupClose = useCallback(() => close(true), [close]);
-  const wrapperStyle = [styles.wrapper, {
+  const wrapperStyle = useMemo(() => [styles.wrapper, {
     backgroundColor: tokens.colors.background
-  }];
-  const groupRowStyle = [styles.optionsRow, {
+  }], [tokens.colors.background]);
+  const groupRowStyle = useMemo(() => [styles.optionsRow, {
     paddingLeft: tokens.spacing.gap,
     paddingVertical: 12
-  }];
-  const groupNodes = (() => {
+  }], [tokens.spacing.gap]);
+  const groupNodes = useMemo(() => {
     if (!groups.length) return null;
     let globalIndex = 0;
     return groups.map((group, groupIndex) => /*#__PURE__*/React.createElement(View, {
@@ -160,34 +160,40 @@ const ShareSheet = props => {
         onSelect: handleSelect
       });
     }))));
-  })();
-  const headerNode = !hasTitle && !hasDescription ? null : /*#__PURE__*/React.createElement(View, {
-    style: [styles.header, {
-      paddingTop: tokens.spacing.headerPaddingTop,
-      paddingHorizontal: tokens.spacing.headerPaddingHorizontal,
-      paddingBottom: tokens.spacing.headerPaddingBottom
-    }]
-  }, hasTitle ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.title, {
-      color: tokens.colors.title,
-      fontSize: tokens.typography.title,
-      marginTop: tokens.spacing.titleMarginTop
-    }]
-  }, title) : /*#__PURE__*/React.createElement(View, {
-    style: [styles.node, {
-      marginTop: tokens.spacing.nodeMarginTop
-    }]
-  }, title) : null, hasDescription ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.description, {
-      color: tokens.colors.description,
-      fontSize: tokens.typography.description,
-      marginTop: tokens.spacing.descriptionMarginTop
-    }]
-  }, description) : /*#__PURE__*/React.createElement(View, {
-    style: [styles.node, {
-      marginTop: tokens.spacing.nodeMarginTop
-    }]
-  }, description) : null);
+  }, [groups, groupRowStyle, handleSelect, resolvedColumns, tokens]);
+  const headerNode = useMemo(() => {
+    if (!hasTitle && !hasDescription) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.header, {
+        paddingTop: tokens.spacing.headerPaddingTop,
+        paddingHorizontal: tokens.spacing.headerPaddingHorizontal,
+        paddingBottom: tokens.spacing.headerPaddingBottom
+      }]
+    }, hasTitle ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
+      style: [styles.title, {
+        color: tokens.colors.title,
+        fontSize: tokens.typography.title,
+        marginTop: tokens.spacing.titleMarginTop
+      }]
+    }, title) : /*#__PURE__*/React.createElement(View, {
+      style: [styles.node, {
+        marginTop: tokens.spacing.nodeMarginTop
+      }]
+    }, title) : null, hasDescription ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
+      style: [styles.description, {
+        color: tokens.colors.description,
+        fontSize: tokens.typography.description,
+        marginTop: tokens.spacing.descriptionMarginTop
+      }]
+    }, description) : /*#__PURE__*/React.createElement(View, {
+      style: [styles.node, {
+        marginTop: tokens.spacing.nodeMarginTop
+      }]
+    }, description) : null);
+  }, [description, hasDescription, hasTitle, title, tokens.colors.description, tokens.colors.title, tokens.spacing.descriptionMarginTop, tokens.spacing.headerPaddingBottom, tokens.spacing.headerPaddingHorizontal, tokens.spacing.headerPaddingTop, tokens.spacing.nodeMarginTop, tokens.spacing.titleMarginTop, tokens.typography.description, tokens.typography.title]);
+  const popupStyleMemo = useMemo(() => [styles.popupOverride, {
+    padding: tokens.spacing.popupPadding
+  }, popupStyle], [popupStyle, tokens.spacing.popupPadding]);
   return /*#__PURE__*/React.createElement(Popup, _extends({}, popupProps, {
     visible: visible,
     placement: "bottom",
@@ -196,9 +202,7 @@ const ShareSheet = props => {
     overlay: overlay,
     lockScroll: lockScroll,
     onClose: onPopupClose,
-    style: [styles.popupOverride, {
-      padding: tokens.spacing.popupPadding
-    }, popupStyle]
+    style: popupStyleMemo
   }), /*#__PURE__*/React.createElement(View, {
     style: wrapperStyle
   }, headerNode, groupNodes, children, hasCancelText ? /*#__PURE__*/React.createElement(ShareSheetCancel, {

package/dist/es/components/sidebar/Sidebar.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 from 'react';
+import React, { useMemo } from 'react';
 import { Text, View } from 'react-native';
 import { mergeTokensOverride } from '../../design-system';
 import { useControllableValue } from '../../hooks';
@@ -15,7 +15,7 @@ const SidebarBase = props => {
     ...rest
   } = props;
   const tokens = useSidebarTokens(tokensOverride);
-  const items = (() => {
+  const items = useMemo(() => {
     const out = [];
     const list = React.Children.toArray(children);
     for (let i = 0; i < list.length; i++) {
@@ -27,7 +27,7 @@ const SidebarBase = props => {
       });
     }
     return out;
-  })();
+  }, [children]);
   const firstIndex = items[0]?.index ?? 0;
   const [activeIndex, setActiveIndex] = useControllableValue(props, {
     defaultValue: firstIndex,
@@ -35,18 +35,21 @@ const SidebarBase = props => {
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
-  let currentIndex = firstIndex;
-  for (let i = 0; i < items.length; i++) {
-    if (items[i].index === activeIndex) {
-      currentIndex = activeIndex;
-      break;
+  const currentIndex = useMemo(() => {
+    let next = firstIndex;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].index === activeIndex) {
+        next = activeIndex;
+        break;
+      }
     }
-  }
-  const contextValue = {
+    return next;
+  }, [activeIndex, firstIndex, items]);
+  const contextValue = useMemo(() => ({
     activeIndex: currentIndex,
     onSelect: setActiveIndex
-  };
-  const clonedItems = items.map(item => {
+  }), [currentIndex, setActiveIndex]);
+  const clonedItems = useMemo(() => items.map(item => {
     const key = item.element.key ?? item.index;
     const merged = mergeTokensOverride(tokensOverride, item.element.props.tokensOverride);
     return /*#__PURE__*/React.cloneElement(item.element, {
@@ -54,20 +57,22 @@ const SidebarBase = props => {
       index: item.index,
       tokensOverride: merged
     });
-  });
+  }), [items, tokensOverride]);
   const activeItem = items.find(item => item.index === currentIndex)?.element;
   const activeContentStyle = activeItem?.props?.contentStyle;
   const activeContent = activeItem?.props?.children;
-  const activeContentNode = activeContent == null || activeContent === false ? null : isText(activeContent) ? /*#__PURE__*/React.createElement(Text, null, activeContent) : activeContent;
+  const activeContentNode = useMemo(() => activeContent == null || activeContent === false ? null : isText(activeContent) ? /*#__PURE__*/React.createElement(Text, null, activeContent) : activeContent, [activeContent]);
+  const containerStyle = useMemo(() => [tokens.layout.container, {
+    backgroundColor: tokens.colors.background
+  }, style], [style, tokens.colors.background, tokens.layout.container]);
+  const sideContainerStyle = useMemo(() => [tokens.layout.side, {
+    width: tokens.sizing.width,
+    borderRightColor: tokens.colors.border
+  }, sideStyle], [sideStyle, tokens.colors.border, tokens.layout.side, tokens.sizing.width]);
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: [tokens.layout.container, {
-      backgroundColor: tokens.colors.background
-    }, style]
+    style: containerStyle
   }), /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.side, {
-      width: tokens.sizing.width,
-      borderRightColor: tokens.colors.border
-    }, sideStyle],
+    style: sideContainerStyle,
     accessibilityRole: "tablist"
   }, /*#__PURE__*/React.createElement(SidebarContext.Provider, {
     value: contextValue

package/dist/es/components/sidebar/SidebarItem.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 from 'react';
+import React, { useMemo } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { useAriaPress } from '../../hooks';
 import { isRenderable, isText } from '../../utils';
@@ -29,7 +29,7 @@ const SidebarItem = props => {
   }
   const disabled = disabledProp ?? tokens.defaults.disabled;
   const isActive = context.activeIndex === index;
-  const titleColor = disabled ? tokens.colors.disabled : isActive ? tokens.colors.titleActive : tokens.colors.title;
+  const titleColor = useMemo(() => disabled ? tokens.colors.disabled : isActive ? tokens.colors.titleActive : tokens.colors.title, [disabled, isActive, tokens.colors.disabled, tokens.colors.title, tokens.colors.titleActive]);
   const press = useAriaPress({
     disabled,
     onPress: () => {
@@ -45,37 +45,41 @@ const SidebarItem = props => {
       testID: `rv-sidebar-item-${index}`
     }
   });
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, press.interactionProps, {
-    style: [tokens.layout.item, {
-      height: tokens.sizing.itemHeight
-    }, style]
-  }), /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.indicatorWrapper
-  }, isActive && /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.indicator, {
-      width: tokens.sizing.indicatorWidth,
-      borderRadius: tokens.sizing.indicatorWidth,
-      backgroundColor: tokens.colors.indicator
-    }]
-  })), /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.itemContent
-  }, /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.titleRow
-  }, isRenderable(title) ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
+  const indicatorStyle = useMemo(() => [tokens.layout.indicator, {
+    width: tokens.sizing.indicatorWidth,
+    borderRadius: tokens.sizing.indicatorWidth,
+    backgroundColor: tokens.colors.indicator
+  }], [tokens.colors.indicator, tokens.layout.indicator, tokens.sizing.indicatorWidth]);
+  const titleNode = useMemo(() => isRenderable(title) ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
     style: [tokens.layout.title, {
       color: titleColor,
       fontSize: tokens.typography.fontSize,
       fontWeight: tokens.typography.fontWeight
     }, textStyle]
-  }, title) : title : null, isRenderable(badge) && /*#__PURE__*/React.createElement(View, {
+  }, title) : title : null, [textStyle, title, titleColor, tokens.layout.title, tokens.typography.fontSize, tokens.typography.fontWeight]);
+  const badgeNode = useMemo(() => isRenderable(badge) ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.badge, badgeStyle]
   }, isText(badge) ? /*#__PURE__*/React.createElement(Badge, {
     content: badge
-  }) : badge), dot && /*#__PURE__*/React.createElement(View, {
+  }) : badge) : null, [badge, badgeStyle, tokens.layout.badge]);
+  const dotNode = useMemo(() => dot ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.dot, {
       backgroundColor: tokens.colors.indicator
     }]
-  }))));
+  }) : null, [dot, tokens.colors.indicator, tokens.layout.dot]);
+  return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, press.interactionProps, {
+    style: [tokens.layout.item, {
+      height: tokens.sizing.itemHeight
+    }, style]
+  }), /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.indicatorWrapper
+  }, isActive && /*#__PURE__*/React.createElement(View, {
+    style: indicatorStyle
+  })), /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.itemContent
+  }, /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.titleRow
+  }, titleNode, badgeNode, dotNode)));
 };
 SidebarItem.displayName = 'Sidebar.Item';
 export default SidebarItem;