@jobber/components-native 0.54.4-JOB-88641.9 → 0.54.4-fix-inline.3

package/src/ActionItem/ActionItem.test.tsx

@@ -6,7 +6,7 @@ import { Text } from "../Text";
 
 describe("ActionItem", () => {
   const pressHandler = jest.fn();
-  const defaultActionIcon = "arrowRight";
+  const defaultActionIcon = "longArrowRight";
 
   beforeEach(() => {
     jest.resetAllMocks();
@@ -63,7 +63,7 @@ describe("ActionItem", () => {
       expect(queryByTestId(defaultActionIcon)).toBeFalsy();
     });
 
-    it("should display arrowRight icon when edit name is used", () => {
+    it("should display longArrowRight icon when edit name is used", () => {
       const iconName = "edit";
       const { getByTestId } = render(
         <ActionItem onPress={pressHandler} actionIcon={iconName} />,

package/src/ActionItem/ActionItem.tsx

@@ -116,6 +116,7 @@ function getActionIconColour(
   if (actionIconColour === "subtle") {
     return "interactiveSubtle";
   }
+
   return actionIconColour;
 }
 
@@ -123,9 +124,10 @@ type ActionIconNames = IconNames | "editpencil";
 
 function getActionIcon(icon: ActionIconNames): IconNames {
   if (icon === "edit") {
-    return "arrowRight";
+    return "longArrowRight";
   } else if (icon === "editpencil") {
     return "edit";
   }
+
   return icon;
 }

package/src/ActionItem/ActionItemGroup.tsx

@@ -29,6 +29,7 @@ function renderChildren(children: ActionItemElement | ActionItemElement[]) {
 
   return childArray.map((child, index) => {
     const isSubsequentChild = index !== 0;
+
     return (
       <View key={index}>
         {isSubsequentChild && (

package/src/AutoLink/hooks/useCreateLinkedText.ts

@@ -21,6 +21,7 @@ export function useCreateLinkedText({
 
       const token = generateToken();
       matches[token] = match;
+
       return token;
     },
   });

package/src/AutoLink/hooks/useTokenGenerator.ts

@@ -4,6 +4,7 @@ import { v1 } from "react-native-uuid";
 export function useTokenGenerator(): [() => string, RegExp] {
   let counter = 0;
   const [identifier] = useState(v1());
+
   return [
     () => `@__ELEMENT-${identifier}-${counter++}__@`,
     new RegExp(`(@__ELEMENT-${identifier}-\\d+__@)`, "g"),

package/src/Banner/Banner.tsx

@@ -44,7 +44,7 @@ export function Banner({
 
                 {action && (
                   <RNText>
-                    {shouldFlow && <Typography> | </Typography>}
+                    {shouldFlow && <Typography color="subdued"> | </Typography>}
                     <ActionLabel align="start">{action.label}</ActionLabel>
                   </RNText>
                 )}

package/src/BottomSheet/BottomSheet.tsx

@@ -101,7 +101,7 @@ function BottomSheetInternal(
   }
 }
 
-function Header({ heading }: { heading: string }) {
+function Header({ heading }: { readonly heading: string }) {
   return (
     <View style={styles.header}>
       <Heading level={"subtitle"}>{heading}</Heading>
@@ -113,8 +113,8 @@ function Footer({
   cancellable,
   onCancel,
 }: {
-  cancellable: boolean;
-  onCancel: () => void;
+  readonly cancellable: boolean;
+  readonly onCancel: () => void;
 }) {
   const insets = useSafeAreaInsets();
   const { t } = useAtlantisI18n();

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.tsx

@@ -14,8 +14,9 @@ export interface BottomSheetOptionProps {
   readonly textAlign?: TextAlign;
   readonly destructive?: boolean;
   readonly textTransform?: "none" | "capitalize";
-  onPress: () => void;
+  readonly onPress: () => void;
 }
+
 export function BottomSheetOption({
   text,
   icon,
@@ -27,6 +28,7 @@ export function BottomSheetOption({
 }: BottomSheetOptionProps): JSX.Element {
   const destructiveColor = "critical";
   const textVariation = destructive ? destructiveColor : "subdued";
+
   return (
     <TouchableOpacity
       style={styles.bottomSheetOption}

package/src/Button/Button.style.ts

@@ -79,8 +79,8 @@ export const styles = StyleSheet.create({
   },
 
   learning: {
-    backgroundColor: tokens["color-informative"],
-    borderColor: tokens["color-informative"],
+    backgroundColor: tokens["color-interactive--subtle"],
+    borderColor: tokens["color-interactive--subtle"],
   },
 
   destructive: {

package/src/Button/Button.test.tsx

@@ -78,7 +78,7 @@ describe("Button", () => {
       },
     ],
     ["destructive", { bgColor: tokens["color-destructive"] }],
-    ["learning", { bgColor: tokens["color-informative"] }],
+    ["learning", { bgColor: tokens["color-interactive--subtle"] }],
   ])("renders a %s Button", (variation, { bgColor, borderColor }) => {
     const { buttonStyle } = renderButton(
       <Button label={variation} variation={variation} onPress={jest.fn()} />,
@@ -218,7 +218,7 @@ describe("Button", () => {
         variation: "learning",
         type: "secondary",
       });
-      expect(iconColor).toBe(tokens["color-informative"]);
+      expect(iconColor).toBe(tokens["color-interactive--subtle"]);
       expect(textColor).toBe(iconColor);
     });
 

package/src/Button/Button.tsx

@@ -179,7 +179,7 @@ function getActionLabelVariation(
 
   switch (variation) {
     case "learning":
-      return "learning";
+      return "subtle";
     case "destructive":
       return "destructive";
     case "cancel":
@@ -204,7 +204,7 @@ function getIconColorVariation(
 
   switch (variation) {
     case "learning":
-      return "informative";
+      return "interactiveSubtle";
     case "destructive":
       return "destructive";
     case "cancel":

package/src/Button/components/InternalButtonLoading/InternalButtonLoading.tsx

@@ -21,6 +21,9 @@ const imageWidth = 96;
 const offset = PixelRatio.roundToNearestPixel(imageWidth / PixelRatio.get());
 const leftOffset = -1 * offset;
 
+// looks like deprecation for FlatList in reanimated is cascading down to other exports
+// This is not createAnimatedComponent(FlatList), we are fine
+// eslint-disable-next-line import/no-deprecated
 const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
 
 function InternalButtonLoadingInternal({
@@ -71,6 +74,7 @@ function getLoadingPattern({
 }: InternalButtonLoadingProps): string {
   if (variation === "cancel") return darkPattern;
   if (type === "primary") return lightPattern;
+
   return darkPattern;
 }
 

package/src/ButtonGroup/ButtonGroup.style.ts

@@ -6,11 +6,11 @@ export const styles = StyleSheet.create({
     width: "100%",
     flexDirection: "row",
     justifyContent: "flex-end",
+    gap: tokens["space-small"],
   },
   button: {
     flexBasis: tokens["space-largest"],
     flexGrow: 1,
-    paddingRight: tokens["space-smaller"],
   },
   moreButton: {
     flexBasis: tokens["space-largest"],

package/src/ButtonGroup/ButtonGroup.tsx

@@ -86,6 +86,7 @@ export function ButtonGroup({
       {secondaryActions.length > 0 && (
         <View style={styles.moreButton}>
           <Button
+            type="secondary"
             icon={"more"}
             accessibilityLabel={t("more")}
             onPress={handlePress(openBottomSheet)}

package/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.tsx

@@ -6,12 +6,12 @@ import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOp
 import { BottomSheet, BottomSheetRef } from "../../../BottomSheet/BottomSheet";
 
 interface SecondaryActionSheetProps {
-  actions: ButtonGroupSecondaryActionProps[];
-  secondaryActionsRef: RefObject<BottomSheetRef>;
-  showCancel?: boolean;
-  heading?: string;
-  onOpenBottomSheet?: () => void;
-  onCloseBottomSheet?: () => void;
+  readonly actions: ButtonGroupSecondaryActionProps[];
+  readonly secondaryActionsRef: RefObject<BottomSheetRef>;
+  readonly showCancel?: boolean;
+  readonly heading?: string;
+  readonly onOpenBottomSheet?: () => void;
+  readonly onCloseBottomSheet?: () => void;
 }
 
 export function SecondaryActionSheet({
@@ -34,6 +34,7 @@ export function SecondaryActionSheet({
         <View>
           {actions.map((action, index) => {
             const { label, onPress, icon, iconColor, destructive } = action;
+
             return (
               <BottomSheetOption
                 destructive={destructive}

package/src/Card/Card.tsx

@@ -65,6 +65,7 @@ function getElevationStyle(elevation: elevationProp) {
   if (elevation === "none") {
     return undefined;
   }
+
   return styles[`${elevation}Elevation`];
 }
 
@@ -85,39 +86,37 @@ export function Card({
         testID={testID}
       >
         {header && (
-          <>
-            <InternalCardHeader
-              onPress={header.onPress}
-              testID={`${testID}Header`}
-              collapsable={!!children}
-            >
-              <View style={styles.headerTitle}>
-                <Typography
-                  color="heading"
-                  fontFamily="base"
-                  fontWeight="bold"
-                  size="default"
-                  lineHeight="base"
-                  accessibilityRole="header"
-                >
-                  {header.title}
-                </Typography>
-              </View>
-              <View style={styles.actionItem}>
-                {!!header.actionItem?.label && (
-                  <View style={styles.actionLabel}>
-                    <ActionLabel type="cardTitle">
-                      {header.actionItem.label}
-                    </ActionLabel>
-                  </View>
-                )}
+          <InternalCardHeader
+            onPress={header.onPress}
+            testID={`${testID}Header`}
+            collapsable={!!children}
+          >
+            <View style={styles.headerTitle}>
+              <Typography
+                color="heading"
+                fontFamily="base"
+                fontWeight="bold"
+                size="default"
+                lineHeight="base"
+                accessibilityRole="header"
+              >
+                {header.title}
+              </Typography>
+            </View>
+            <View style={styles.actionItem}>
+              {!!header.actionItem?.label && (
+                <View style={styles.actionLabel}>
+                  <ActionLabel type="cardTitle">
+                    {header.actionItem.label}
+                  </ActionLabel>
+                </View>
+              )}
 
-                {header.actionItem?.iconName && (
-                  <Icon name={header.actionItem.iconName} color="interactive" />
-                )}
-              </View>
-            </InternalCardHeader>
-          </>
+              {header.actionItem?.iconName && (
+                <Icon name={header.actionItem.iconName} color="interactive" />
+              )}
+            </View>
+          </InternalCardHeader>
         )}
         {children}
         {footer && (

package/src/Card/components/InternalCardHeader.tsx

@@ -16,6 +16,7 @@ export function InternalCardHeader({
   collapsable,
 }: InternalCardHeaderProps): JSX.Element {
   const conditionalChildStyling = collapsable ? undefined : styles.noChildren;
+
   if (onPress) {
     return (
       <Pressable

package/src/Checkbox/CheckboxGroup.tsx

@@ -17,9 +17,9 @@ interface CommonCheckboxGroupProps extends Omit<CheckboxProps, "onChange"> {
   /**
    * Checkbox items
    */
-  children: CheckboxElement[];
+  readonly children: CheckboxElement[];
 
-  state?: CheckboxGroupState;
+  readonly state?: CheckboxGroupState;
 
   onChange?(groupChecks: CheckboxGroupState): void;
 }
@@ -38,6 +38,7 @@ export type CheckboxGroupProps = XOR<
   UncontrolledCheckboxGroupProps,
   ControlledCheckboxGroupProps
 >;
+
 export function CheckboxGroup({
   children,
   state,
@@ -57,6 +58,7 @@ export function CheckboxGroup({
       </CheckboxGroupInternal>
     );
   }
+
   if (name) {
     return (
       <FormField name={name}>
@@ -114,6 +116,7 @@ function CheckboxGroupInternal({
   ): React.ReactElement<CheckboxProps> {
     const name = throwErrorIfItHasNoName(checkbox.props.name);
     const childDisabled = disabled || checkbox.props.disabled;
+
     const childrenHandleChange = (checked: boolean) => {
       const childrenNextValue = {
         ...actualCheckedValues.childrenChecked,
@@ -126,6 +129,7 @@ function CheckboxGroupInternal({
         parentChecked: parentNextValue,
       });
     };
+
     return React.cloneElement(checkbox, {
       onChange: childrenHandleChange,
       checked: actualCheckedValues.childrenChecked[name],
@@ -141,6 +145,7 @@ function CheckboxGroupInternal({
     }
 
     const name = throwErrorIfItHasNoName(child.props.name);
+
     return {
       ...childCheckboxObject,
       [name]: cloneChildCheckbox(child),
@@ -153,9 +158,11 @@ function CheckboxGroupInternal({
     childName: string,
   ): boolean {
     const currentCheckbox = checkboxObject[childName];
+
     if (currentCheckbox?.props?.disabled) {
       return acc;
     }
+
     return acc && value;
   }
 
@@ -174,6 +181,7 @@ function CheckboxGroupInternal({
                 actualCheckedValues.childrenChecked,
                 (acc, currentCheckboxValue, childName) => {
                   const currentCheckbox = checkboxObject[childName];
+
                   return currentCheckbox?.props?.disabled
                     ? {
                         ...acc,
@@ -215,11 +223,13 @@ function throwErrorIfItHasNoName(name?: string): string {
       "You must provide a name to checkboxes in a checkbox group",
     );
   }
+
   return name;
 }
 
 function checkIndeterminateStatus(checkedValues: CheckboxGroupState): boolean {
   const checkedValuesAsArray = Object.values(checkedValues.childrenChecked);
+
   if (checkedValuesAsArray.length === 1) {
     return false;
   }

package/src/Chip/Chip.tsx

@@ -97,9 +97,11 @@ export function Chip({
 
   const accessibilityState = useMemo(() => {
     const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
+
     if (checkableRoles.includes(accessibilityRole)) {
       return { checked: isActive };
     }
+
     return {};
   }, [accessibilityRole, isActive]);
 

package/src/Content/Content.test.tsx

@@ -39,6 +39,7 @@ function setupContent(
   const parentView = container.getByLabelText("contentView");
   const contentView = getContentComponent(parentView);
   const contentChildren = getContentChildren(contentView);
+
   return { ...container, parentView, contentView, contentChildren };
 }
 

package/src/Content/Content.tsx

@@ -56,6 +56,7 @@ export function Content({
       // In order to get spacing between the children, we apply the child spacing on each of
       // the children except for the first (top) child
       const childStyle = index !== 0 ? [childContainerStyle] : [];
+
       return (
         <View key={index} style={[styles.childWrapper, ...childStyle]}>
           {child}

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -14,6 +14,7 @@ import { Content } from "../Content";
 import { Text } from "../Text";
 
 jest.unmock("../hooks/useIsScreenReaderEnabled");
+
 function fireLayoutEvent(childrenContent: ReactTestInstance) {
   fireEvent(childrenContent, "onLayout", {
     nativeEvent: {

package/src/Disclosure/Disclosure.tsx

@@ -1,10 +1,5 @@
 import React, { useState } from "react";
-import {
-  LayoutChangeEvent,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { LayoutChangeEvent, TouchableOpacity, View } from "react-native";
 import Reanimated, {
   Easing,
   useAnimatedStyle,
@@ -16,8 +11,8 @@ import { styles } from "./Disclosure.style";
 import { tokens } from "../utils/design";
 import { Icon } from "../Icon";
 
-const ReanimatedView = Reanimated.createAnimatedComponent(View);
-const ReanimatedScrollView = Reanimated.createAnimatedComponent(ScrollView);
+const ReanimatedView = Reanimated.View;
+const ReanimatedScrollView = Reanimated.ScrollView;
 
 interface DisclosureProps {
   /**

package/src/Disclosure/__snapshots__/Disclosure.test.tsx.snap

@@ -117,18 +117,16 @@ exports[`renders a Disclosure with a header and a content when open is true 1`]
     </View>
   </View>
   <RCTScrollView
+    collapsable={false}
     scrollEnabled={false}
+    scrollEventThrottle={0.0001}
     showsHorizontalScrollIndicator={false}
     showsVerticalScrollIndicator={false}
     style={
-      [
-        {
-          "paddingTop": 8,
-        },
-        {
-          "height": 100,
-        },
-      ]
+      {
+        "height": 100,
+        "paddingTop": 8,
+      }
     }
   >
     <View>
@@ -290,18 +288,16 @@ exports[`renders a Disclosure with a header and with a content of size 0 when cl
     </View>
   </View>
   <RCTScrollView
+    collapsable={false}
     scrollEnabled={false}
+    scrollEventThrottle={0.0001}
     showsHorizontalScrollIndicator={false}
     showsVerticalScrollIndicator={false}
     style={
-      [
-        {
-          "paddingTop": 8,
-        },
-        {
-          "height": 0,
-        },
-      ]
+      {
+        "height": 0,
+        "paddingTop": 8,
+      }
     }
   >
     <View>
@@ -431,18 +427,16 @@ exports[`should not render the caret when the Disclosure is empty 1`] = `
     </View>
   </View>
   <RCTScrollView
+    collapsable={false}
     scrollEnabled={false}
+    scrollEventThrottle={0.0001}
     showsHorizontalScrollIndicator={false}
     showsVerticalScrollIndicator={false}
     style={
-      [
-        {
-          "paddingTop": 8,
-        },
-        {
-          "height": 0,
-        },
-      ]
+      {
+        "height": 0,
+        "paddingTop": 8,
+      }
     }
   >
     <View>

package/src/Divider/Divider.tsx

@@ -17,5 +17,6 @@ export function Divider({ size = "base" }: DividerProps): JSX.Element {
     size === "large" && styles.large,
     size === "largest" && styles.largest,
   ];
+
   return <View testID="Divider" style={style} />;
 }

package/src/EmptyState/EmptyState.tsx

@@ -15,8 +15,8 @@ interface Action {
 }
 
 interface ButtonAction {
-  action?: Action;
-  type: ButtonType;
+  readonly action?: Action;
+  readonly type: ButtonType;
 }
 
 function ButtonAction({ action, type }: ButtonAction) {

package/src/Flex/Flex.styles.tsx

@@ -24,6 +24,7 @@ export const gapStyles = StyleSheet.create(
     if (space !== "none") paddingLeft = tokens[`space-${space}`];
 
     gapObj[space] = { paddingLeft };
+
     return gapObj;
   }, {} as Record<Spacing, ViewStyle>),
 );

package/src/Flex/Flex.test.tsx

@@ -17,6 +17,7 @@ function getContentComponent(parentView: ReactTestInstance) {
 function getFlexCol(flexRow: ReactTestInstance) {
   return flexRow.children as ReactTestInstance[];
 }
+
 function setUp(props?: FlexProps) {
   const container = render(
     <View accessibilityLabel="contentView">
@@ -33,6 +34,7 @@ function setUp(props?: FlexProps) {
   );
   const flexRow = container.getAllByTestId("ATL-Flex-Row");
   const flexCol = getFlexCol(flexRow[0]);
+
   return { ...container, contentView, flexRow, flexCol };
 }
 

package/src/Form/Form.test.tsx

@@ -16,6 +16,7 @@ import { InputText } from "../InputText";
 jest.mock("lodash/debounce", () => {
   return jest.fn(fn => {
     fn.cancel = jest.fn();
+
     return fn;
   });
 });
@@ -83,24 +84,24 @@ interface FormFields {
 }
 
 interface FormTestProps {
-  onSubmit: jest.Mock;
-  sendBannerErrors?: boolean;
-  sendNetworkErrors?: boolean;
-  saveLabel?: string;
-  renderStickySection?: (
+  readonly onSubmit: jest.Mock;
+  readonly sendBannerErrors?: boolean;
+  readonly sendNetworkErrors?: boolean;
+  readonly saveLabel?: string;
+  readonly renderStickySection?: (
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
   ) => JSX.Element;
-  initialLoading?: boolean;
-  initialValues?: FormFields;
-  bannerMessages?: FormBannerMessage[];
-  localCacheKey?: string;
-  localCacheExclude?: string[];
-  localCacheId?: string[] | string;
-  onBeforeSubmit?: jest.Mock;
-  renderFooter?: React.ReactNode;
-  saveButtonOffset?: number;
+  readonly initialLoading?: boolean;
+  readonly initialValues?: FormFields;
+  readonly bannerMessages?: FormBannerMessage[];
+  readonly localCacheKey?: string;
+  readonly localCacheExclude?: string[];
+  readonly localCacheId?: string[] | string;
+  readonly onBeforeSubmit?: jest.Mock;
+  readonly renderFooter?: React.ReactNode;
+  readonly saveButtonOffset?: number;
 }
 
 function FormTest(props: FormTestProps) {
@@ -124,9 +125,11 @@ function MockForm({
   saveButtonOffset,
 }: FormTestProps) {
   const formErrors: FormBannerErrors = {};
+
   if (sendBannerErrors) {
     formErrors.bannerError = bannerError;
   }
+
   if (sendNetworkErrors) {
     formErrors.networkError = "Ouch";
   }
@@ -408,6 +411,7 @@ describe("Form", () => {
           errorType: FormSubmitErrorType.NetworkError,
         }),
       );
+
       const setup = () => {
         const view = render(
           <FormTest sendNetworkErrors={true} onSubmit={mockSubmit} />,
@@ -421,6 +425,7 @@ describe("Form", () => {
           newValue,
         );
         fireEvent.press(getByLabelText(saveButtonText));
+
         return view;
       };