diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx index c6d68a362e..dd481eb0cd 100644 --- a/src/components/Appbar/AppbarAction.tsx +++ b/src/components/Appbar/AppbarAction.tsx @@ -7,8 +7,9 @@ import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; import type { IconSource } from '../Icon'; import IconButton from '../IconButton/IconButton'; +import type { Props as IconButtonProps } from '../IconButton/IconButton'; -export type Props = React.ComponentPropsWithoutRef & { +export type Props = React.PropsWithoutRef & { /** * Custom color for action icon. */ diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx index c4249bd18a..4f23dfa542 100644 --- a/src/components/Appbar/AppbarBackAction.tsx +++ b/src/components/Appbar/AppbarBackAction.tsx @@ -9,14 +9,11 @@ import type { import type { AnimatedStyle } from 'react-native-reanimated'; -import type { $Omit } from './../../types'; import AppbarAction from './AppbarAction'; +import type { Props as AppbarActionProps } from './AppbarAction'; import AppbarBackIcon from './AppbarBackIcon'; -export type Props = $Omit< - React.ComponentPropsWithoutRef, - 'icon' -> & { +export type Props = Omit, 'icon'> & { /** * Custom color for back icon. */ diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx index 5270aa271d..0717499fe4 100644 --- a/src/components/Appbar/AppbarContent.tsx +++ b/src/components/Appbar/AppbarContent.tsx @@ -10,7 +10,7 @@ import type { import { modeTextVariant } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { $RemoveChildren, ThemeProp } from '../../types'; +import type { ThemeProp } from '../../types'; import Text from '../Typography/Text'; import type { TextRef } from '../Typography/Text'; @@ -21,7 +21,7 @@ type TitleString = { type TitleElement = { title: React.ReactNode; titleStyle?: never }; -export type Props = $RemoveChildren & { +export type Props = Omit, 'children'> & { // For `title` and `titleStyle` props their types are duplicated due to the generation of documentation. // Appropriate type for them are either `TitleString` or `TitleElement`, depends on `title` type. /** diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx index 1c486f9ccd..f111e1699e 100644 --- a/src/components/Appbar/AppbarHeader.tsx +++ b/src/components/Appbar/AppbarHeader.tsx @@ -5,15 +5,12 @@ import type { ColorValue, StyleProp } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { Appbar } from './Appbar'; -import type { AppbarStyle } from './Appbar'; +import type { AppbarStyle, Props as AppbarProps } from './Appbar'; import { getAppbarBackgroundColor, modeAppbarHeight } from './utils'; import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; -export type Props = Omit< - React.ComponentProps, - 'safeAreaInsets' | 'style' -> & { +export type Props = Omit & { /** * Whether the background color is a dark color. A dark header will render light text and vice-versa. */ diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index dddcf330c0..0dce8acae8 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -19,13 +19,14 @@ import { scheduleOnRN } from 'react-native-worklets'; import useLatestCallback from 'use-latest-callback'; import Button from './Button/Button'; +import type { Props as ButtonProps } from './Button/Button'; import Icon from './Icon'; import type { IconSource } from './Icon'; import Surface from './Surface'; import type { SurfaceStyle } from './Surface'; import Text from './Typography/Text'; import { useInternalTheme } from '../core/theming'; -import type { $RemoveChildren, Elevation, ThemeProp } from '../types'; +import type { Elevation, ThemeProp } from '../types'; const DEFAULT_MAX_WIDTH = 960; @@ -56,7 +57,7 @@ export type Props = Omit & { actions?: Array< { label: string; - } & $RemoveChildren + } & Omit, 'children'> >; /** * Style of banner's inner content. diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 02df81b0b4..5cb529104d 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -17,11 +17,15 @@ import { useLocale } from '../../core/locale'; import { useInternalTheme } from '../../core/theming'; import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext'; import { tokens } from '../../theme/tokens'; -import type { $RemoveChildren, ThemeProp } from '../../types'; +import type { ThemeProp } from '../../types'; import { isKeyboardFocusEvent } from '../../utils/isKeyboardFocusEvent'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; +import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple'; -export type Props = $RemoveChildren & { +export type Props = Omit< + React.PropsWithoutRef, + 'children' +> & { /** * Status of checkbox. */ diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 3bbbe32cf5..35904c2b27 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -5,6 +5,7 @@ import type { GestureResponderEvent, PressableAndroidRippleConfig, StyleProp, + TextProps, TextStyle, ViewProps, } from 'react-native'; @@ -15,7 +16,7 @@ import { getChipColors } from './helpers'; import type { ChipAvatarProps } from './helpers'; import { useInternalTheme } from '../../core/theming'; import { white } from '../../theme/colors'; -import type { EllipsizeProp, ThemeProp } from '../../types'; +import type { ThemeProp } from '../../types'; import hasTouchHandler from '../../utils/hasTouchHandler'; import type { IconSource } from '../Icon'; import Icon from '../Icon'; @@ -140,7 +141,7 @@ export type Props = Omit & { /** * Ellipsize Mode for the children text */ - ellipsizeMode?: EllipsizeProp; + ellipsizeMode?: TextProps['ellipsizeMode']; /** * Specifies the largest possible scale a text font can reach. */ diff --git a/src/components/DataTable/DataTableCell.tsx b/src/components/DataTable/DataTableCell.tsx index ce59206af6..b5842a07c9 100644 --- a/src/components/DataTable/DataTableCell.tsx +++ b/src/components/DataTable/DataTableCell.tsx @@ -7,11 +7,14 @@ import type { GestureResponderEvent, } from 'react-native'; -import type { $RemoveChildren } from '../../types'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; +import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple'; import Text from '../Typography/Text'; -export type Props = $RemoveChildren & { +export type Props = Omit< + React.PropsWithoutRef, + 'children' +> & { /** * Content of the `DataTableCell`. */ diff --git a/src/components/DataTable/DataTableRow.tsx b/src/components/DataTable/DataTableRow.tsx index 51964a5f34..4fa776b3db 100644 --- a/src/components/DataTable/DataTableRow.tsx +++ b/src/components/DataTable/DataTableRow.tsx @@ -8,10 +8,14 @@ import type { } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import type { $RemoveChildren, ThemeProp } from '../../types'; +import type { ThemeProp } from '../../types'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; +import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple'; -export type Props = $RemoveChildren & { +export type Props = Omit< + React.PropsWithoutRef, + 'children' +> & { /** * Content of the `DataTableRow`. */ diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx index aadaed4eb3..f06389d2c3 100644 --- a/src/components/Divider.tsx +++ b/src/components/Divider.tsx @@ -1,10 +1,11 @@ +import type * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import type { StyleProp, ViewStyle } from 'react-native'; +import type { StyleProp, ViewProps, ViewStyle } from 'react-native'; import { useInternalTheme } from '../core/theming'; -import type { $RemoveChildren, ThemeProp } from '../types'; +import type { ThemeProp } from '../types'; -export type Props = $RemoveChildren & { +export type Props = Omit, 'children'> & { /** * @renamed Renamed from 'inset' to 'leftInset` in v5.x * Whether divider has a left inset. diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 52cb5fa3b2..39b49e40f4 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -11,18 +11,22 @@ import Animated, { type AnimatedStyle } from 'react-native-reanimated'; import { getIconButtonColor } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { $RemoveChildren, ThemeProp } from '../../types'; +import type { ThemeProp } from '../../types'; import ActivityIndicator from '../ActivityIndicator'; import CrossFadeIcon from '../CrossFadeIcon'; import Icon from '../Icon'; import type { IconSource } from '../Icon'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; +import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple'; const PADDING = 8; type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal'; -export type Props = Omit<$RemoveChildren, 'style'> & { +export type Props = Omit< + React.PropsWithoutRef, + 'children' | 'style' +> & { /** * Icon to display. */ diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index a6f0181f02..2a54cf97c3 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -6,6 +6,7 @@ import type { NativeSyntheticEvent, StyleProp, TextLayoutEventData, + TextProps, TextStyle, ViewStyle, } from 'react-native'; @@ -13,15 +14,16 @@ import type { import { getLeftStyles, getRightStyles } from './utils'; import type { Style } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types'; +import type { ThemeProp } from '../../types'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; +import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple'; import Text from '../Typography/Text'; type Title = | React.ReactNode | ((props: { selectable: boolean; - ellipsizeMode: EllipsizeProp | undefined; + ellipsizeMode: TextProps['ellipsizeMode']; color: ColorValue; fontSize: number; }) => React.ReactNode); @@ -30,12 +32,15 @@ type Description = | React.ReactNode | ((props: { selectable: boolean; - ellipsizeMode: EllipsizeProp | undefined; + ellipsizeMode: TextProps['ellipsizeMode']; color: ColorValue; fontSize: number; }) => React.ReactNode); -export type Props = $RemoveChildren & { +export type Props = Omit< + React.PropsWithoutRef, + 'children' +> & { /** * Title text for the list item. */ @@ -96,13 +101,13 @@ export type Props = $RemoveChildren & { * * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode) */ - titleEllipsizeMode?: EllipsizeProp; + titleEllipsizeMode?: TextProps['ellipsizeMode']; /** * Ellipsize Mode for the Description. One of `'head'`, `'middle'`, `'tail'`, `'clip'`. * * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode) */ - descriptionEllipsizeMode?: EllipsizeProp; + descriptionEllipsizeMode?: TextProps['ellipsizeMode']; /** * Specifies the largest possible scale a title font can reach. */ diff --git a/src/components/List/utils.ts b/src/components/List/utils.ts index 7b7a868de0..5bce566f90 100644 --- a/src/components/List/utils.ts +++ b/src/components/List/utils.ts @@ -1,13 +1,13 @@ import { StyleSheet } from 'react-native'; -import type { StyleProp, ViewStyle } from 'react-native'; +import type { StyleProp, TextProps, ViewStyle } from 'react-native'; -import type { EllipsizeProp, InternalTheme, ThemeProp } from '../../types'; +import type { InternalTheme, ThemeProp } from '../../types'; type Description = | React.ReactNode | ((props: { selectable: boolean; - ellipsizeMode: EllipsizeProp | undefined; + ellipsizeMode: TextProps['ellipsizeMode']; color: string; fontSize: number; }) => React.ReactNode); diff --git a/src/components/RadioButton/RadioButtonAndroid.tsx b/src/components/RadioButton/RadioButtonAndroid.tsx index b82d793a1e..0add107cf6 100644 --- a/src/components/RadioButton/RadioButtonAndroid.tsx +++ b/src/components/RadioButton/RadioButtonAndroid.tsx @@ -6,10 +6,14 @@ import { RadioButtonContext } from './RadioButtonGroup'; import type { RadioButtonContextType } from './RadioButtonGroup'; import { getSelectionControlColor, handlePress, isChecked } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { $RemoveChildren, ThemeProp } from '../../types'; +import type { ThemeProp } from '../../types'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; +import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple'; -export type Props = $RemoveChildren & { +export type Props = Omit< + React.PropsWithoutRef, + 'children' +> & { /** * Value of the radio button */ diff --git a/src/components/RadioButton/RadioButtonIOS.tsx b/src/components/RadioButton/RadioButtonIOS.tsx index 131e5ce7c7..3dae55684d 100644 --- a/src/components/RadioButton/RadioButtonIOS.tsx +++ b/src/components/RadioButton/RadioButtonIOS.tsx @@ -1,3 +1,4 @@ +import type * as React from 'react'; import { StyleSheet, View } from 'react-native'; import type { GestureResponderEvent } from 'react-native'; @@ -6,11 +7,15 @@ import type { RadioButtonContextType } from './RadioButtonGroup'; import { handlePress, isChecked } from './utils'; import { getSelectionControlIOSColor } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { $RemoveChildren, ThemeProp } from '../../types'; +import type { ThemeProp } from '../../types'; import MaterialCommunityIcon from '../MaterialCommunityIcon'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; +import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple'; -export type Props = $RemoveChildren & { +export type Props = Omit< + React.PropsWithoutRef, + 'children' +> & { /** * Value of the radio button */ diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx index 297825c130..de27e5b603 100644 --- a/src/components/Snackbar.tsx +++ b/src/components/Snackbar.tsx @@ -15,6 +15,7 @@ import { scheduleOnRN } from 'react-native-worklets'; import useLatestCallback from 'use-latest-callback'; import Button from './Button/Button'; +import type { Props as ButtonProps } from './Button/Button'; import type { IconSource } from './Icon'; import IconButton from './IconButton/IconButton'; import MaterialCommunityIcon from './MaterialCommunityIcon'; @@ -23,7 +24,7 @@ import type { SurfaceStyle } from './Surface'; import Text from './Typography/Text'; import { useLocale } from '../core/locale'; import { useInternalTheme } from '../core/theming'; -import type { $RemoveChildren, Elevation, ThemeProp } from '../types'; +import type { Elevation, ThemeProp } from '../types'; export type Props = Omit & { /** @@ -35,7 +36,7 @@ export type Props = Omit & { * - `label` - Label of the action button * - `onPress` - Callback that is called when action button is pressed. */ - action?: $RemoveChildren & { + action?: Omit, 'children'> & { label: string; }; /** diff --git a/src/components/TextInput/TextInputIcon.tsx b/src/components/TextInput/TextInputIcon.tsx index 4fcd7b6e18..012e2f45f9 100644 --- a/src/components/TextInput/TextInputIcon.tsx +++ b/src/components/TextInput/TextInputIcon.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { View } from 'react-native'; import type { StyleProp, ViewStyle } from 'react-native'; @@ -6,8 +5,8 @@ import { ACCESSORY_SIZE } from './constants'; import { styles } from './styles'; import { getIconColor } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { $Omit } from '../../types'; import IconButton from '../IconButton/IconButton'; +import type { Props as IconButtonProps } from '../IconButton/IconButton'; export type TextInputAccessoryProps = { style: StyleProp; @@ -17,7 +16,7 @@ export type TextInputAccessoryProps = { }; export type TextInputIconProps = TextInputAccessoryProps & - $Omit, keyof TextInputAccessoryProps>; + Omit; /** * A component to render a leading / trailing icon in the TextInput diff --git a/src/index.tsx b/src/index.tsx index 8863e2fa20..f46d8e22d8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -147,4 +147,4 @@ export type { Props as SegmentedButtonsProps } from './components/SegmentedButto export type { Props as ListImageProps } from './components/List/ListImage'; export type { Props as TooltipProps } from './components/Tooltip/Tooltip'; -export { type TypescaleKey, type Theme, type Elevation } from './types'; +export { type TypescaleKey, type Theme, type Elevation } from './theme/types'; diff --git a/src/types.tsx b/src/types.tsx deleted file mode 100644 index c84e3915b4..0000000000 --- a/src/types.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import type * as React from 'react'; - -export * from './theme/types'; - -export type $Omit = Pick>; -export type $RemoveChildren> = $Omit< - React.ComponentPropsWithoutRef, - 'children' ->; - -export type EllipsizeProp = 'head' | 'middle' | 'tail' | 'clip';