react-native-system-ui 0.0.5 → 0.0.7

package/dist/cjs/components/slider/Slider.js

@@ -41,14 +41,107 @@ function _reactNative() {
 }
 var _tokens = require("./tokens");
 var _number = require("../../utils/number");
+var _utils2 = require("../../utils");
 var _validate = require("../../utils/validate");
 var _hooks = require("../../hooks");
-var _utils2 = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const isSameLayout = (a, b) => a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;
+const normalizeValue = (value, range, min, max) => {
+  if (range) {
+    const raw = Array.isArray(value) ? value : (0, _validate.isFiniteNumber)(value) ? [min, value] : [min, min];
+    const first = (0, _validate.isFiniteNumber)(raw[0]) ? (0, _utils2.clamp)(raw[0], min, max) : min;
+    const second = (0, _validate.isFiniteNumber)(raw[1] ?? raw[0]) ? (0, _utils2.clamp)(raw[1] ?? raw[0], min, max) : min;
+    return first <= second ? [first, second] : [second, first];
+  }
+  const single = Array.isArray(value) ? value[0] : value;
+  return [(0, _validate.isFiniteNumber)(single) ? (0, _utils2.clamp)(single, min, max) : min];
+};
+const toSliderValue = (values, range, fallback) => {
+  if (range) {
+    const start = values[0] ?? fallback;
+    const end = values[1] ?? start;
+    return [start, end];
+  }
+  return values[0] ?? fallback;
+};
+const createAccessibilityProps = inputProps => {
+  if (!inputProps) return {};
+  const {
+    role,
+    ['aria-value']: ariaValue,
+    accessibilityActions,
+    onAccessibilityAction,
+    disabled
+  } = inputProps;
+  return {
+    accessible: true,
+    accessibilityRole: role ?? 'adjustable',
+    accessibilityValue: ariaValue,
+    accessibilityActions,
+    onAccessibilityAction,
+    accessibilityState: {
+      disabled
+    }
+  };
+};
+const defaultNumberFormatter = typeof Intl !== 'undefined' && (0, _validate.isFunction)(Intl.NumberFormat) ? new Intl.NumberFormat() : {
+  format: val => String(val)
+};
 const START_KEYS = ['onResponderGrant', 'onPanResponderGrant'];
 const MOVE_KEYS = ['onResponderMove', 'onPanResponderMove'];
 const END_KEYS = ['onResponderRelease', 'onResponderTerminate', 'onPanResponderRelease', 'onPanResponderTerminate'];
+const useTrackLayout = () => {
+  const trackRef = (0, _react().useRef)(null);
+  const measureRafRef = (0, _react().useRef)(null);
+  const [trackLayout, setTrackLayout] = (0, _react().useState)({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0
+  });
+  const handleTrackLayout = (0, _react().useCallback)(event => {
+    const {
+      layout
+    } = event.nativeEvent;
+    const next = {
+      width: Math.max(layout.width, 1),
+      height: Math.max(layout.height, 1),
+      x: layout.x ?? 0,
+      y: layout.y ?? 0
+    };
+    setTrackLayout(prev => isSameLayout(prev, next) ? prev : next);
+    if (_reactNative().Platform.OS !== 'web' || typeof requestAnimationFrame === 'undefined') return;
+    if (measureRafRef.current != null) return;
+    measureRafRef.current = requestAnimationFrame(() => {
+      measureRafRef.current = null;
+      const node = trackRef.current;
+      if (!node?.measureInWindow) return;
+      node.measureInWindow((x, y, width, height) => {
+        const measured = {
+          width: Math.max(width, 1),
+          height: Math.max(height, 1),
+          x,
+          y
+        };
+        setTrackLayout(prev => isSameLayout(prev, measured) ? prev : measured);
+      });
+    });
+  }, []);
+  (0, _react().useEffect)(() => {
+    return () => {
+      if (measureRafRef.current != null && typeof cancelAnimationFrame === 'function') {
+        cancelAnimationFrame(measureRafRef.current);
+      }
+      measureRafRef.current = null;
+    };
+  }, []);
+  return {
+    trackRef,
+    trackLayout,
+    handleTrackLayout
+  };
+};
 const ThumbNode = /*#__PURE__*/_react().default.memo(({
   index,
   orientation,
@@ -109,7 +202,7 @@ const ThumbNode = /*#__PURE__*/_react().default.memo(({
     borderRadius: indicatorSize / 2,
     backgroundColor: indicatorColor
   };
-  const accessibilityProps = (0, _utils2.createAccessibilityProps)(inputProps);
+  const accessibilityProps = createAccessibilityProps(inputProps);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, handlers, accessibilityProps, {
     pointerEvents: isDisabled ? 'none' : 'auto',
     style: [content ? styles.thumbWrapper : styles.thumb, webGestureStyle, thumbStyle]
@@ -153,8 +246,11 @@ const Slider = props => {
   } = props;
   const tokens = (0, _tokens.useSliderTokens)(tokensOverride);
   const orientation = vertical ? 'vertical' : 'horizontal';
-  const trackRef = (0, _react().useRef)(null);
-  const measureRafRef = (0, _react().useRef)(null);
+  const {
+    trackRef,
+    trackLayout,
+    handleTrackLayout
+  } = useTrackLayout();
   const resolvedMin = (0, _number.parseNumber)(min, 0);
   const resolvedMax = (0, _number.parseNumber)(max, 100);
   const resolvedStepRaw = (0, _number.parseNumber)(step, 1);
@@ -165,70 +261,28 @@ const Slider = props => {
   const resolvedActiveColor = activeColor ?? tokens.colors.active;
   const resolvedInactiveColor = inactiveColor ?? tokens.colors.inactive;
   const scope = Math.max(resolvedMax - resolvedMin, 0.00001);
-  const normalized = (0, _utils2.normalizeValue)(valueProp, range, resolvedMin, resolvedMax);
+  const normalized = normalizeValue(valueProp, range, resolvedMin, resolvedMax);
   const isControlled = valueProp !== undefined;
-  const formatOutput = (0, _react().useCallback)(values => (0, _utils2.toSliderValue)(values, range, resolvedMin), [range, resolvedMin]);
+  const formatOutput = (0, _react().useCallback)(values => toSliderValue(values, range, resolvedMin), [range, resolvedMin]);
   const handleStateChange = (0, _react().useCallback)(values => {
     onChange?.(formatOutput(values));
   }, [formatOutput, onChange]);
   const handleStateChangeEnd = (0, _react().useCallback)(values => {
     onChangeAfter?.(formatOutput(values));
   }, [formatOutput, onChangeAfter]);
-  const sliderStateOptions = {
+  const sliderStateOptions = (0, _react().useMemo)(() => ({
     minValue: resolvedMin,
     maxValue: resolvedMax,
     step: resolvedStep,
     isDisabled: ariaDisabled,
-    numberFormatter: _utils2.defaultNumberFormatter,
+    numberFormatter: defaultNumberFormatter,
     orientation,
     value: isControlled ? normalized : undefined,
     defaultValue: !isControlled ? normalized : undefined,
     onChange: handleStateChange,
     onChangeEnd: handleStateChangeEnd
-  };
+  }), [ariaDisabled, handleStateChange, handleStateChangeEnd, isControlled, normalized, orientation, resolvedMax, resolvedMin, resolvedStep]);
   const state = (0, _slider2().useSliderState)(sliderStateOptions);
-  const [trackLayout, setTrackLayout] = (0, _react().useState)({
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0
-  });
-  const handleTrackLayout = (0, _react().useCallback)(event => {
-    const {
-      layout
-    } = event.nativeEvent;
-    const next = {
-      width: Math.max(layout.width, 1),
-      height: Math.max(layout.height, 1),
-      x: layout.x ?? 0,
-      y: layout.y ?? 0
-    };
-    setTrackLayout(prev => (0, _utils2.isSameLayout)(prev, next) ? prev : next);
-    if (_reactNative().Platform.OS !== 'web' || typeof requestAnimationFrame === 'undefined') return;
-    if (measureRafRef.current != null) return;
-    measureRafRef.current = requestAnimationFrame(() => {
-      measureRafRef.current = null;
-      const node = trackRef.current;
-      if (!node?.measureInWindow) return;
-      node.measureInWindow((x, y, width, height) => {
-        const measured = {
-          width: Math.max(width, 1),
-          height: Math.max(height, 1),
-          x,
-          y
-        };
-        setTrackLayout(prev => (0, _utils2.isSameLayout)(prev, measured) ? prev : measured);
-      });
-    });
-  }, []);
-  (0, _react().useEffect)(() => {
-    return () => {
-      if (measureRafRef.current != null && typeof cancelAnimationFrame === 'function') {
-        cancelAnimationFrame(measureRafRef.current);
-      }
-      measureRafRef.current = null;
-    };
-  }, []);
   const reverseX = orientation === 'horizontal' ? reverse || (0, _utils().isRTL)() : reverse;
   const ariaReverse = orientation === 'horizontal' ? reverseX : reverse;
   const {
@@ -394,9 +448,9 @@ const Slider = props => {
     return wrapped;
   }, [onDragStart, onDragEnd]);
   const values = state.values;
-  const thumbPercents = values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100);
-  const thumbVisualPercents = thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent);
-  const activeRange = (() => {
+  const thumbPercents = (0, _react().useMemo)(() => values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100), [resolvedMin, scope, values]);
+  const thumbVisualPercents = (0, _react().useMemo)(() => thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent), [orientation, reverse, reverseX, thumbPercents]);
+  const activeRange = (0, _react().useMemo)(() => {
     const first = thumbVisualPercents[0] ?? 0;
     const second = thumbVisualPercents[1] ?? first;
     return range && thumbVisualPercents.length > 1 ? {
@@ -409,30 +463,33 @@ const Slider = props => {
       offset: first,
       size: 100 - first
     };
-  })();
-  const activeTrackStyle = {
-    backgroundColor: resolvedActiveColor,
-    borderRadius: tokens.track.radius
-  };
-  if (orientation === 'vertical') {
-    activeTrackStyle.left = 0;
-    activeTrackStyle.width = '100%';
-    activeTrackStyle.height = `${Math.max(activeRange.size, 0)}%`;
-    activeTrackStyle.top = `${Math.max(activeRange.offset, 0)}%`;
-  } else {
-    activeTrackStyle.top = 0;
-    activeTrackStyle.height = '100%';
-    activeTrackStyle.width = `${Math.max(activeRange.size, 0)}%`;
-    activeTrackStyle.left = `${Math.max(activeRange.offset, 0)}%`;
-  }
-  const trackBaseStyle = orientation === 'vertical' ? [styles.trackVertical, {
+  }, [orientation, range, reverse, reverseX, thumbVisualPercents]);
+  const activeTrackStyle = (0, _react().useMemo)(() => {
+    const base = {
+      backgroundColor: resolvedActiveColor,
+      borderRadius: tokens.track.radius
+    };
+    if (orientation === 'vertical') {
+      base.left = 0;
+      base.width = '100%';
+      base.height = `${Math.max(activeRange.size, 0)}%`;
+      base.top = `${Math.max(activeRange.offset, 0)}%`;
+    } else {
+      base.top = 0;
+      base.height = '100%';
+      base.width = `${Math.max(activeRange.size, 0)}%`;
+      base.left = `${Math.max(activeRange.offset, 0)}%`;
+    }
+    return base;
+  }, [activeRange.offset, activeRange.size, orientation, resolvedActiveColor, tokens.track.radius]);
+  const trackBaseStyle = (0, _react().useMemo)(() => orientation === 'vertical' ? [styles.trackVertical, {
     width: resolvedTrackHeight,
     backgroundColor: resolvedInactiveColor,
     alignSelf: 'center'
   }] : [styles.trackHorizontal, {
     height: resolvedTrackHeight,
     backgroundColor: resolvedInactiveColor
-  }];
+  }], [orientation, resolvedInactiveColor, resolvedTrackHeight]);
   const isButtonFunction = (0, _validate.isFunction)(button);
   const sharedThumb = isButtonFunction ? button({
     value: currentValue
@@ -440,21 +497,21 @@ const Slider = props => {
   const leftThumbContent = leftButton ?? leftThumb ?? sharedThumb;
   const rightThumbContent = rightButton ?? rightThumb ?? sharedThumb;
   const resolveThumbContent = (0, _react().useCallback)((index, total) => total > 1 ? index === 0 ? leftThumbContent : rightThumbContent : sharedThumb, [leftThumbContent, rightThumbContent, sharedThumb]);
-  const webGestureStyle = _reactNative().Platform.OS === 'web' ? {
-    touchAction: orientation === 'horizontal' ? 'pan-y' : 'none',
+  const webGestureStyle = (0, _react().useMemo)(() => _reactNative().Platform.OS === 'web' ? {
+    touchAction: orientation === 'horizontal' ? 'pan-y' : 'pan-x',
     userSelect: 'none'
-  } : undefined;
-  const baseTrackPressableStyle = [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle];
+  } : undefined, [orientation]);
+  const baseTrackPressableStyle = (0, _react().useMemo)(() => [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle], [orientation, webGestureStyle]);
   const trackPressableStyleFn = (0, _react().useCallback)(pressableState => [baseTrackPressableStyle, trackAriaStyle(pressableState)], [baseTrackPressableStyle, trackAriaStyle]);
   const trackPressableStyle = trackAriaStyle && (0, _validate.isFunction)(trackAriaStyle) ? trackPressableStyleFn : [baseTrackPressableStyle, trackAriaStyle];
-  const containerStyles = [styles.container, {
+  const containerStyles = (0, _react().useMemo)(() => [styles.container, {
     paddingVertical: tokens.spacing.containerPaddingVertical
   }, orientation === 'vertical' && [styles.verticalContainer, {
     minHeight: tokens.layout.verticalMinHeight,
     width: tokens.layout.verticalWidth
   }], disabled && {
     opacity: tokens.states.disabledOpacity
-  }, style];
+  }, style], [disabled, orientation, style, tokens.layout.verticalMinHeight, tokens.layout.verticalWidth, tokens.spacing.containerPaddingVertical, tokens.states.disabledOpacity]);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     style: containerStyles,
     onLayout: containerOnLayout

package/dist/cjs/components/stepper/Stepper.js

@@ -68,13 +68,13 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
   const resolvedStep = (0, _utils.isFiniteNumber)(resolvedStepRaw) && resolvedStepRaw > 0 ? resolvedStepRaw : 1;
   const resolvedButtonSize = Math.max(0, (0, _utils.parseNumber)(buttonSize, tokens.defaults.buttonSize));
   const resolvedInputWidth = Math.max(0, (0, _utils.parseNumber)(inputWidth, tokens.defaults.inputWidth));
-  const resolvedDefaultValue = (() => {
+  const resolvedDefaultValue = (0, _react().useMemo)(() => {
     const raw = p.defaultValue;
     if (raw === null) return null;
     const base = (0, _utils.isFiniteNumber)(raw) ? raw : 0;
     const formatted = (0, _utils.formatNumber)(base, integer, decimalLength);
     return autoFixed ? (0, _utils.clampValue)(formatted, min, max) : formatted;
-  })();
+  }, [autoFixed, decimalLength, integer, max, min, p.defaultValue]);
   const [value, triggerChange] = (0, _hooks.useControllableValue)({
     ...p,
     defaultValue: resolvedDefaultValue
@@ -105,8 +105,9 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
   }, [decimalLength, hasFocus, setInputText, value]);
   const getCurrentNumber = (0, _react().useCallback)(() => {
     const current = valueRef.current;
-    return (0, _utils.isFiniteNumber)(current) ? current : 0;
-  }, []);
+    if ((0, _utils.isFiniteNumber)(current)) return current;
+    return (0, _utils.isFiniteNumber)(min) ? min : 0;
+  }, [min]);
   const isActionDisabled = (0, _react().useCallback)(type => {
     if (disabled) return true;
     if (type === 'plus' && disablePlus) return true;
@@ -264,15 +265,15 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
   const minusDisabled = disabledForAll || disableMinus || minNumber !== undefined && currentForCompare <= minNumber;
   const plusDisabled = disabledForAll || disablePlus || maxNumber !== undefined && currentForCompare >= maxNumber;
   const radius = tokens.radii.default;
-  const buttonBaseStyle = {
+  const buttonBaseStyle = (0, _react().useMemo)(() => ({
     width: resolvedButtonSize,
     height: resolvedButtonSize
-  };
-  const inputBoxStyle = {
+  }), [resolvedButtonSize]);
+  const inputBoxStyle = (0, _react().useMemo)(() => ({
     width: resolvedInputWidth,
     height: resolvedButtonSize,
     marginHorizontal: tokens.spacing.gap
-  };
+  }), [resolvedButtonSize, resolvedInputWidth, tokens.spacing.gap]);
   const getButtonStyle = (0, _react().useCallback)((type, state) => {
     const isPlus = type === 'plus';
     const disabledState = isPlus ? plusDisabled : minusDisabled;
@@ -411,7 +412,8 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
       style: getButtonTextStyle('plus')
     }, "+"));
   }, [getButtonTextStyle, getPlusButtonStyle, handlePlusPress, handlePlusPressIn, handlePressOut, plusDisabled, showPlus]);
-  const inputNode = !showInput ? null : (() => {
+  const inputNode = (0, _react().useMemo)(() => {
+    if (!showInput) return null;
     const editable = !disabledForAll && !disableInput;
     const inputDisabled = disabledForAll || disableInput;
     const inputBackground = theme === 'round' ? tokens.colors.transparent : inputDisabled ? tokens.colors.inputDisabledBackground : tokens.colors.background;
@@ -435,7 +437,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
       onBlur: handleBlur,
       onPressIn: handleInputPressIn
     }));
-  })();
+  }, [disabledForAll, disableInput, handleBlur, handleChangeText, handleFocus, handleInputPressIn, inputBoxStyle, inputProps, inputStyle, inputValue, integer, placeholder, showInput, theme, tokens.colors.background, tokens.colors.inputDisabledBackground, tokens.colors.inputDisabledText, tokens.colors.inputText, tokens.colors.transparent, tokens.spacing.none]);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
     style: [styles.container, style]
   }), renderMinusButton(), inputNode, renderPlusButton());