diff --git a/README.md b/README.md index cd7ae02..40ff493 100644 --- a/README.md +++ b/README.md @@ -239,52 +239,49 @@ For more examples visit our [wiki page](https://github.com/azeezat/react-native- ## Props -| Proptypes | Datatype | Example | -| -------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- | -| label | `string` | Countries | -| placeholder | `string` | Select a country | -| options | `Array` | `[{ name: 'Nigeria', code: 'NG' }, { name: 'Albania', code: 'AL' }]` | -| optionLabel | `string` | `name` | -| optionValue | `string` | `code` | -| error | `string` | `This is a requiredfield` | -| helperText | `string` | `Only few countries are listed` | -| selectedValue | `string` or `Array` | `AL` or `[AL, AX]` | -| onValueChange | `function` | `()=>{}` | -| isMultiple | `Boolean` | `true` | -| isSearchable | `Boolean` | `true` | -| disabled | `Boolean` | `true` | -| dropdownIcon | `React Component` | `Image` or ` Show ` | -| labelStyle | `Object` | `{color: 'red', fontSize: 15, fontWeight: '500'}` | -| placeholderStyle | `Object` | `{color: 'blue', fontSize: 15, fontWeight: '500'}` | -| dropdownStyle | `Object` | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}` | -| dropdownContainerStyle | `Object` | `{backgroundColor: 'red', width: '30%', ...}` | -| dropdownIconStyle | `Object` | `{top: 10 , right: 10, ...}` | -| selectedItemStyle | `Object` | `{fontWeight: '600', color: 'yellow', ...}` | -| multipleSelectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` | -| modalBackgroundStyle | `Object` | `{backgroundColor: 'rgba(196, 198, 246, 0.5)'}` | -| modalOptionsContainerStyle | `Object` | `{padding: 10, backgroundColor: 'cyan',}` | -| modalProps | `ReactNative.ModalProps` | `{supportedOrientations:{['landscape-left', landscape-right']}` | -| dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}` | -| dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:'500'}` | -| dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:'500'}` | -| primaryColor | `string` | `blue` | -| listHeaderComponent | `React Component` | ` You can add any component here ` | -| listFooterComponent | `React Component` | ` You can add any component here ` | -| hideModal | `Boolean` | Use this to hide the modal as needed | -| listComponentStyles | `Object` | `{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}` | -| checkboxComponentStyles | `Object` | `{checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle}` | -| checkboxComponent | `React Component` | `` | -| listControls | `Object` | `{ selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}, hideSelectAll: boolean, emptyListMessage: 'No record found'}` | -| searchControls | `Object` | `{ textInputStyle: ViewStyle \| TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps}` | +| Proptypes | Datatype | Example | +| ------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| label | `string` | Countries | +| placeholder | `string` | Select a country | +| options | `Array` | `[{ name: 'Nigeria', code: 'NG' }, { name: 'Albania', code: 'AL' }]` | +| optionLabel | `string` | `name` | +| optionValue | `string` | `code` | +| error | `string` | `This is a requiredfield` | +| helperText | `string` | `Only few countries are listed` | +| selectedValue | `string` or `Array` | `AL` or `[AL, AX]` | +| onValueChange | `function` | `()=>{}` | +| isMultiple | `Boolean` | `true` | +| isSearchable | `Boolean` | `true` | +| disabled | `Boolean` | `true` | +| dropdownIcon | `React Component` | `Image` or ` Show ` | +| labelStyle | `Object` | `{color: 'red', fontSize: 15, fontWeight: '500'}` | +| placeholderStyle | `Object` | `{color: 'blue', fontSize: 15, fontWeight: '500'}` | +| dropdownStyle | `Object` | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}` | +| dropdownContainerStyle | `Object` | `{backgroundColor: 'red', width: '30%', ...}` | +| dropdownIconStyle | `Object` | `{top: 10 , right: 10, ...}` | +| selectedItemStyle | `Object` | `{fontWeight: '600', color: 'yellow', ...}` | +| multipleSelectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` | +| dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}` | +| dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:'500'}` | +| dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:'500'}` | +| primaryColor | `string` | `blue` | +| listHeaderComponent | `React Component` | ` You can add any component here ` | +| listFooterComponent | `React Component` | ` You can add any component here ` | +| hideModal | `Boolean` | Use this to hide the modal as needed | +| listComponentStyles | `Object` | `{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}` | +| checkboxControls | `Object` | `{checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle, checkboxComponent?: React.ReactNode}` | +| listControls | `Object` | `{ selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}, hideSelectAll: boolean, emptyListMessage: 'No record found'}` | +| searchControls | `Object` | `{ textInputStyle: ViewStyle \| TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps}` | +| modalControls | `Object` | `{ modalBackgroundStyle: ViewStyle, modalOptionsContainerStyle: ViewStyle, modalProps: ModalProps}` | ## Deprecation Notice The following props would be removed in coming releases. -- Individual props `checkboxSize`, `checkboxStyle`, `checkboxLabelStyle` would be replaced with a single object `checkboxComponentStyles` e.g +- Individual props `checkboxSize`, `checkboxStyle`, `checkboxLabelStyle`, `checkboxComponent` would be replaced with a single object `checkboxControls` e.g ```js -checkboxComponentStyles = { +checkboxControls = { checkboxSize: 20, checkboxStyle: { backgroundColor: 'purple', @@ -293,11 +290,12 @@ checkboxComponentStyles = { borderColor: 'red', }, checkboxLabelStyle: { color: 'red', fontSize: 20 }, + checkboxComponent: ... }; ``` -- `searchInputStyle` would now be inside replaced with `textInputStyle` in the `searchControls` object +- `searchInputStyle` would now be replaced with `textInputStyle` in the `searchControls` object ```js searchControls = { @@ -324,6 +322,16 @@ searchControls = { }; ``` +Individual props `modalBackgroundStyle`, `modalOptionsContainerStyle`, `modalProps` would be replaced with a single object `modalControls` + +```js +modalControls={ + modalBackgroundStyle: ViewStyle, + modalOptionsContainerStyle: ViewStyle, + modalProps: ModalProps, //Use this to pass in react-native default modal props +}; +``` + ## Contributing See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index d403b01..33e8214 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -620,4 +620,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 5c80fa76d05da1d4e17685423f650ebe38a55415 -COCOAPODS: 1.12.1 +COCOAPODS: 1.13.0 diff --git a/example/src/App.tsx b/example/src/App.tsx index 1653a25..706f5b3 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -14,19 +14,23 @@ import DropdownSelect from 'react-native-input-select'; import { countries } from './data'; export default function App() { - const [users, setUsers] = useState(''); + const [users, setUsers] = useState([]); const [country, setCountry] = useState(''); - const [gender, setGender] = useState(''); - const [currency, setCurrency] = useState(''); - const [meals, setMeals] = useState(''); + const [gender, setGender] = useState(); + const [currency, setCurrency] = useState([]); + const [meals, setMeals] = useState([]); const [item, setItem] = useState(''); - const [menu, setMenu] = useState(''); + const [menu, setMenu] = useState([]); useEffect(() => { setCurrency(['NGN']); setMenu(['F']); }, []); + const logMovies = async () => { + console.log('You can make an API call when the modal opens.'); + }; + return ( @@ -74,6 +78,9 @@ export default function App() { dropdownErrorTextStyle={{ color: 'red', fontWeight: '500' }} error={gender ? '' : 'Gender is required'} primaryColor={'green'} + modalControls={{ + modalProps: { onShow: () => logMovies() }, + }} /> } - checkboxComponentStyles={{ + checkboxControls={{ checkboxStyle: { backgroundColor: 'green', borderRadius: 30, borderColor: 'green', }, checkboxLabelStyle: { color: 'green', fontSize: 20 }, + checkboxComponent: , }} listControls={{ hideSelectAll: true, @@ -185,12 +194,13 @@ export default function App() { color: 'green', fontWeight: '900', }} - modalBackgroundStyle={{ - backgroundColor: 'rgba(196, 198, 246, 0.5)', + modalControls={{ + modalBackgroundStyle: { + backgroundColor: 'rgba(196, 198, 246, 0.5)', + }, }} helperText="The placeholder has been styled" - checkboxComponent={} - checkboxComponentStyles={{ + checkboxControls={{ checkboxSize: 15, checkboxStyle: { backgroundColor: 'purple', @@ -199,6 +209,7 @@ export default function App() { borderColor: 'red', }, checkboxLabelStyle: { color: 'red', fontSize: 20 }, + checkboxComponent: , }} selectedItemStyle={{ color: 'hotpink', @@ -254,19 +265,21 @@ export default function App() { } - modalOptionsContainerStyle={{ - padding: 10, - backgroundColor: 'cyan', - }} - modalProps={{ - supportedOrientations: [ - 'portrait', - 'portrait-upside-down', - 'landscape', - 'landscape-left', - 'landscape-right', - ], - transparent: false, + modalControls={{ + modalOptionsContainerStyle: { + padding: 10, + backgroundColor: 'cyan', + }, + modalProps: { + supportedOrientations: [ + 'portrait', + 'portrait-upside-down', + 'landscape', + 'landscape-left', + 'landscape-right', + ], + transparent: false, + }, }} listComponentStyles={{ listEmptyComponentStyle: { diff --git a/package.json b/package.json index a6af6a8..e762ab6 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "react-native": "0.63.4", "react-native-builder-bob": "^0.18.2", "release-it": "^14.14.3", - "typescript": "^4.1.3" + "typescript": "^5.3.3" }, "peerDependencies": { "react": "*", diff --git a/src/components/CheckBox/checkbox.types.ts b/src/components/CheckBox/checkbox.types.ts new file mode 100644 index 0000000..5e38d34 --- /dev/null +++ b/src/components/CheckBox/checkbox.types.ts @@ -0,0 +1,10 @@ +import type { ColorValue } from 'react-native'; +import { TCheckboxControls } from 'src/types/index.types'; + +export type CheckboxProps = { + label?: string; + value?: boolean; + disabled?: boolean; + primaryColor?: ColorValue; + onChange?: (value: boolean | string | number) => void; +} & TCheckboxControls; diff --git a/src/components/CheckBox/index.tsx b/src/components/CheckBox/index.tsx index 15012cb..d8af7cf 100644 --- a/src/components/CheckBox/index.tsx +++ b/src/components/CheckBox/index.tsx @@ -2,25 +2,7 @@ import React from 'react'; import { Pressable, Text, StyleSheet, Image, View } from 'react-native'; import { colors } from '../../styles/colors'; import { CHECKBOX_SIZE } from '../../constants'; -import type { CheckboxProps } from './types'; - -/** - * Individual props `checkboxSize`, `checkboxStyle`, `checkboxLabelStyle` would be replaced in future releases - * and replaced with a single object `checkboxComponentStyles` e.g - -```js -const checkboxComponentStyles = { - checkboxSize: 20, - checkboxStyle: { - backgroundColor: 'purple', - borderRadius: 30, - padding: 10, - borderColor: 'red', - }, - checkboxLabelStyle: { color: 'red', fontSize: 20 }, -}; -``` - */ +import type { CheckboxProps } from './checkbox.types'; const CheckBox = ({ label, @@ -32,22 +14,23 @@ const CheckBox = ({ checkboxLabelStyle, checkboxComponentStyles, checkboxComponent, + checkboxControls, onChange, }: CheckboxProps) => { - // const { checkboxSize, checkboxStyle, checkboxLabelStyle } = - // checkboxComponentStyles || undefined; const fillColor = { backgroundColor: disabled ? '#d3d3d3' : value - ? checkboxComponentStyles?.checkboxStyle?.backgroundColor || + ? checkboxControls?.checkboxStyle?.backgroundColor || + checkboxComponentStyles?.checkboxStyle?.backgroundColor || checkboxStyle?.backgroundColor || primaryColor || 'green' : 'white', borderColor: disabled ? colors.disabled - : checkboxComponentStyles?.checkboxStyle?.borderColor || + : checkboxControls?.checkboxStyle?.borderColor || + checkboxComponentStyles?.checkboxStyle?.borderColor || checkboxStyle?.borderColor || styles.checkbox.borderColor, }; @@ -61,20 +44,24 @@ const CheckBox = ({ - {checkboxComponent || ( + {checkboxControls?.checkboxComponent || checkboxComponent || ( diff --git a/src/components/CheckBox/types.ts b/src/components/CheckBox/types.ts deleted file mode 100644 index b3f0bc6..0000000 --- a/src/components/CheckBox/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import type { ColorValue, ViewStyle, TextStyle } from 'react-native'; - -export type CheckboxProps = { - label?: string; - value?: boolean; - disabled?: boolean; - primaryColor?: ColorValue; - checkboxSize?: number; - checkboxStyle?: ViewStyle; - checkboxLabelStyle?: TextStyle; - checkboxComponentStyles?: { - checkboxSize?: number; - checkboxStyle?: ViewStyle; - checkboxLabelStyle?: TextStyle; - }; - checkboxComponent?: React.ReactNode; - onChange?: (value: boolean | string | number) => void; -}; diff --git a/src/components/CustomModal/index.tsx b/src/components/CustomModal/index.tsx index 9243044..bdc2397 100644 --- a/src/components/CustomModal/index.tsx +++ b/src/components/CustomModal/index.tsx @@ -5,37 +5,45 @@ import { SafeAreaView, StyleSheet, TouchableWithoutFeedback, + ModalProps, } from 'react-native'; import { colors } from '../../styles/colors'; +import { TCustomModalControls } from 'src/types/index.types'; const CustomModal = ({ - open, + visible, onRequestClose, - modalBackgroundStyle, - modalOptionsContainerStyle, - modalProps, + modalBackgroundStyle, //kept for backwards compatibility + modalOptionsContainerStyle, //kept for backwards compatibility + modalControls, + modalProps, //kept for backwards compatibility children, -}: any) => { +}: TCustomModalControls & ModalProps) => { return ( onRequestClose()} + visible={visible} + onRequestClose={() => onRequestClose?.()} animationType="fade" - {...modalProps} + {...modalControls?.modalProps} + {...modalProps} //kept for backwards compatibility > onRequestClose()} + onPress={() => onRequestClose?.()} style={[ styles.modalContainer, styles.modalBackgroundStyle, - modalBackgroundStyle, + modalControls?.modalBackgroundStyle || modalBackgroundStyle, ]} > {/* Added this `TouchableWithoutFeedback` wrapper because of the closing modal on expo web */} {}}> {children} diff --git a/src/components/Dropdown/DropdownSectionList.tsx b/src/components/Dropdown/DropdownSectionList.tsx index 197401b..b12c7c6 100644 --- a/src/components/Dropdown/DropdownSectionList.tsx +++ b/src/components/Dropdown/DropdownSectionList.tsx @@ -64,7 +64,7 @@ const DropdownSectionList = ({ const sectionlistRef = useRef>(null); const scrollToLocation = (listIndex: any) => { - sectionlistRef.current?.scrollToLocation({ + sectionlistRef?.current?.scrollToLocation({ sectionIndex: listIndex.sectionIndex, animated: true, itemIndex: listIndex.itemIndex, diff --git a/src/components/Others/index.tsx b/src/components/Others/index.tsx index 11fc4f5..5794b4e 100644 --- a/src/components/Others/index.tsx +++ b/src/components/Others/index.tsx @@ -23,7 +23,11 @@ export const ListEmptyComponent = ({ ); }; -export const ItemSeparatorComponent = ({ itemSeparatorStyle }: any) => { +export const ItemSeparatorComponent = ({ + itemSeparatorStyle, +}: { + itemSeparatorStyle: ViewStyle; +}) => { return ; }; diff --git a/src/index.tsx b/src/index.tsx index 00437da..5ec1a06 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -40,8 +40,8 @@ export const DropdownSelect: React.FC = ({ dropdownHelperTextStyle, selectedItemStyle, multipleSelectedItemStyle, - modalBackgroundStyle, - modalOptionsContainerStyle, + modalBackgroundStyle, // kept for backwards compatibility + modalOptionsContainerStyle, // kept for backwards compatibility searchInputStyle, // kept for backwards compatibility primaryColor, disabled, @@ -53,10 +53,12 @@ export const DropdownSelect: React.FC = ({ listHeaderComponent, listFooterComponent, listComponentStyles, - modalProps, + modalProps, // kept for backwards compatibility hideModal = false, listControls, searchControls, + modalControls, + checkboxControls, ...rest }) => { const [newOptions, setNewOptions] = useState([]); @@ -276,8 +278,9 @@ export const DropdownSelect: React.FC = ({ * Modal *==========================================*/ const handleToggleModal = () => { - if (disabled){ // protecting any toggleModal invocation when Dropdown is disabled by not activating state - return; + if (disabled) { + // protecting any toggleModal invocation when Dropdown is disabled by not activating state + return; } setOpen(!open); setSearchValue(''); @@ -346,11 +349,12 @@ export const DropdownSelect: React.FC = ({ {...rest} /> handleToggleModal()} - modalProps={modalProps} + modalControls={modalControls} + modalProps={modalProps} // kept for backwards compatibility > = ({ checkboxLabelStyle={checkboxLabelStyle} checkboxComponentStyles={checkboxComponentStyles} checkboxComponent={checkboxComponent} + checkboxControls={checkboxControls} listIndex={listIndex} emptyListMessage={listControls?.emptyListMessage} /> diff --git a/src/types/index.types.ts b/src/types/index.types.ts index a64022f..94fd5b4 100644 --- a/src/types/index.types.ts +++ b/src/types/index.types.ts @@ -6,11 +6,15 @@ import type { TextInputProps, } from 'react-native'; -export type DropdownProps = { - placeholder?: string; +export type DropdownProps = CommonDropdownProps & + TDropdownInputProps & + TSearchControls & + TCheckboxControls & + TCustomModalControls & + TListControls; + +export type CommonDropdownProps = { label?: string; - error?: string; - helperText?: string; options: TFlatList | TSectionList; optionLabel?: string; optionValue?: string; @@ -23,6 +27,12 @@ export type DropdownProps = { | boolean[] | number[] | null; +}; + +export type TDropdownInputProps = { + placeholder?: string; + error?: string; + helperText?: string; isMultiple?: boolean; isSearchable?: boolean; dropdownIcon?: React.ReactNode; @@ -35,25 +45,61 @@ export type DropdownProps = { dropdownHelperTextStyle?: TextStyle; selectedItemStyle?: TextStyle; multipleSelectedItemStyle?: TextStyle; - modalBackgroundStyle?: ViewStyle; - modalOptionsContainerStyle?: ViewStyle; - searchInputStyle?: ViewStyle; primaryColor?: ColorValue; disabled?: boolean; + placeholderStyle?: TextStyle; + hideModal?: boolean; +}; + +export type TSearchControls = { + /** @deprecated Use `searchControls = {{textInputStyle: ViewStyle | TextStyle }}` instead.*/ + searchInputStyle?: ViewStyle; + searchControls?: { + textInputStyle?: ViewStyle | TextStyle; + textInputContainerStyle?: ViewStyle; + textInputProps?: TextInputProps; + }; +}; +export type TCheckboxControls = { + /** @deprecated Use `checkboxControls = {{checkboxSize: number }}` instead.*/ checkboxSize?: number; + /** @deprecated Use `checkboxControls = {{checkboxStyle: ViewStyle }}` instead.*/ checkboxStyle?: ViewStyle; + /** @deprecated Use `checkboxControls = {{checkboxLabelStyle: TextStyle }}` instead.*/ checkboxLabelStyle?: TextStyle; + /** @deprecated Use `checkboxControls` instead.*/ checkboxComponentStyles?: { checkboxSize?: number; checkboxStyle?: ViewStyle; checkboxLabelStyle?: TextStyle; }; + /** @deprecated Use `checkboxControls = {{checkboxComponent: }}` instead.*/ checkboxComponent?: React.ReactNode; - placeholderStyle?: TextStyle; + checkboxControls?: { + checkboxSize?: number; + checkboxStyle?: ViewStyle; + checkboxLabelStyle?: TextStyle; + checkboxComponent?: React.ReactNode; + }; +}; + +export type TCustomModalControls = { + /** @deprecated Use `modalControls = {{modalBackgroundStyle: ViewStyle}} instead.*/ + modalBackgroundStyle?: ViewStyle; + /** @deprecated Use `modalControls = {{ modalOptionsContainerStyle: ViewStyle}} instead.*/ + modalOptionsContainerStyle?: ViewStyle; + /** @deprecated Use `modalControls = {{modalProps: ModalProps }}` instead.*/ + modalProps?: ModalProps; + modalControls?: { + modalBackgroundStyle?: ViewStyle; + modalOptionsContainerStyle?: ViewStyle; + modalProps?: ModalProps; + }; +}; + +export type TListControls = { listHeaderComponent?: React.ReactNode; listFooterComponent?: React.ReactNode; - hideModal?: boolean; - modalProps?: ModalProps; listComponentStyles?: { listEmptyComponentStyle?: TextStyle; itemSeparatorStyle?: ViewStyle; @@ -67,11 +113,6 @@ export type DropdownProps = { hideSelectAll?: boolean; emptyListMessage?: string; }; - searchControls?: { - textInputStyle?: ViewStyle | TextStyle; - textInputContainerStyle?: ViewStyle; - textInputProps?: TextInputProps; - }; }; export type TFlatList = TFlatListItem[]; diff --git a/src/utils/index.ts b/src/utils/index.ts index 0ca759e..5f4c88e 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -2,7 +2,7 @@ * Extract property from array */ -export const extractPropertyFromArray = (arr: any, property: string) => { +export const extractPropertyFromArray = (arr: any[], property: string) => { let extractedValue = arr?.map((item: any) => item[property]); return extractedValue; diff --git a/yarn.lock b/yarn.lock index d7b87b9..1a94305 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9610,10 +9610,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA== -typescript@^4.1.3: - version "4.9.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" - integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== +typescript@^5.3.3: + version "5.3.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37" + integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw== ua-parser-js@^0.7.18: version "0.7.35"