@jobber/components-native 0.91.1 → 0.91.2

package/src/EmptyState/EmptyState.tsx

@@ -65,7 +65,7 @@ export function EmptyState({
   primaryAction,
   secondaryAction,
   iconColor = "blue",
-}: EmptyStateProps): JSX.Element {
+}: EmptyStateProps) {
   const styles = useStyles();
 
   return (

package/src/ErrorMessageWrapper/ErrorMessageWrapper.tsx

@@ -34,7 +34,7 @@ export function ErrorMessageWrapper({
   message,
   wrapFor = "default",
   children,
-}: ErrorMessageWrapperProps): JSX.Element {
+}: ErrorMessageWrapperProps) {
   const errorMessageContext = useErrorMessageContext();
   const register = errorMessageContext?.register;
   const unregister = errorMessageContext?.unregister;

package/src/ErrorMessageWrapper/context/ErrorMessageProvider.tsx

@@ -13,9 +13,7 @@ interface ErrorMessageProviderProps {
   readonly children: ReactNode;
 }
 
-export function ErrorMessageProvider({
-  children,
-}: ErrorMessageProviderProps): JSX.Element {
+export function ErrorMessageProvider({ children }: ErrorMessageProviderProps) {
   const [elements, setElements] = useState<
     ErrorMessageContextProps["elements"]
   >({});

package/src/Flex/Flex.tsx

@@ -11,7 +11,7 @@ export function Flex({
   align = "center",
   gap = "base",
   children,
-}: PropsWithChildren<FlexProps>): JSX.Element {
+}: PropsWithChildren<FlexProps>) {
   if (template.length === 1) {
     console.warn("Please use <Content /> component for a stacked layout");
   }
@@ -54,7 +54,7 @@ function Row({
   align = "center",
   gap = "base",
   children,
-}: PropsWithChildren<FlexProps>): JSX.Element {
+}: PropsWithChildren<FlexProps>) {
   return (
     <View testID="ATL-Flex-Row" style={[styles.row, { alignItems: align }]}>
       {Children.map(children, (child, index) => (

package/src/Form/Form.test.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Alert, Keyboard } from "react-native";
 import { Host } from "react-native-portalize";
@@ -94,7 +94,7 @@ interface FormTestProps {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
   readonly initialLoading?: boolean;
   readonly initialValues?: FormFields;
   readonly bannerMessages?: FormBannerMessage[];

package/src/Form/Form.tsx

@@ -34,7 +34,7 @@ import { ErrorMessageProvider } from "../ErrorMessageWrapper";
 export function Form<T extends FieldValues, S>({
   initialLoading,
   ...rest
-}: FormProps<T, S>): JSX.Element {
+}: FormProps<T, S>) {
   const child = initialLoading ? <FormMask /> : <InternalForm {...rest} />;
 
   return (

package/src/Form/components/FormActionBar/FormActionBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import { StyleSheet } from "react-native";
 import Reanimated from "react-native-reanimated";
@@ -18,7 +18,7 @@ export interface FormActionBarProps {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
   readonly secondaryActions?: SecondaryActionProp[];
   readonly setSecondaryActionLoading?: (bool: boolean) => void;
 }
@@ -32,7 +32,7 @@ export function FormActionBar({
   setSaveButtonHeight,
   secondaryActions,
   setSecondaryActionLoading,
-}: FormActionBarProps): JSX.Element {
+}: FormActionBarProps) {
   const styles = useStyles();
 
   const buttonStyle = StyleSheet.flatten([

package/src/Form/components/FormBody/FormBody.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { type ReactElement, useMemo } from "react";
 import { View } from "react-native";
 import { useStyles } from "./FormBody.style";
 import { useScreenInformation } from "../../hooks/useScreenInformation";
@@ -7,7 +7,7 @@ import { FormActionBar } from "../FormActionBar";
 import { tokens } from "../../../utils/design";
 
 interface FormBodyProps extends FormActionBarProps {
-  readonly children: JSX.Element;
+  readonly children: ReactElement;
   readonly shouldRenderActionBar?: boolean;
   readonly saveButtonOffset?: number;
 }
@@ -24,7 +24,7 @@ export function FormBody({
   setSecondaryActionLoading,
   setSaveButtonHeight,
   saveButtonOffset,
-}: FormBodyProps): JSX.Element {
+}: FormBodyProps) {
   const paddingBottom = useBottomPadding();
   const fullViewPadding = useMemo(() => ({ paddingBottom }), [paddingBottom]);
   const styles = useStyles();

package/src/Form/components/FormCache/FormCache.tsx

@@ -14,7 +14,7 @@ export function FormCache<T extends FieldValues>({
   localCacheExclude,
   localCacheKey,
   setLocalCache,
-}: FormCacheProps<T>): JSX.Element {
+}: FormCacheProps<T>) {
   const { control, formState } = useFormContext<T>();
   const { isDirty } = formState;
 

package/src/Form/components/FormErrorBanner/FormErrorBanner.tsx

@@ -6,7 +6,7 @@ import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function FormErrorBanner({
   networkError,
   bannerError,
-}: FormBannerErrors): JSX.Element {
+}: FormBannerErrors) {
   const { t } = useAtlantisI18n();
 
   if (networkError) {

package/src/Form/components/FormMask/FormMask.tsx

@@ -4,7 +4,7 @@ import { useStyles } from "./FormMask.style";
 import { ActivityIndicator } from "../../../ActivityIndicator";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
-export function FormMask(): JSX.Element {
+export function FormMask() {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
 

package/src/Form/components/FormMessage/FormMessage.tsx

@@ -17,7 +17,7 @@ let close: (() => void) | undefined;
  * message to the user. Use `FormMessage.close()` to close the most
  * recent message.
  */
-export const FormMessage = (): JSX.Element => {
+export const FormMessage = () => {
   const [data, setData] = useState<FormMessageData[]>([]);
 
   open = useCallback(

package/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.tsx

@@ -15,7 +15,7 @@ interface FormMessageProps {
 export function InternalFormMessage({
   data,
   onRequestClose,
-}: FormMessageProps): JSX.Element {
+}: FormMessageProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
   const emptyStateData: EmptyStateProps = useMemo(() => {

package/src/Form/components/FormMessageBanner/FormMessageBanner.tsx

@@ -8,9 +8,7 @@ interface FormMessageBannerProps {
   readonly bannerMessages?: FormBannerMessage[];
 }
 
-export function FormMessageBanner({
-  bannerMessages,
-}: FormMessageBannerProps): JSX.Element {
+export function FormMessageBanner({ bannerMessages }: FormMessageBannerProps) {
   return (
     <>
       {bannerMessages?.map((message, index) => (

package/src/Form/components/FormSaveButton/FormSaveButton.tsx

@@ -13,7 +13,7 @@ export function FormSaveButton({
   setSecondaryActionLoading,
   onOpenBottomSheet,
   onCloseBottomSheet,
-}: FormSaveButtonProps): JSX.Element {
+}: FormSaveButtonProps) {
   const { t } = useAtlantisI18n();
   const formContext = useFormContext();
   const buttonActions = useButtonGroupAction(secondaryActions);

package/src/Form/types.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject, RefObject } from "react";
+import type { MutableRefObject, ReactElement, RefObject } from "react";
 import type {
   ControllerProps,
   DefaultValues,
@@ -142,7 +142,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
-  ) => JSX.Element;
+  ) => ReactElement;
 
   /**
    * Adding a key will save a local copy of the form data that will be used to

package/src/FormField/FormField.tsx

@@ -39,7 +39,7 @@ export function FormField<T>({
   children,
   defaultValue: value,
   validations,
-}: FormFieldProps<T>): JSX.Element {
+}: FormFieldProps<T>) {
   const { error, field } = useFormController({
     name,
     value,

package/src/FormatFile/FormatFile.tsx

@@ -88,7 +88,7 @@ function FormatFileContent({
   styleInGrid,
   onUploadComplete,
   isMedia,
-}: FormatFileContentProps): JSX.Element {
+}: FormatFileContentProps) {
   const styles = useStyles();
 
   return (
@@ -204,7 +204,7 @@ export function FormatFile<T extends File | FileUpload>({
   showFileTypeIndicator = true,
   createThumbnail,
   onPreviewPress,
-}: FormatFileProps<T>): JSX.Element {
+}: FormatFileProps<T>) {
   const onTapModified = onTap ? () => onTap(file) : () => undefined;
 
   const formattedFile = parseFile(file, showFileTypeIndicator);
@@ -236,7 +236,7 @@ function FormatFileInternal({
   onPreviewPress,
   testID,
   createThumbnail: createThumbnailProp,
-}: FormatFileInternalProps): JSX.Element {
+}: FormatFileInternalProps) {
   const [showOverlay, setShowOverlay] = useState<boolean>(
     file.status !== StatusCode.Completed,
   );

package/src/FormatFile/components/ErrorIcon/ErrorIcon.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { useStyles } from "./ErrorIcon.style";
 import { Icon } from "../../../Icon";
 
-export function ErrorIcon(): JSX.Element {
+export function ErrorIcon() {
   const styles = useStyles();
 
   return (

package/src/FormatFile/components/FileView/FileView.tsx

@@ -27,7 +27,7 @@ export function FileView({
   showOverlay,
   showError,
   onUploadComplete,
-}: FileViewProps): JSX.Element {
+}: FileViewProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
 

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.tsx

@@ -20,7 +20,7 @@ export const FormatFileBottomSheet = ({
   onPreviewPress,
   onRemovePress,
   bottomSheetOptionsSuffix,
-}: FormatFileBottomSheetProps): JSX.Element => {
+}: FormatFileBottomSheetProps) => {
   const { t } = useAtlantisI18n();
 
   const handlePress = (onPressAction: () => void) => {

package/src/FormatFile/components/MediaView/MediaView.tsx

@@ -27,7 +27,7 @@ export function MediaView({
   file,
   styleInGrid,
   onUploadComplete,
-}: MediaViewProps): JSX.Element {
+}: MediaViewProps) {
   const { t } = useAtlantisI18n();
   const { useCreateThumbnail } = useAtlantisFormatFileContext();
   const { thumbnail, error } = useCreateThumbnail(file);

package/src/FormatFile/components/ProgressBar/ProgressBar.tsx

@@ -22,7 +22,7 @@ export const ProgressBar = ({
   progress,
   status,
   onComplete,
-}: ProgressBarProps): JSX.Element => {
+}: ProgressBarProps) => {
   const barWidth = useRef(new Animated.Value(0)).current;
   const progressPercentage = barWidth.interpolate({
     inputRange: [0, 1],

package/src/Heading/Heading.tsx

@@ -71,7 +71,7 @@ export function Heading<T extends HeadingLevel = "heading">({
   maxLines = "unlimited",
   allowFontScaling = true,
   selectable,
-}: HeadingProps<T>): JSX.Element {
+}: HeadingProps<T>) {
   const headingStyle = getHeadingStyle(level, variation);
   const accessibilityRole = "header";
 

package/src/Icon/Icon.tsx

@@ -37,7 +37,7 @@ export function Icon({
   size = "base",
   customColor,
   testID,
-}: IconProps): JSX.Element {
+}: IconProps) {
   const { svgStyle, paths, viewBox } = getIcon({
     name,
     color,

package/src/IconButton/IconButton.tsx

@@ -50,7 +50,7 @@ export function IconButton({
   onPress,
   accessibilityLabel,
   testID,
-}: IconButtonProps): JSX.Element {
+}: IconButtonProps) {
   const styles = useStyles();
 
   return (

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,