react-native-system-ui 0.0.7 → 1.0.0

package/dist/es/components/sidebar/Sidebar.js

@@ -1,12 +1,14 @@
 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, { useMemo } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import { mergeTokensOverride } from '../../design-system';
 import { useControllableValue } from '../../hooks';
+import { useDirection } from '../config-provider/useDirection';
 import { SidebarContext } from './SidebarContext';
 import { useSidebarTokens } from './tokens';
-import { isText } from '../../utils';
-const SidebarBase = props => {
+import { createHairlineView, renderTextOrNode } from '../../utils';
+import { isRenderable } from '../../utils/validate';
+const SidebarBaseImpl = props => {
   const {
     children,
     sideStyle,
@@ -15,20 +17,18 @@ const SidebarBase = props => {
     ...rest
   } = props;
   const tokens = useSidebarTokens(tokensOverride);
-  const items = useMemo(() => {
-    const out = [];
-    const list = React.Children.toArray(children);
-    for (let i = 0; i < list.length; i++) {
-      const child = list[i];
-      if (! /*#__PURE__*/React.isValidElement(child)) continue;
-      out.push({
+  const dir = useDirection();
+  const sidebarItems = useMemo(() => {
+    const items = [];
+    React.Children.toArray(children).forEach((child, index) => {
+      if (/*#__PURE__*/React.isValidElement(child)) items.push({
         element: child,
-        index: i
+        index
       });
-    }
-    return out;
+    });
+    return items;
   }, [children]);
-  const firstIndex = items[0]?.index ?? 0;
+  const firstIndex = sidebarItems[0]?.index ?? 0;
   const [activeIndex, setActiveIndex] = useControllableValue(props, {
     defaultValue: firstIndex,
     valuePropName: 'value',
@@ -36,49 +36,43 @@ const SidebarBase = props => {
     trigger: 'onChange'
   });
   const currentIndex = useMemo(() => {
-    let next = firstIndex;
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].index === activeIndex) {
-        next = activeIndex;
-        break;
-      }
+    for (const item of sidebarItems) {
+      if (item.index === activeIndex) return activeIndex;
     }
-    return next;
-  }, [activeIndex, firstIndex, items]);
+    return firstIndex;
+  }, [activeIndex, firstIndex, sidebarItems]);
   const contextValue = useMemo(() => ({
     activeIndex: currentIndex,
     onSelect: setActiveIndex
   }), [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, {
-      key,
-      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 = 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]);
+  const clonedItems = useMemo(() => sidebarItems.map(item => /*#__PURE__*/React.cloneElement(item.element, {
+    key: item.element.key ?? item.index,
+    index: item.index,
+    tokensOverride: mergeTokensOverride(tokensOverride, item.element.props.tokensOverride)
+  })), [sidebarItems, tokensOverride]);
+  const activeItem = sidebarItems.find(item => item.index === currentIndex)?.element;
+  const activeContentNode = !isRenderable(activeItem?.props?.children) ? null : renderTextOrNode(activeItem.props.children);
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: containerStyle
+    style: [tokens.layout.container, {
+      backgroundColor: tokens.colors.background
+    }, style]
   }), /*#__PURE__*/React.createElement(View, {
-    style: sideContainerStyle,
+    style: [tokens.layout.side, {
+      width: tokens.sizing.width
+    }, sideStyle],
     accessibilityRole: "tablist"
   }, /*#__PURE__*/React.createElement(SidebarContext.Provider, {
     value: contextValue
-  }, clonedItems)), /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.content, activeContentStyle]
+  }, clonedItems), /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: dir === 'rtl' ? 'left' : 'right',
+      color: tokens.colors.border,
+      top: 0,
+      bottom: 0
+    })
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.content, activeItem?.props?.contentStyle]
   }, activeContentNode));
 };
-SidebarBase.displayName = 'Sidebar';
+const SidebarBase = /*#__PURE__*/React.memo(SidebarBaseImpl);
 export default SidebarBase;

package/dist/es/components/sidebar/SidebarContext.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 export const SidebarContext = /*#__PURE__*/React.createContext(null);
 export const useSidebarContext = () => useContext(SidebarContext);

package/dist/es/components/sidebar/SidebarItem.js

@@ -1,12 +1,12 @@
 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, { useMemo } from 'react';
+import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { useAriaPress } from '../../hooks';
 import { isRenderable, isText } from '../../utils';
 import Badge from '../badge';
 import { useSidebarContext } from './SidebarContext';
 import { useSidebarTokens } from './tokens';
-const SidebarItem = props => {
+const SidebarItemImpl = props => {
   const {
     title,
     badge,
@@ -24,12 +24,10 @@ const SidebarItem = props => {
   } = props;
   const tokens = useSidebarTokens(tokensOverride);
   const context = useSidebarContext();
-  if (!context) {
-    return null;
-  }
+  if (!context) return null;
   const disabled = disabledProp ?? tokens.defaults.disabled;
   const isActive = context.activeIndex === index;
-  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 titleColor = disabled ? tokens.colors.disabled : isActive ? tokens.colors.titleActive : tokens.colors.title;
   const press = useAriaPress({
     disabled,
     onPress: () => {
@@ -45,28 +43,28 @@ const SidebarItem = props => {
       testID: `rv-sidebar-item-${index}`
     }
   });
-  const indicatorStyle = useMemo(() => [tokens.layout.indicator, {
+  const indicatorStyle = [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, {
+  }];
+  const titleNode = 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, [textStyle, title, titleColor, tokens.layout.title, tokens.typography.fontSize, tokens.typography.fontWeight]);
-  const badgeNode = useMemo(() => isRenderable(badge) ? /*#__PURE__*/React.createElement(View, {
+  }, title) : title : null;
+  const badgeNode = isRenderable(badge) ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.badge, badgeStyle]
   }, isText(badge) ? /*#__PURE__*/React.createElement(Badge, {
     content: badge
-  }) : badge) : null, [badge, badgeStyle, tokens.layout.badge]);
-  const dotNode = useMemo(() => dot ? /*#__PURE__*/React.createElement(View, {
+  }) : badge) : null;
+  const dotNode = dot ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.dot, {
       backgroundColor: tokens.colors.indicator
     }]
-  }) : null, [dot, tokens.colors.indicator, tokens.layout.dot]);
+  }) : null;
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, press.interactionProps, {
     style: [tokens.layout.item, {
       height: tokens.sizing.itemHeight
@@ -81,5 +79,5 @@ const SidebarItem = props => {
     style: tokens.layout.titleRow
   }, titleNode, badgeNode, dotNode)));
 };
-SidebarItem.displayName = 'Sidebar.Item';
+const SidebarItem = /*#__PURE__*/React.memo(SidebarItemImpl);
 export default SidebarItem;

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

@@ -15,9 +15,7 @@ export const createSidebarTokens = foundations => {
       container: {
         flexDirection: 'row'
       },
-      side: {
-        borderRightWidth: borderWidth
-      },
+      side: {},
       content: {
         flex: 1,
         minWidth: 0

package/dist/es/components/skeleton/Skeleton.js

@@ -2,15 +2,14 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 import { nativeDriverEnabled } from '../../platform';
+import { useReducedMotion } from '../../hooks/animation';
 import { isFiniteNumber, isString } from '../../utils';
 import { useSkeletonTokens } from './tokens';
 const normalize = (value, fallback) => isFiniteNumber(value) ? Math.max(0, value) : isString(value) && value.trim() ? value.trim() : fallback;
-const resolveSeries = (count, input, fallback) => {
-  return Array.from({
-    length: count
-  }, (_, idx) => normalize(Array.isArray(input) ? input[idx] : input, fallback));
-};
-const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
+const resolveSeries = (count, input, fallback) => Array.from({
+  length: count
+}, (_, idx) => normalize(Array.isArray(input) ? input[idx] : input, fallback));
+const SkeletonImpl = (props, ref) => {
   const {
     tokensOverride,
     isLoaded,
@@ -32,6 +31,7 @@ const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const tokens = useSkeletonTokens(tokensOverride);
+  const reducedMotion = useReducedMotion();
   const loading = loadingProp ?? (isLoaded != null ? !isLoaded : true);
   const animate = animateProp ?? true;
   const avatar = avatarProp ?? false;
@@ -42,22 +42,13 @@ const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const row = rowProp ?? tokens.defaults.rowCount;
   const rowWidth = rowWidthProp ?? tokens.defaults.rowWidth;
   const round = roundProp ?? false;
-  const speed = useMemo(() => {
-    if (isFiniteNumber(speedProp)) return Math.max(0.01, speedProp);
-    if (isString(speedProp)) {
-      const parsed = Number(speedProp);
-      return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
-    }
-    return 1;
-  }, [speedProp]);
-  const duration = useMemo(() => Math.max(0, tokens.animation.duration / speed), [speed, tokens.animation.duration]);
+  const speed = isFiniteNumber(speedProp) ? Math.max(0.01, speedProp) : isString(speedProp) && Number.isFinite(Number(speedProp)) && Number(speedProp) > 0 ? Number(speedProp) : 1;
+  const duration = Math.max(0, tokens.animation.duration / speed);
   const blockColor = startColor ?? tokens.colors.block;
   const rows = isFiniteNumber(row) ? Math.max(0, Math.floor(row)) : 0;
   const rowWidths = useMemo(() => {
     const widths = resolveSeries(rows, rowWidth, tokens.defaults.rowWidth);
-    if (!Array.isArray(rowWidth) && rows > 1 && (props.rowWidth === undefined || isString(props.rowWidth) && props.rowWidth.trim() === '100%')) {
-      widths[rows - 1] = tokens.defaults.lastRowWidth;
-    }
+    if (!Array.isArray(rowWidth) && rows > 1 && (props.rowWidth === undefined || isString(props.rowWidth) && props.rowWidth.trim() === '100%')) widths[rows - 1] = tokens.defaults.lastRowWidth;
     return widths;
   }, [props.rowWidth, rowWidth, rows, tokens.defaults.lastRowWidth, tokens.defaults.rowWidth]);
   const rowHeights = useMemo(() => resolveSeries(rows, rowHeight, tokens.defaults.rowHeight), [rowHeight, rows, tokens.defaults.rowHeight]);
@@ -66,31 +57,33 @@ const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const resolvedTitleWidth = normalize(titleWidth, tokens.defaults.titleWidth);
   const animated = useRef(new Animated.Value(0)).current;
   useEffect(() => {
-    if (!loading || !animate || duration <= 0) {
+    if (!loading || !animate || duration <= 0 || reducedMotion) {
       animated.setValue(0);
       return;
     }
     const loop = Animated.loop(Animated.sequence([Animated.timing(animated, {
       toValue: 1,
       duration: duration / 2,
-      useNativeDriver: nativeDriverEnabled
+      useNativeDriver: nativeDriverEnabled,
+      isInteraction: false
     }), Animated.timing(animated, {
       toValue: 0,
       duration: duration / 2,
-      useNativeDriver: nativeDriverEnabled
+      useNativeDriver: nativeDriverEnabled,
+      isInteraction: false
     })]));
     loop.start();
     return () => loop.stop();
-  }, [animate, animated, duration, loading]);
+  }, [animate, animated, duration, loading, reducedMotion]);
   const animatedStyle = useMemo(() => !loading || !animate ? undefined : {
     opacity: animated.interpolate({
       inputRange: [0, 1],
       outputRange: [tokens.animation.minOpacity, tokens.animation.maxOpacity]
     })
   }, [animate, animated, loading, tokens.animation.maxOpacity, tokens.animation.minOpacity]);
-  const containerStyles = useMemo(() => [styles.container, {
+  const containerStyles = [S.ctr, {
     gap: tokens.spacing.containerGap
-  }, style], [style, tokens.spacing.containerGap]);
+  }, style];
   const avatarNode = useMemo(() => !avatar ? null : /*#__PURE__*/React.createElement(Animated.View, {
     style: [{
       width: resolvedAvatarSize,
@@ -108,7 +101,7 @@ const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, animatedStyle]
   }), [animatedStyle, blockColor, resolvedTitleWidth, round, title, titleHeight, tokens.radius]);
   const rowNodes = useMemo(() => rows <= 0 ? null : /*#__PURE__*/React.createElement(View, {
-    style: styles.rows
+    style: S.rows
   }, rowWidths.map((width, index) => /*#__PURE__*/React.createElement(Animated.View, {
     key: index,
     testID: `rv-skeleton-row-${index}`,
@@ -120,30 +113,30 @@ const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
       borderRadius: round ? tokens.radius : 0
     }, animatedStyle]
   }))), [animatedStyle, blockColor, rowHeights, rowWidths, rows, round, title, tokens.radius, tokens.spacing.rowGap]);
-  if (!loading) {
-    return /*#__PURE__*/React.createElement(View, _extends({
-      ref: ref,
-      style: style
-    }, rest), children);
-  }
+  if (!loading) return /*#__PURE__*/React.createElement(View, _extends({
+    ref: ref,
+    style: style
+  }, rest), children);
   return /*#__PURE__*/React.createElement(View, _extends({
     ref: ref,
     style: containerStyles
   }, rest), avatarNode, /*#__PURE__*/React.createElement(View, {
-    style: styles.content
+    style: S.cnt
   }, titleNode, rowNodes));
-});
-const styles = StyleSheet.create({
-  container: {
+};
+const S = StyleSheet.create({
+  ctr: {
     flexDirection: 'row',
     alignItems: 'flex-start'
   },
-  content: {
+  cnt: {
     flex: 1
   },
   rows: {
     width: '100%'
   }
 });
-Skeleton.displayName = 'Skeleton';
+const SkeletonForwardRef = /*#__PURE__*/React.forwardRef(SkeletonImpl);
+SkeletonForwardRef.displayName = 'Skeleton';
+const Skeleton = /*#__PURE__*/React.memo(SkeletonForwardRef);
 export default Skeleton;

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

@@ -5,7 +5,6 @@ const createTokens = foundations => {
     spacing,
     radii
   } = foundations;
-  const surfaceMuted = palette.default[100];
   return {
     defaults: {
       rowCount: 3,
@@ -16,7 +15,7 @@ const createTokens = foundations => {
       titleWidth: '40%'
     },
     colors: {
-      block: surfaceMuted,
+      block: palette.default[100],
       highlight: '#ffffff'
     },
     radius: radii.sm,