react-native-system-ui 0.0.7 → 1.0.0

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';
@@ -41,31 +41,41 @@ const SearchComponent = (props, ref) => {
     defaultValue: ''
   });
   const inputValue = value ?? '';
-  const resolvedInputAlign = useMemo(() => align ?? inputAlign, [align, inputAlign]);
+  const resolvedInputAlign = 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 resolvedBackground = background ?? tokens.colors.background;
+  const resolvedLeftIcon = 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 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;
   const inputRef = useRef(null);
   useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
@@ -80,18 +90,18 @@ const SearchComponent = (props, ref) => {
       testID: 'rnsu-search-action'
     }
   });
-  const containerStyles = useMemo(() => [styles.container, {
+  const containerStyles = [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, {
+  }, containerStyle];
+  const contentStyles = [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 labelElement = !label ? null : isText(label) ? /*#__PURE__*/React.createElement(Text, {
     style: {
       marginRight: tokens.spacing.labelGap,
       color: tokens.colors.label,
@@ -102,17 +112,17 @@ 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 actionElement = action ? /*#__PURE__*/React.createElement(View, {
+    style: [S.act, {
       marginLeft: tokens.spacing.actionGap
     }]
   }, action) : !shouldShowAction ? null : isCustomActionText ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.actionWrapper, {
+    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
     }]
@@ -127,8 +137,8 @@ const SearchComponent = (props, ref) => {
     style: containerStyles
   }, /*#__PURE__*/React.createElement(View, {
     style: contentStyles
-  }, labelNode, /*#__PURE__*/React.createElement(View, {
-    style: styles.fieldWrapper
+  }, labelElement, /*#__PURE__*/React.createElement(View, {
+    style: S.field
   }, /*#__PURE__*/React.createElement(Field, _extends({
     ref: inputRef,
     type: "search",
@@ -142,39 +152,37 @@ const SearchComponent = (props, ref) => {
     errorMessage: errorMessage,
     inputAlign: resolvedInputAlign,
     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);
+  }, restFieldProps)))), actionElement);
 };
-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
@@ -122,29 +122,30 @@ const SelectorImpl = props => {
   const [value = [], triggerChange] = useControllableValue(props, {
     defaultValue: []
   });
-  const optionByValue = useMemo(() => {
+  const optionsByValue = useMemo(() => {
     const map = new Map();
     for (const option of options) map.set(option.value, option);
     return map;
   }, [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 resolvedColumns = Math.max(1, Math.floor(columns));
+  const basis = `${100 / resolvedColumns}%`;
+  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;
+    const isActive = selectedSet.has(option.value);
+    let nextValue;
     if (multiple) {
-      next = active ? value.filter(item => item !== option.value) : [...value, option.value];
+      nextValue = isActive ? value.filter(item => item !== option.value) : [...value, option.value];
     } else {
-      next = active ? [] : [option.value];
+      nextValue = isActive ? [] : [option.value];
     }
-    const items = next.map(v => optionByValue.get(v)).filter(Boolean);
-    triggerChange(next, {
+    ;
+    const items = nextValue.map(val => optionsByValue.get(val)).filter(Boolean);
+    triggerChange(nextValue, {
       items
     });
-  }, [disabled, multiple, optionByValue, selectedSet, triggerChange, value]);
+  }, [disabled, multiple, optionsByValue, selectedSet, triggerChange, value]);
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
     style: [tokens.layout.container, {
       marginHorizontal: -itemMargin,

package/dist/es/components/share-sheet/ShareSheet.js

@@ -1,72 +1,69 @@
 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 } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useAriaPress } from '../../hooks';
 import { createHairlineView } from '../../utils/hairline';
 import { isFiniteNumber, isText, isValidNode } from '../../utils/validate';
+import { renderTextOrNode } from '../../utils';
 import Popup from '../popup';
+import { useLocale } from '../config-provider/useLocale';
 import { useShareSheetTokens } from './tokens';
-const normalizeOptions = options => {
-  if (!options || options.length === 0) return [];
-  if (Array.isArray(options[0])) {
-    return options;
-  }
-  return [options];
+const no = o => {
+  if (!o || o.length === 0) return [];
+  if (Array.isArray(o[0])) return o;
+  return [o];
 };
 const ShareSheetOptionItem = /*#__PURE__*/React.memo(({
-  option,
-  index,
-  columns,
-  tokens,
-  onSelect
+  option: o,
+  index: i,
+  columns: cols,
+  tokens: t,
+  onSelect: os
 }) => {
-  const optionWidthStyle = useMemo(() => ({
-    width: `${100 / columns}%`
-  }), [columns]);
-  const iconStyle = useMemo(() => ({
-    width: tokens.sizing.icon,
-    height: tokens.sizing.icon
-  }), [tokens.sizing.icon]);
-  const press = useAriaPress({
-    onPress: () => onSelect(option, index),
+  const ows = {
+    width: `${100 / cols}%`
+  };
+  const is = {
+    width: t.sizing.icon,
+    height: t.sizing.icon
+  };
+  const p = useAriaPress({
+    onPress: () => os(o, i),
     extraProps: {
-      accessibilityRole: 'button',
-      testID: `rv-share-sheet-item-${index}`
+      accessibilityRole: 'menuitem',
+      accessibilityLabel: isText(o.name) ? String(o.name) : undefined,
+      testID: `rv-share-sheet-item-${i}`
     }
   });
   return /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [styles.option, optionWidthStyle]
-  }, press.interactionProps), /*#__PURE__*/React.createElement(View, {
-    style: [styles.icon, iconStyle, {
-      marginHorizontal: tokens.spacing.iconMarginHorizontal
-    }]
-  }, option.icon), isValidNode(option.name) ? isText(option.name) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.optionText, {
-      color: tokens.colors.option,
-      fontSize: tokens.typography.option,
-      paddingHorizontal: tokens.spacing.optionTextPaddingHorizontal
-    }]
-  }, option.name) : option.name : null, isValidNode(option.description) ? isText(option.description) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.optionDesc, {
-      color: tokens.colors.optionDesc,
-      marginTop: tokens.spacing.gap,
-      fontSize: tokens.typography.optionDesc,
-      paddingHorizontal: tokens.spacing.optionDescPaddingHorizontal
+    style: [S.o, ows]
+  }, p.interactionProps), /*#__PURE__*/React.createElement(View, {
+    style: [S.ic, is, {
+      marginHorizontal: t.spacing.iconMarginHorizontal
     }]
-  }, option.description) : /*#__PURE__*/React.createElement(View, {
-    style: [styles.optionDescNode, {
-      marginTop: tokens.spacing.gap,
-      paddingHorizontal: tokens.spacing.optionDescPaddingHorizontal
+  }, o.icon), isValidNode(o.name) && renderTextOrNode(o.name, [S.ot, {
+    color: t.colors.option,
+    fontSize: t.typography.option,
+    paddingHorizontal: t.spacing.optionTextPaddingHorizontal
+  }]), isValidNode(o.description) && (isText(o.description) ? renderTextOrNode(o.description, [S.od, {
+    color: t.colors.optionDesc,
+    marginTop: t.spacing.gap,
+    fontSize: t.typography.optionDesc,
+    paddingHorizontal: t.spacing.optionDescPaddingHorizontal
+  }]) : /*#__PURE__*/React.createElement(View, {
+    style: [S.odn, {
+      marginTop: t.spacing.gap,
+      paddingHorizontal: t.spacing.optionDescPaddingHorizontal
     }]
-  }, option.description) : null);
+  }, o.description)));
 });
 const ShareSheetCancel = /*#__PURE__*/React.memo(({
-  cancelText,
-  tokens,
-  onPress
+  cancelText: ct,
+  tokens: t,
+  onPress: op
 }) => {
-  const cancelPress = useAriaPress({
-    onPress,
+  const cp = useAriaPress({
+    onPress: op,
     extraProps: {
       testID: 'rv-share-sheet-cancel',
       accessibilityRole: 'button'
@@ -74,27 +71,26 @@ const ShareSheetCancel = /*#__PURE__*/React.memo(({
   });
   return /*#__PURE__*/React.createElement(View, {
     style: {
-      backgroundColor: tokens.colors.divider
+      backgroundColor: t.colors.divider
     }
   }, /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [styles.cancel, {
-      backgroundColor: tokens.colors.background,
-      paddingVertical: tokens.spacing.cancelPaddingVertical,
-      marginTop: tokens.spacing.cancelMarginTop
+    style: [S.c, {
+      backgroundColor: t.colors.background,
+      paddingVertical: t.spacing.cancelPaddingVertical,
+      marginTop: t.spacing.cancelMarginTop
     }]
-  }, cancelPress.interactionProps), isText(cancelText) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.cancelText, {
-      color: tokens.colors.option,
-      fontSize: tokens.typography.cancel
-    }]
-  }, cancelText) : cancelText));
+  }, cp.interactionProps), renderTextOrNode(ct, [S.ct, {
+    color: t.colors.option,
+    fontSize: t.typography.cancel
+  }])));
 });
-const ShareSheet = props => {
+const ShareSheetImpl = p => {
+  const locale = useLocale();
   const {
     visible,
     title,
     description,
-    cancelText = '取消',
+    cancelText = locale?.vanShareSheet?.cancel ?? locale?.cancel ?? 'Cancel',
     options,
     columns = 4,
     closeOnSelect = true,
@@ -107,156 +103,159 @@ const ShareSheet = props => {
     lockScroll = true,
     overlay = true,
     round = true,
-    style: popupStyle,
-    placement: _placement,
-    position: _position,
-    ...popupProps
-  } = props;
-  const tokens = useShareSheetTokens(tokensOverride);
-  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);
-  const close = useCallback(isCancel => {
-    if (isCancel) onCancel?.();
-    onClose?.();
-  }, [onCancel, onClose]);
-  const handleSelect = useCallback((option, index) => {
-    onSelect?.(option, index);
-    option.onPress?.(option);
-    if (closeOnSelect) close();
-  }, [close, closeOnSelect, onSelect]);
-  const onPopupClose = useCallback(() => close(true), [close]);
-  const wrapperStyle = useMemo(() => [styles.wrapper, {
-    backgroundColor: tokens.colors.background
-  }], [tokens.colors.background]);
-  const groupRowStyle = useMemo(() => [styles.optionsRow, {
-    paddingLeft: tokens.spacing.gap,
+    style: ps,
+    placement: _p,
+    position: _pos,
+    ...pp
+  } = p;
+  const t = useShareSheetTokens(tokensOverride);
+  const gs = no(options);
+  const rc = isFiniteNumber(columns) ? Math.max(1, Math.floor(columns)) : 4;
+  const ht = isValidNode(title);
+  const hd = isValidNode(description);
+  const hc = isValidNode(cancelText);
+  const ocr = useRef(onCancel),
+    ocrr = useRef(onClose),
+    osr = useRef(onSelect);
+  ocr.current = onCancel;
+  ocrr.current = onClose;
+  osr.current = onSelect;
+  const cl = useCallback(ic => {
+    if (ic) ocr.current?.();
+    ocrr.current?.();
+  }, []);
+  const hs = useCallback((o, i) => {
+    osr.current?.(o, i);
+    o.onPress?.(o);
+    if (closeOnSelect) cl();
+  }, [cl, closeOnSelect]);
+  const opc = useCallback(() => cl(true), [cl]);
+  const ws = [S.w, {
+    backgroundColor: t.colors.background
+  }];
+  const grs = [S.or, {
+    paddingLeft: t.spacing.gap,
     paddingVertical: 12
-  }], [tokens.spacing.gap]);
-  const groupNodes = useMemo(() => {
-    if (!groups.length) return null;
-    let globalIndex = 0;
-    return groups.map((group, groupIndex) => /*#__PURE__*/React.createElement(View, {
-      key: groupIndex
-    }, groupIndex ? /*#__PURE__*/React.createElement(View, {
+  }];
+  const gn = useMemo(() => {
+    if (!gs.length) return null;
+    let gi = 0;
+    return gs.map((g, gidx) => /*#__PURE__*/React.createElement(View, {
+      key: gidx
+    }, gidx > 0 && /*#__PURE__*/React.createElement(View, {
       style: createHairlineView({
         position: 'top',
-        color: tokens.colors.border,
-        left: tokens.spacing.horizontal,
-        right: tokens.spacing.horizontal
+        color: t.colors.border,
+        left: t.spacing.horizontal,
+        right: t.spacing.horizontal
       })
-    }) : null, /*#__PURE__*/React.createElement(View, {
-      style: groupRowStyle
-    }, group.map(option => {
-      const currentIndex = globalIndex++;
+    }), /*#__PURE__*/React.createElement(View, {
+      style: grs
+    }, g.map(o => {
+      const ci = gi++;
       return /*#__PURE__*/React.createElement(ShareSheetOptionItem, {
-        key: option.key ?? currentIndex,
-        option: option,
-        index: currentIndex,
-        columns: resolvedColumns,
-        tokens: tokens,
-        onSelect: handleSelect
+        key: o.key ?? ci,
+        option: o,
+        index: ci,
+        columns: rc,
+        tokens: t,
+        onSelect: hs
       });
     }))));
-  }, [groups, groupRowStyle, handleSelect, resolvedColumns, tokens]);
-  const headerNode = useMemo(() => {
-    if (!hasTitle && !hasDescription) return null;
+  }, [gs, grs, hs, rc, t]);
+  const hn = useMemo(() => {
+    if (!ht && !hd) 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
+      style: [S.h, {
+        paddingTop: t.spacing.headerPaddingTop,
+        paddingHorizontal: t.spacing.headerPaddingHorizontal,
+        paddingBottom: t.spacing.headerPaddingBottom
       }]
-    }, title) : null, hasDescription ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
-      style: [styles.description, {
-        color: tokens.colors.description,
-        fontSize: tokens.typography.description,
-        marginTop: tokens.spacing.descriptionMarginTop
+    }, ht && (isText(title) ? renderTextOrNode(title, [S.t, {
+      color: t.colors.title,
+      fontSize: t.typography.title,
+      marginTop: t.spacing.titleMarginTop
+    }]) : /*#__PURE__*/React.createElement(View, {
+      style: [S.n, {
+        marginTop: t.spacing.nodeMarginTop
       }]
-    }, description) : /*#__PURE__*/React.createElement(View, {
-      style: [styles.node, {
-        marginTop: tokens.spacing.nodeMarginTop
+    }, title)), hd && (isText(description) ? renderTextOrNode(description, [S.d, {
+      color: t.colors.description,
+      fontSize: t.typography.description,
+      marginTop: t.spacing.descriptionMarginTop
+    }]) : /*#__PURE__*/React.createElement(View, {
+      style: [S.n, {
+        marginTop: t.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, {
+    }, description)));
+  }, [description, hd, ht, title, t.colors.description, t.colors.title, t.spacing.descriptionMarginTop, t.spacing.headerPaddingBottom, t.spacing.headerPaddingHorizontal, t.spacing.headerPaddingTop, t.spacing.nodeMarginTop, t.spacing.titleMarginTop, t.typography.description, t.typography.title]);
+  const psm = [{
+    padding: t.spacing.popupPadding
+  }, ps];
+  return /*#__PURE__*/React.createElement(Popup, _extends({}, pp, {
     visible: visible,
     placement: "bottom",
     round: round,
     safeAreaInsetBottom: safeAreaInsetBottom,
     overlay: overlay,
     lockScroll: lockScroll,
-    onClose: onPopupClose,
-    style: popupStyleMemo
+    onClose: opc,
+    style: psm
   }), /*#__PURE__*/React.createElement(View, {
-    style: wrapperStyle
-  }, headerNode, groupNodes, children, hasCancelText ? /*#__PURE__*/React.createElement(ShareSheetCancel, {
+    accessibilityRole: "menu",
+    style: ws
+  }, hn, gn, children, hc && /*#__PURE__*/React.createElement(ShareSheetCancel, {
     cancelText: cancelText,
-    tokens: tokens,
-    onPress: onPopupClose
-  }) : null));
+    tokens: t,
+    onPress: opc
+  })));
 };
-const styles = StyleSheet.create({
-  popupOverride: {},
-  wrapper: {
+const S = StyleSheet.create({
+  w: {
     width: '100%'
   },
-  header: {
+  h: {
     alignItems: 'center'
   },
-  title: {
+  t: {
     fontWeight: 'normal',
     textAlign: 'center'
   },
-  description: {
+  d: {
     textAlign: 'center'
   },
-  node: {
+  n: {
     alignItems: 'center'
   },
-  optionsRow: {
+  or: {
     flexDirection: 'row',
     flexWrap: 'wrap'
   },
-  option: {
+  o: {
     alignItems: 'center',
     justifyContent: 'center'
   },
-  icon: {
+  ic: {
     alignItems: 'center',
     justifyContent: 'center'
   },
-  optionText: {
+  ot: {
     fontWeight: '500',
     textAlign: 'center'
   },
-  optionDesc: {
+  od: {
     textAlign: 'center'
   },
-  optionDescNode: {
+  odn: {
     alignItems: 'center'
   },
-  cancel: {
+  c: {
     alignItems: 'center'
   },
-  cancelText: {
+  ct: {
     fontWeight: '500'
   }
 });
+const ShareSheet = /*#__PURE__*/React.memo(ShareSheetImpl);
 ShareSheet.displayName = 'ShareSheet';
 export default ShareSheet;