@jobber/components-native 0.91.0 → 0.91.2

package/src/InputCurrency/InputCurrency.tsx

@@ -130,7 +130,7 @@ const computeDisplayFromNumericInput = (
   }
 };
 
-export function InputCurrency(props: InputCurrencyProps): JSX.Element {
+export function InputCurrency(props: InputCurrencyProps) {
   const {
     showCurrencySymbol = true,
     maxDecimalPlaces = 5,

package/src/InputDate/InputDate.tsx

@@ -111,7 +111,7 @@ const display = Platform.OS === "ios" ? "inline" : "default";
 /**
  * Allow users to select a date using the device date picker.
  */
-export function InputDate(props: InputDateProps): JSX.Element {
+export function InputDate(props: InputDateProps) {
   if (props.name) {
     return (
       <FormField<Date>
@@ -152,7 +152,7 @@ function InternalInputDate({
   onChange,
   accessibilityLabel,
   accessibilityHint,
-}: InputDateProps): JSX.Element {
+}: InputDateProps) {
   const [showPicker, setShowPicker] = useState(false);
   const { t, locale, formatDate } = useAtlantisI18n();
 

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -138,7 +138,7 @@ export function InputFieldWrapper({
   toolbarVisibility = "while-editing",
   loading = false,
   loadingType = "spinner",
-}: InputFieldWrapperProps): JSX.Element {
+}: InputFieldWrapperProps) {
   fieldAffixRequiredPropsCheck([prefix, suffix]);
   const handleClear = onClear ?? noopClear;
   warnIfClearActionWithNoOnClear(onClear, showClearAction);

package/src/InputFieldWrapper/components/ClearAction/ClearAction.tsx

@@ -15,7 +15,7 @@ interface ClearActionProps {
 export function ClearAction({
   onPress,
   hasMarginRight = false,
-}: ClearActionProps): JSX.Element {
+}: ClearActionProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
 

package/src/InputFieldWrapper/components/Prefix/Prefix.tsx

@@ -27,7 +27,7 @@ export function PrefixLabel({
   inputInvalid,
   label,
   styleOverride,
-}: PrefixLabelProps): JSX.Element {
+}: PrefixLabelProps) {
   const styles = useStyles();
   const typographyStyles = useTypographyStyles();
 
@@ -80,7 +80,7 @@ export function PrefixIcon({
   disabled,
   inputInvalid,
   icon,
-}: PrefixIconProps): JSX.Element {
+}: PrefixIconProps) {
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();
 

package/src/InputFieldWrapper/components/Suffix/Suffix.tsx

@@ -29,7 +29,7 @@ export function SuffixLabel({
   label,
   hasLeftMargin = true,
   styleOverride,
-}: SuffixLabelProps): JSX.Element {
+}: SuffixLabelProps) {
   const styles = useStyles();
   const typographyStyles = useTypographyStyles();
 
@@ -86,7 +86,7 @@ export function SuffixIcon({
   icon,
   hasLeftMargin = false,
   onPress,
-}: SuffixIconProps): JSX.Element {
+}: SuffixIconProps) {
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();
 

package/src/InputPassword/InputPassword.tsx

@@ -23,7 +23,7 @@ export interface InputPasswordProps
 function InputPasswordInternal(
   { usePrivacyEye = true, ...props }: InputPasswordProps,
   ref: Ref<InputTextRef>,
-): JSX.Element {
+) {
   const { t } = useAtlantisI18n();
   const [passwordHidden, setPasswordHidden] = useState(true);
   const [privacyEye, setPrivacyEye] = useState<IconNames>("eye");

package/src/InputPressable/InputPressable.tsx

@@ -126,7 +126,7 @@ export function InputPressableInternal(
     focused,
   }: InputPressableProps,
   ref: Ref<InputPressableRef>,
-): JSX.Element {
+) {
   const hasValue = !!value;
 
   const placeholderMode = getPlaceholderMode(showMiniLabel, value);

package/src/InputSearch/components/FilterButton.tsx

@@ -10,7 +10,7 @@ interface FilterButtonProps {
 export function FilterButton({
   accessibilityLabel,
   onClick,
-}: FilterButtonProps): JSX.Element {
+}: FilterButtonProps) {
   return (
     <IconButton
       onPress={() => {

package/src/InputText/context/InputAccessoriesProvider.tsx

@@ -16,7 +16,7 @@ export function InputAccessoriesProvider({
   children,
 }: {
   readonly children: ReactNode;
-}): JSX.Element {
+}) {
   const inputAccessoryID = useRef(v4()).current;
   const {
     focusedInput,

package/src/InputTime/InputTime.tsx

@@ -99,7 +99,7 @@ function formatInvalidState(
   return Boolean(error);
 }
 
-export function InputTime(props: InputTimeProps): JSX.Element {
+export function InputTime(props: InputTimeProps) {
   if (props.name) {
     return (
       <FormField name={props.name} validations={props.validations}>
@@ -134,7 +134,7 @@ function InternalInputTime({
   showMiniLabel = true,
   onChange,
   showIcon = true,
-}: InputTimeProps): JSX.Element {
+}: InputTimeProps) {
   const [showPicker, setShowPicker] = useState(false);
   const { t, formatTime } = useAtlantisI18n();
   const { timeZone, timeFormat } = useAtlantisContext();

package/src/Menu/Menu.tsx

@@ -20,7 +20,7 @@ import { useAtlantisContext } from "../AtlantisContext";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
-export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
+export function Menu({ menuOptions, customActivator }: MenuProps) {
   const [open, setOpen] = useState<boolean>(false);
   const [menuPosition, setMenuPosition] = useState<object>();
   const activatorLayout = useRef<LayoutRectangle>();

package/src/Menu/components/MenuOption/MenuOption.tsx

@@ -17,7 +17,7 @@ export function MenuOption({
   textTransform = "capitalize",
   onPress,
   setOpen,
-}: MenuOptionInternalProps): JSX.Element {
+}: MenuOptionInternalProps) {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "heading";
   const styles = useStyles();

package/src/Menu/components/Overlay/Overlay.tsx

@@ -3,7 +3,7 @@ import { Pressable, View } from "react-native";
 import { useStyles } from "./Overlay.style";
 import type { OverlayProp } from "../../types";
 
-export function Overlay({ setOpen }: OverlayProp): JSX.Element {
+export function Overlay({ setOpen }: OverlayProp) {
   const styles = useStyles();
 
   return (

package/src/Menu/types.ts

@@ -1,4 +1,5 @@
 import type { IconColorNames, IconNames } from "@jobber/design";
+import type { ReactElement } from "react";
 import type { TextAlign } from "../Typography";
 
 export interface MenuOptionProps {
@@ -17,7 +18,7 @@ export interface MenuOptionInternalProps extends MenuOptionProps {
 
 export interface MenuProps {
   readonly menuOptions?: MenuOptionProps[];
-  readonly customActivator?: JSX.Element;
+  readonly customActivator?: ReactElement;
 }
 
 export interface OverlayProp {

package/src/ProgressBar/ProgressBar.tsx

@@ -17,7 +17,7 @@ export function ProgressBar({
   header,
   variation = "progress",
   size = "base",
-}: ProgressBarProps): JSX.Element {
+}: ProgressBarProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();

package/src/ProgressBar/ProgressBarInner.tsx

@@ -14,7 +14,7 @@ export function ProgressBarInner({
   width,
   // animationDuration = 0,
   color,
-}: ProgressBarInnerProps): JSX.Element {
+}: ProgressBarInnerProps) {
   // Animation breaking on Android
   // const [animatedOpacity] = useTiming({
   //   duration: animationDuration,

package/src/Select/Select.tsx

@@ -110,7 +110,7 @@ export function Select({
   accessibilityLabel,
   name,
   testID,
-}: SelectProps): JSX.Element {
+}: SelectProps) {
   const { field, error } = useFormController({
     name,
     validations,
@@ -243,6 +243,6 @@ function getTestID(testID?: string): string {
   return "ATL-Select";
 }
 
-export function Option({ children }: SelectOption): JSX.Element {
+export function Option({ children }: SelectOption) {
   return <>{children}</>;
 }

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.tsx

@@ -19,7 +19,7 @@ export function SelectDefaultPicker({
   children,
   options,
   onChange,
-}: SelectDefaultPickerProps): JSX.Element {
+}: SelectDefaultPickerProps) {
   const [show, setShow] = useState(false);
   const { t } = useAtlantisI18n();
   const selectedLanguage = options.find(option => option.isActive);

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.tsx

@@ -12,7 +12,7 @@ export function SelectDefaultPicker({
   options,
   disabled,
   onChange,
-}: SelectDefaultPickerProps): JSX.Element {
+}: SelectDefaultPickerProps) {
   const selectedItem = options.find(option => option.isActive);
   const pickerRef = useRef<Picker<string>>(null);
   const { tokens } = useAtlantisTheme();

package/src/Select/components/SelectInternalPicker/SelectInternalPicker.tsx

@@ -10,7 +10,7 @@ export function SelectInternalPicker({
   options,
   disabled,
   onChange,
-}: SelectInternalPickerProps): JSX.Element {
+}: SelectInternalPickerProps) {
   if (disabled) return <>{children}</>;
 
   if (isIOS14AndUp()) {

package/src/Select/components/SelectPressable/SelectPressable.tsx

@@ -13,10 +13,7 @@ type SelectPressableProps = Pick<SelectInternalPickerProps, "children"> &
  * screen-reader is being used to avoid screen-readers from ignoring the press
  * on the MenuView
  */
-export function SelectPressable({
-  children,
-  onPress,
-}: SelectPressableProps): JSX.Element {
+export function SelectPressable({ children, onPress }: SelectPressableProps) {
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
   const styles = useStyles();
   if (isScreenReaderEnabled) return <>{children}</>;

package/src/StatusLabel/StatusLabel.tsx

@@ -37,7 +37,7 @@ export function StatusLabel({
   text,
   alignment = "end",
   status = "success",
-}: StatusLabelProps): JSX.Element {
+}: StatusLabelProps) {
   const styles = useStyles();
 
   return (

package/src/Switch/Switch.tsx

@@ -20,7 +20,7 @@ interface WithLabelProps extends BaseSwitchProps {
 
 export type SwitchProps = XOR<BaseSwitchProps, WithLabelProps>;
 
-export function Switch(props: SwitchProps): JSX.Element {
+export function Switch(props: SwitchProps) {
   const switchProps: SwitchProps = {
     ...props,
     accessibilityLabel: props.accessibilityLabel || props.label,

package/src/Switch/components/BaseSwitch/BaseSwitch.tsx

@@ -43,7 +43,7 @@ export function BaseSwitch({
   disabled = false,
   accessibilityLabel,
   name,
-}: BaseSwitchProps): JSX.Element {
+}: BaseSwitchProps) {
   const { field } = useFormController({
     name,
     value: value ?? defaultValue,

package/src/Text/Text.tsx

@@ -143,7 +143,7 @@ export function Text({
   underline,
   selectable,
   onTextLayout,
-}: TextProps): JSX.Element {
+}: TextProps) {
   const accessibilityRole: TextAccessibilityRole = "text";
 
   return (

package/src/TextList/TextList.tsx

@@ -44,7 +44,7 @@ export function TextList({
   emphasis,
   level = "text",
   spacing = "none",
-}: TextListProps): JSX.Element {
+}: TextListProps) {
   const styles = useStyles();
 
   return (

package/src/ThumbnailList/ThumbnailList.tsx

@@ -26,7 +26,7 @@ export function ThumbnailList({
   rowCount = RowCount.TwoRows,
   handleOpenFile,
   createThumbnail,
-}: ThumbnailListProps): JSX.Element {
+}: ThumbnailListProps) {
   const imageList = filterImages(files);
   const styles = useStyles();
 

package/src/Toast/Toast.tsx

@@ -17,7 +17,7 @@ import { tokens as staticTokens } from "../utils/design";
 const MAX_TOAST_MESSAGE_LENGTH = 60;
 const ANNOUNCEMENT_DELAY = 100;
 
-function DefaultToast({ text1 }: ToastConfigParams<string>): JSX.Element {
+function DefaultToast({ text1 }: ToastConfigParams<string>) {
   const { bottom } = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
   const styles = useStyles();
@@ -56,7 +56,7 @@ export interface JobberToastProps {
   readonly bottomOffset?: number;
 }
 
-export function JobberToast({ bottomOffset }: JobberToastProps): JSX.Element {
+export function JobberToast({ bottomOffset }: JobberToastProps) {
   return <Toast bottomOffset={bottomOffset} config={toastConfig} />;
 }
 

package/src/Typography/Typography.tsx

@@ -174,7 +174,7 @@ function InternalTypography<T extends FontFamily = "base">({
   UNSAFE_style,
   selectable = true,
   onTextLayout,
-}: TypographyProps<T>): JSX.Element {
+}: TypographyProps<T>) {
   const styles = useTypographyStyles();
   const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
   const style: StyleProp<ViewStyle>[] = [

package/src/Typography/TypographyGestureDetector.tsx

@@ -7,8 +7,6 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler";
  * accidental highlighting of text in Android devices
  * https://github.com/software-mansion/react-native-gesture-handler/issues/1372
  */
-export function TypographyGestureDetector(
-  props: PropsWithChildren<unknown>,
-): JSX.Element {
+export function TypographyGestureDetector(props: PropsWithChildren<unknown>) {
   return <GestureDetector {...props} gesture={Gesture.Native()} />;
 }

package/src/utils/test/MockSafeAreaProvider.tsx

@@ -12,7 +12,7 @@ export function MockSafeAreaProvider({
   frame,
   insets,
   children,
-}: MockSafeAreaProviderProps): JSX.Element {
+}: MockSafeAreaProviderProps) {
   const initialFrame: Rect = { x: 0, y: 0, width: 0, height: 0 };
   const initialInsets: EdgeInsets = { bottom: 50, top: 50, left: 0, right: 0 };