react-native-system-ui 0.0.1 → 0.0.3

package/dist/es/components/uploader/Uploader.js

@@ -1,73 +1,18 @@
 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, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { ActivityIndicator, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useUploaderTokens } from './tokens';
 import { useControllableValue } from '../../hooks';
 import Image from '../image';
 import ImagePreview from '../image-preview';
-import { parseNumber } from '../../utils/number';
 import { toArray } from '../../utils/array';
-import { isImageUrlString, isFunction, isUndefined, isString } from '../../utils/validate';
+import { parseNumber } from '../../utils/number';
+import { isFunction, isString } from '../../utils/validate';
+import { isImageFile, resolveSource, normalizeMaxSize, filterFiles, readFileContent, processBeforeRead } from './utils';
 const statusDefaults = {
   pending: '上传中',
   failed: '上传失败'
 };
-const isImageFile = (item, forced) => {
-  if (forced !== undefined) return forced;
-  if (item.file?.type) return item.file.type.indexOf('image') === 0;
-  return isImageUrlString(item.url ?? item.thumbnail ?? '');
-};
-const resolveSource = (item, isImage) => {
-  if (!isImage) return;
-  if (item.source) return item.source;
-  const uri = item.thumbnail ?? item.url;
-  return uri ? {
-    uri
-  } : undefined;
-};
-const normalizeMaxSize = (maxSize, fallback) => {
-  if (isFunction(maxSize)) return maxSize;
-  return parseNumber(maxSize, fallback);
-};
-const filterFiles = (files, maxSize) => {
-  const valid = [];
-  const invalid = [];
-  files.forEach(file => {
-    ;
-    ((isFunction(maxSize) ? maxSize(file) : file.size > maxSize) ? invalid : valid).push(file);
-  });
-  return {
-    valid,
-    invalid
-  };
-};
-const readFileContent = async (file, resultType, createObjectUrl) => {
-  if (file?.type?.indexOf('image') === 0) {
-    return createObjectUrl(file);
-  }
-  if (resultType === 'file') return undefined;
-  if (isUndefined(FileReader)) {
-    return undefined;
-  }
-  return await new Promise(resolve => {
-    const reader = new FileReader();
-    reader.onload = event => resolve(event.target?.result);
-    reader.onerror = () => resolve(undefined);
-    if (resultType === 'dataUrl') {
-      reader.readAsDataURL(file);
-    } else {
-      reader.readAsText(file);
-    }
-  });
-};
-const processBeforeRead = async (file, files, beforeRead) => {
-  if (!beforeRead) return file;
-  try {
-    return await beforeRead(file, files);
-  } catch {
-    return false;
-  }
-};
 const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     tokensOverride,
@@ -110,11 +55,11 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
     defaultValue: []
   });
   const items = toArray(rawItems ?? []);
-  const itemsRef = React.useRef(items);
-  React.useEffect(() => {
+  const itemsRef = useRef(items);
+  useEffect(() => {
     itemsRef.current = items;
   }, [items]);
-  const normalizeKeyRef = React.useRef(0);
+  const normalizeKeyRef = useRef(0);
   const normalizeItem = (item, keyFallback) => {
     const key = item.key ?? keyFallback ?? `rv-uploader-${normalizeKeyRef.current++}`;
     return item.key === key ? item : {
@@ -122,7 +67,7 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
       key
     };
   };
-  const objectUrlsRef = React.useRef(new Set());
+  const objectUrlsRef = useRef(new Set());
   const createObjectUrl = file => {
     if (typeof URL === 'undefined' || !isFunction(URL.createObjectURL)) return undefined;
     const url = URL.createObjectURL(file);
@@ -136,8 +81,8 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
     URL.revokeObjectURL(url);
     objectUrlsRef.current.delete(url);
   };
-  const prevItemUrlsRef = React.useRef(new Set());
-  React.useEffect(() => {
+  const prevItemUrlsRef = useRef(new Set());
+  useEffect(() => {
     const current = new Set();
     items.forEach(item => {
       if (isString(item.url)) {
@@ -151,7 +96,7 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
     prevItemUrlsRef.current = current;
   }, [items]);
-  React.useEffect(() => {
+  useEffect(() => {
     return () => {
       objectUrlsRef.current.forEach(url => {
         if (typeof URL !== 'undefined' && isFunction(URL.revokeObjectURL)) {
@@ -172,14 +117,14 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const maxCountValue = Math.max(0, Math.floor(parseNumber(maxCount, Number.MAX_VALUE)));
   const maxSizeValue = normalizeMaxSize(maxSize, Number.MAX_VALUE);
   const sizeValue = parseNumber(previewSize, tokens.size);
-  const idRef = React.useRef(0);
-  const [tasks, setTasks] = React.useState([]);
-  const tasksRef = React.useRef(tasks);
-  React.useEffect(() => {
+  const idRef = useRef(0);
+  const [tasks, setTasks] = useState([]);
+  const tasksRef = useRef(tasks);
+  useEffect(() => {
     tasksRef.current = tasks;
   }, [tasks]);
-  const [previewVisible, setPreviewVisible] = React.useState(false);
-  const [previewIndex, setPreviewIndex] = React.useState(0);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState(0);
   const imageFiles = items.filter(item => isImageFile(item, isImageUrl?.(item)));
   const previewImages = imageFiles.map(item => item.source ?? item.url ?? item.thumbnail).filter(value => value !== null && value !== undefined);
   const handleWebFiles = async files => {
@@ -252,10 +197,10 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
       })();
     });
   };
-  const webInputRef = React.useRef(null);
-  const webHandlerRef = React.useRef(() => {});
+  const webInputRef = useRef(null);
+  const webHandlerRef = useRef(() => {});
   webHandlerRef.current = handleWebFiles;
-  React.useEffect(() => {
+  useEffect(() => {
     if (Platform.OS !== 'web') return;
     if (typeof document === 'undefined') return;
     const input = document.createElement('input');
@@ -284,7 +229,7 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     };
   }, []);
-  React.useEffect(() => {
+  useEffect(() => {
     const input = webInputRef.current;
     if (!input) return;
     input.accept = accept;
@@ -305,17 +250,20 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     if (!onUpload) return;
     Promise.resolve(onUpload()).then(result => {
-      const next = toArray(result);
+      if (!result) return;
+      const next = Array.isArray(result) ? result : [result];
       if (!next.length) return;
       updateItems(prev => {
         const available = maxCountValue > 0 ? Math.max(0, maxCountValue - prev.length) : next.length;
         if (available <= 0) return prev;
         return [...prev, ...next.slice(0, available).map(item => normalizeItem(item))];
       });
-    }).catch(() => {});
+    }).catch(error => {
+      if (typeof __DEV__ !== 'undefined' && __DEV__) console.warn('[Uploader] onUpload rejected:', error);
+    });
   };
   const closeImagePreview = () => setPreviewVisible(false);
-  React.useImperativeHandle(ref, () => ({
+  useImperativeHandle(ref, () => ({
     chooseFile,
     closeImagePreview
   }), [chooseFile]);
@@ -409,10 +357,10 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
     style: styles.placeholder
   }, /*#__PURE__*/React.createElement(Text, {
     style: styles.placeholderIcon
-  }, "FILE"), name ? /*#__PURE__*/React.createElement(Text, {
+  }, "FILE"), name && /*#__PURE__*/React.createElement(Text, {
     style: placeholderNameStyle,
     numberOfLines: 1
-  }, name) : null);
+  }, name));
   const renderDelete = (onPress, testID) => deleteRender ? deleteRender(onPress) : /*#__PURE__*/React.createElement(Pressable, {
     hitSlop: 8,
     onPress: onPress,
@@ -438,7 +386,7 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, previewImage ? /*#__PURE__*/React.createElement(React.Fragment, null, items.map((item, index) => {
     const isImage = isImageFile(item, isImageUrl?.(item));
     const source = resolveSource(item, isImage);
-    const fileName = item.file?.name ?? item.filename ?? item.url ?? '';
+    const fileName = typeof item.file?.name === 'string' ? item.file.name : typeof item.url === 'string' ? item.url : typeof item.thumbnail === 'string' ? item.thumbnail : '';
     return /*#__PURE__*/React.createElement(View, {
       key: item.key ?? index,
       style: boxStyle,
@@ -453,12 +401,12 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
       source: source,
       style: styles.image,
       fit: imageFit
-    }) : renderPlaceholder(fileName), previewCoverRender ? /*#__PURE__*/React.createElement(View, {
+    }) : renderPlaceholder(fileName), previewCoverRender && /*#__PURE__*/React.createElement(View, {
       style: styles.cover,
       pointerEvents: "none"
-    }, previewCoverRender(item)) : null, renderStatus(item.status), deletable ? /*#__PURE__*/React.createElement(View, {
+    }, previewCoverRender(item)), renderStatus(item.status), deletable && /*#__PURE__*/React.createElement(View, {
       style: deleteStyle
-    }, renderDelete(() => handleDelete(item, index), `rv-uploader-delete-${index}`)) : null));
+    }, renderDelete(() => handleDelete(item, index), `rv-uploader-delete-${index}`))));
   }), tasks.map(task => /*#__PURE__*/React.createElement(View, {
     key: `task-${task.id}`,
     style: boxStyle,
@@ -471,9 +419,9 @@ const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     style: styles.image,
     fit: imageFit
-  }) : renderPlaceholder(task.file?.name), renderStatus(task.status), task.status !== 'pending' ? /*#__PURE__*/React.createElement(View, {
+  }) : renderPlaceholder(task.file?.name), renderStatus(task.status), task.status !== 'pending' && /*#__PURE__*/React.createElement(View, {
     style: deleteStyle
-  }, renderDelete(() => removeTask(task.id), `rv-uploader-task-delete-${task.id}`)) : null)))) : null, canShowUpload ? /*#__PURE__*/React.createElement(Pressable, {
+  }, renderDelete(() => removeTask(task.id), `rv-uploader-task-delete-${task.id}`)))))) : null, canShowUpload ? /*#__PURE__*/React.createElement(Pressable, {
     style: ({
       pressed
     }) => [styles.upload, boxStyle, frameStyle, pressed && styles.pressed, uploadDisabled && styles.disabled],

package/dist/es/components/uploader/utils.js

@@ -0,0 +1,60 @@
+import { isImageUrlString, isFunction, isUndefined, parseNumber } from '../../utils';
+export const isImageFile = (item, forced) => {
+  if (forced !== undefined) return forced;
+  if (item.file?.type) return item.file.type.indexOf('image') === 0;
+  return isImageUrlString(item.url ?? item.thumbnail ?? '');
+};
+export const resolveSource = (item, isImage) => {
+  if (!isImage) return;
+  if (item.source) return item.source;
+  const uri = item.thumbnail ?? item.url;
+  return uri ? {
+    uri
+  } : undefined;
+};
+export const normalizeMaxSize = (maxSize, fallback) => {
+  if (isFunction(maxSize)) return maxSize;
+  return parseNumber(maxSize, fallback);
+};
+export const filterFiles = (files, maxSize) => {
+  const valid = [];
+  const invalid = [];
+  files.forEach(file => {
+    ;
+    ((isFunction(maxSize) ? maxSize(file) : file.size > maxSize) ? invalid : valid).push(file);
+  });
+  return {
+    valid,
+    invalid
+  };
+};
+export const readFileContent = async (file, resultType, createObjectUrl) => {
+  if (file?.type?.indexOf('image') === 0) {
+    return createObjectUrl(file);
+  }
+  if (resultType === 'file') return undefined;
+  if (isUndefined(FileReader)) {
+    return undefined;
+  }
+  return await new Promise(resolve => {
+    const reader = new FileReader();
+    reader.onload = event => {
+      const result = event.target?.result;
+      resolve(typeof result === 'string' ? result : undefined);
+    };
+    reader.onerror = () => resolve(undefined);
+    if (resultType === 'dataUrl') {
+      reader.readAsDataURL(file);
+    } else {
+      reader.readAsText(file);
+    }
+  });
+};
+export const processBeforeRead = async (file, files, beforeRead) => {
+  if (!beforeRead) return file;
+  try {
+    return await beforeRead(file, files);
+  } catch {
+    return false;
+  }
+};

package/dist/es/components/water-mark/WaterMark.js

@@ -1,7 +1,7 @@
 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, { useEffect, useMemo, useRef, useState } from 'react';
 import { Image, Text, View, useWindowDimensions } from 'react-native';
-import { isFiniteNumber, isString } from '../../utils/validate';
+import { isFiniteNumber, isString } from '../../utils';
 import { useWaterMarkTokens } from './tokens';
 const WaterMark = props => {
   const {
@@ -32,11 +32,11 @@ const WaterMark = props => {
   const zIndex = resolveFiniteNumber(zIndexProp, tokens.defaults.zIndex);
   const fullPage = fullPageProp ?? tokens.defaults.fullPage;
   const window = useWindowDimensions();
-  const [layoutSize, setLayoutSize] = React.useState({
+  const [layoutSize, setLayoutSize] = useState({
     width: 0,
     height: 0
   });
-  const lastLayoutRef = React.useRef({
+  const lastLayoutRef = useRef({
     width: 0,
     height: 0
   });
@@ -78,7 +78,7 @@ const WaterMark = props => {
       height: nextHeight
     });
   };
-  React.useEffect(() => {
+  useEffect(() => {
     if (!fullPage) return;
     if (!isFiniteNumber(window.width) || !isFiniteNumber(window.height)) return;
     if (window.width <= 0 || window.height <= 0) return;
@@ -87,39 +87,39 @@ const WaterMark = props => {
       height: window.height
     });
   }, [fullPage, onLayoutCalculated, window.width, window.height]);
-  const zIndexStyle = React.useMemo(() => ({
+  const zIndexStyle = useMemo(() => ({
     zIndex
   }), [zIndex]);
-  const cellStyle = React.useMemo(() => ({
+  const cellStyle = useMemo(() => ({
     width: cellWidth,
     height: cellHeight
   }), [cellWidth, cellHeight]);
-  const oddRowStyle = React.useMemo(() => ({
+  const oddRowStyle = useMemo(() => ({
     paddingLeft: cellWidth / 2
   }), [cellWidth]);
-  const markStyle = React.useMemo(() => ({
+  const markStyle = useMemo(() => ({
     width: markWidth,
     height: markHeight,
     transform: [{
       rotate: `${resolvedRotate}deg`
     }]
   }), [markHeight, markWidth, resolvedRotate]);
-  const imageStyle = React.useMemo(() => ({
+  const imageStyle = useMemo(() => ({
     width: markWidth,
     height: markHeight,
     opacity: resolvedOpacity
   }), [markHeight, markWidth, resolvedOpacity]);
-  const textBaseStyle = React.useMemo(() => ({
+  const textBaseStyle = useMemo(() => ({
     fontSize: normalizedFontSize,
     color: resolvedColor,
     opacity: resolvedOpacity,
     fontFamily: font?.family,
     fontWeight: font?.weight
   }), [font?.family, font?.weight, normalizedFontSize, resolvedColor, resolvedOpacity]);
-  const rowIndexes = React.useMemo(() => Array.from({
+  const rowIndexes = useMemo(() => Array.from({
     length: rows
   }, (_, i) => i), [rows]);
-  const colIndexes = React.useMemo(() => Array.from({
+  const colIndexes = useMemo(() => Array.from({
     length: cols
   }, (_, i) => i), [cols]);
   return /*#__PURE__*/React.createElement(View, _extends({

package/dist/es/design-system/ThemeProvider.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ThemeContext } from './ThemeContext';
 import { createTokens } from './tokens';
 import { isObject } from '../utils/validate';
@@ -9,7 +9,7 @@ export const ThemeProvider = ({
   value,
   children
 }) => {
-  const resolved = React.useMemo(() => {
+  const resolved = useMemo(() => {
     const foundations = isThemeTokens(value) ? value : createTokens(value?.foundations);
     const components = !isThemeTokens(value) ? value?.components : undefined;
     return {

package/dist/es/design-system/createComponentTokensHook.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { deepMerge } from '../utils/deepMerge';
 import { useTheme } from './useTheme';
 export const createComponentTokensHook = (key, createBaseTokens) => {
@@ -8,7 +8,7 @@ export const createComponentTokensHook = (key, createBaseTokens) => {
       components
     } = useTheme();
     const componentOverrides = components?.[key];
-    return React.useMemo(() => {
+    return useMemo(() => {
       const base = createBaseTokens(foundations);
       const merged = componentOverrides && overrides ? deepMerge(componentOverrides, overrides) : componentOverrides ?? overrides;
       return merged ? deepMerge(base, merged) : base;

package/dist/es/design-system/tokens.js

@@ -84,6 +84,7 @@ export const defaultFoundations = {
     none: 0,
     xxs: 2,
     xs: 4,
+    ssm: 6,
     sm: 8,
     md: 12,
     lg: 16,

package/dist/es/design-system/useTheme.js

@@ -1,3 +1,3 @@
-import React from 'react';
+import { useContext } from 'react';
 import { ThemeContext } from './ThemeContext';
-export const useTheme = () => React.useContext(ThemeContext);
+export const useTheme = () => useContext(ThemeContext);

package/dist/es/hooks/aria/useAriaListBox.js

@@ -1,17 +1,33 @@
-import * as React from 'react';
+import { useMemo, useRef } from 'react';
 import { useListBox } from '@react-native-aria/listbox';
 import { useListState } from '@react-stately/list';
 export const useAriaListBox = props => {
-  const ref = React.useRef(null);
-  const state = useListState(props);
+  const ref = useRef(null);
+  const {
+    label,
+    ...rest
+  } = props;
+  const resolvedProps = useMemo(() => {
+    if (label == null) return rest;
+    const ariaLabel = typeof label === 'string' ? label : undefined;
+    return {
+      ...rest,
+      ...(ariaLabel ? {
+        'aria-label': ariaLabel
+      } : null)
+    };
+  }, [label, rest]);
+  const state = useListState(resolvedProps);
   const {
     listBoxProps,
     labelProps
-  } = useListBox(props, state, ref);
+  } = useListBox(resolvedProps, state, ref);
+  const resolvedListBoxProps = useMemo(() => listBoxProps, [listBoxProps]);
+  const resolvedLabelProps = useMemo(() => labelProps, [labelProps]);
   return {
     state,
-    listBoxProps,
-    labelProps,
+    listBoxProps: resolvedListBoxProps,
+    labelProps: resolvedLabelProps,
     ref
   };
 };

package/dist/es/hooks/aria/useAriaOverlay.js

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import { useMemo, useRef } from 'react';
 import { useOverlay } from '@react-native-aria/overlays';
+import { mergeProps } from '@react-native-aria/utils';
 export const useAriaOverlay = ({
   isOpen,
   onClose,
@@ -7,7 +8,7 @@ export const useAriaOverlay = ({
   shouldCloseOnInteractOutside,
   overlayProps: overlayPropOverrides
 }) => {
-  const overlayRef = React.useRef(null);
+  const overlayRef = useRef(null);
   const {
     overlayProps
   } = useOverlay({
@@ -16,11 +17,9 @@ export const useAriaOverlay = ({
     isDismissable,
     shouldCloseOnInteractOutside
   }, overlayRef);
+  const resolvedOverlayProps = useMemo(() => mergeProps(overlayProps ?? {}, overlayPropOverrides ?? {}), [overlayPropOverrides, overlayProps]);
   return {
     overlayRef,
-    overlayProps: {
-      ...(overlayProps ?? {}),
-      ...(overlayPropOverrides ?? {})
-    }
+    overlayProps: resolvedOverlayProps
   };
 };

package/dist/es/hooks/aria/useAriaPress.js

@@ -1,10 +1,18 @@
+import { useMemo } from 'react';
+import { Platform } from 'react-native';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
 import { mergeProps } from '@react-native-aria/utils';
+const mergePropsCompat = (...args) => {
+  if (typeof mergeProps === 'function') {
+    return mergeProps(...args);
+  }
+  return Object.assign({}, ...args);
+};
 export const useAriaPress = ({
   disabled = false,
-  allowHover = true,
-  allowFocus = true,
+  allowHover = Platform.OS === 'web',
+  allowFocus = Platform.OS === 'web',
   extraProps,
   ...pressEvents
 } = {}) => {
@@ -21,36 +29,42 @@ export const useAriaPress = ({
   } = useHover({
     isDisabled: disabled || !allowHover
   });
+  const useFocusCompat = useFocus;
   const {
     isFocused,
     focusProps
-  } = useFocus({
+  } = useFocusCompat({
     isDisabled: disabled
   });
+  const useFocusRingCompat = useFocusRing;
   const {
     focusProps: focusRingProps,
     isFocusVisible
-  } = useFocusRing({
+  } = useFocusRingCompat({
     isDisabled: disabled
   });
-  let interactionProps = pressProps;
-  if (allowHover) {
-    interactionProps = mergeProps(interactionProps, hoverProps);
-  }
-  if (allowFocus && !disabled) {
-    interactionProps = mergeProps(interactionProps, focusProps, focusRingProps);
-  }
-  if (extraProps) {
-    interactionProps = mergeProps(interactionProps, extraProps);
-  }
+  const interactionProps = useMemo(() => {
+    let merged = pressProps;
+    if (allowHover) {
+      merged = mergePropsCompat(merged, hoverProps);
+    }
+    if (allowFocus && !disabled) {
+      merged = mergePropsCompat(merged, focusProps, focusRingProps);
+    }
+    if (extraProps) {
+      merged = mergePropsCompat(merged, extraProps);
+    }
+    return merged;
+  }, [allowFocus, allowHover, disabled, extraProps, focusProps, focusRingProps, hoverProps, pressProps]);
+  const states = useMemo(() => ({
+    hovered: !!isHovered,
+    pressed: !!isPressed,
+    focused: !!isFocused,
+    focusVisible: !!isFocusVisible,
+    disabled: !!disabled
+  }), [disabled, isFocusVisible, isFocused, isHovered, isPressed]);
   return {
     interactionProps,
-    states: {
-      hovered: !!isHovered,
-      pressed: !!isPressed,
-      focused: !!isFocused,
-      focusVisible: !!isFocusVisible,
-      disabled: !!disabled
-    }
+    states
   };
 };

package/dist/es/hooks/aria/useAriaToggle.js

@@ -1,15 +1,16 @@
-import * as React from 'react';
+import { useMemo, useRef } from 'react';
 import { useToggle } from '@react-native-aria/toggle';
 import { useToggleState } from '@react-stately/toggle';
 export const useAriaToggle = props => {
-  const inputRef = props.inputRef ?? React.useRef(null);
+  const inputRef = props.inputRef ?? useRef(null);
   const state = useToggleState(props);
   const {
     inputProps
   } = useToggle(props, state, inputRef);
+  const resolvedInputProps = useMemo(() => inputProps, [inputProps]);
   return {
     state,
-    inputProps,
+    inputProps: resolvedInputProps,
     inputRef
   };
 };