@jobber/components-native 0.76.1-JOB-116234-d279b0f.20 → 0.76.1-JOB-116234-4bc5afd.23

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.76.1-JOB-116234-d279b0f.20+d279b0fd",
+    "version": "0.76.1-JOB-116234-4bc5afd.23+4bc5afdb",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -80,5 +80,5 @@
         "react-native-safe-area-context": "^4.5.2",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "d279b0fddc435572c48dff35f02db80ee4ca3ee7"
+    "gitHead": "4bc5afdb99786f50a9ae8474ac282eb593dd9867"
 }

package/dist/src/AtlantisThemeContext/AtlantisThemeContext.js

@@ -1,5 +1,5 @@
 import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
-import React, { createContext, useContext, useState, } from "react";
+import React, { createContext, useContext, useState } from "react";
 import merge from "lodash/merge";
 import { Platform } from "react-native";
 const lightTokens = Platform.select({
@@ -11,31 +11,20 @@ const completeDarkTokens = merge({}, lightTokens, darkTokens);
 const AtlantisThemeContext = createContext({
     theme: "light",
     tokens: lightTokens,
+    setTheme: () => {
+        console.error("useAtlantisTheme accessed outside of AtlantisThemeContextProvider");
+    },
 });
 export function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }) {
-    if (dangerouslyOverrideTheme) {
-        return (React.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
-    }
-    return (React.createElement(InternalDynamicThemeProvider, null, children));
-}
-function InternalDynamicThemeProvider({ children }) {
-    // TODO: check initial theme from local/device storage?
-    // const initialTheme: Theme = (globalThis.document.documentElement.dataset.theme as Theme) ?? "light";
+    // TODO: check last saved theme from local/device storage
     const initialTheme = "light";
-    const [internalTheme] = useState(initialTheme);
-    const currentTokens = internalTheme === "dark" ? completeDarkTokens : lightTokens;
-    // TODO: listen for global theme update -> setInternalTheme
-    // See web's AtlantisThemeContext for an example of how it does this.
-    return (React.createElement(AtlantisThemeContext.Provider, { value: {
-            theme: internalTheme,
-            tokens: currentTokens,
-        } }, children));
-}
-function InternalStaticThemeProvider({ dangerouslyOverrideTheme, children, }) {
-    const currentTokens = dangerouslyOverrideTheme === "dark" ? completeDarkTokens : lightTokens;
+    const [globalTheme, setGlobalTheme] = useState(initialTheme);
+    const currentTheme = dangerouslyOverrideTheme !== null && dangerouslyOverrideTheme !== void 0 ? dangerouslyOverrideTheme : globalTheme;
+    const currentTokens = currentTheme === "dark" ? completeDarkTokens : lightTokens;
     return (React.createElement(AtlantisThemeContext.Provider, { value: {
-            theme: dangerouslyOverrideTheme,
+            theme: currentTheme,
             tokens: currentTokens,
+            setTheme: setGlobalTheme,
         } }, children));
 }
 export function useAtlantisTheme() {

package/dist/src/InputFieldWrapper/CommonInputStyles.style.js

@@ -1,6 +1,8 @@
 import { StyleSheet } from "react-native";
 import { buildThemedStyles, } from "../AtlantisThemeContext";
-import { typographyStyles as staticTypographyStyles, useTypographyStyles, } from "../Typography";
+import { 
+// eslint-disable-next-line import/no-deprecated
+typographyStyles as staticTypographyStyles, useTypographyStyles, } from "../Typography";
 import { tokens as staticTokens } from "../utils/design";
 export const createCommonInputTokens = (tokens, typographyStyles) => ({
     input: {
@@ -37,7 +39,9 @@ export const createCommonInputTokens = (tokens, typographyStyles) => ({
 /**
  * @deprecated Use useCommonInputStyles instead
  */
-export const commonInputStyles = StyleSheet.create(createCommonInputTokens(staticTokens, staticTypographyStyles));
+export const commonInputStyles = StyleSheet.create(
+// eslint-disable-next-line import/no-deprecated
+createCommonInputTokens(staticTokens, staticTypographyStyles));
 export const useCommonInputStyles = () => {
     const typographyStyles = useTypographyStyles();
     const themedStyles = buildThemedStyles(tokens => createCommonInputTokens(tokens, typographyStyles))();

package/dist/src/InputFieldWrapper/components/Suffix/Suffix.js

@@ -2,13 +2,14 @@ import React from "react";
 import { Pressable, Text as RNText, View, } from "react-native";
 import { Icon } from "../../../Icon";
 import { Text } from "../../../Text";
-import { typographyStyles } from "../../../Typography";
+import { useTypographyStyles } from "../../../Typography";
 import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 import { useStyles } from "../../InputFieldWrapper.style";
 export const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
 export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
 export function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, hasLeftMargin = true, styleOverride, }) {
     const styles = useStyles();
+    const typographyStyles = useTypographyStyles();
     return (React.createElement(View, { testID: suffixLabelTestId, style: [
             styles.fieldAffix,
             focused && styles.inputFocused,

package/dist/src/InputPressable/InputPressable.style.js

@@ -1,7 +1,8 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { typographyStyles } from "../Typography/Typography.style";
-export const useStyles = buildThemedStyles(tokens => {
-    return {
+import { useTypographyStyles } from "../Typography";
+export const useStyles = () => {
+    const typographyStyles = useTypographyStyles();
+    return buildThemedStyles(tokens => ({
         pressable: {
             flex: 1,
         },
@@ -20,5 +21,5 @@ export const useStyles = buildThemedStyles(tokens => {
         inputInvalid: {
             borderColor: tokens["color-critical"],
         },
-    };
-});
+    }))();
+};

package/dist/src/InputText/InputText.style.js

@@ -1,7 +1,8 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
-import { typographyStyles } from "../Typography";
-export const useStyles = buildThemedStyles(tokens => {
-    return {
+import { useTypographyStyles } from "../Typography";
+export const useStyles = () => {
+    const typographyStyles = useTypographyStyles();
+    return buildThemedStyles(tokens => ({
         inputPaddingTop: {
             paddingTop: (typographyStyles.smallSize.fontSize || 0) +
                 tokens["space-smaller"] +
@@ -17,8 +18,7 @@ export const useStyles = buildThemedStyles(tokens => {
             paddingBottom: tokens["space-small"] - tokens["space-smallest"],
         },
         multilineInputiOS: {
-            // for placeholder
             paddingTop: (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
         },
-    };
-});
+    }))();
+};

package/dist/src/Typography/Typography.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { I18nManager, StyleSheet, Text, } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
-import { typographyStyles as styles } from "./Typography.style";
+import { useTypographyStyles } from "./Typography.style";
 import { capitalize } from "../utils/intl";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 const maxNumberOfLines = {
@@ -15,13 +15,14 @@ const maxNumberOfLines = {
 export const Typography = React.memo(InternalTypography);
 // eslint-disable-next-line max-statements
 function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size = "default", children, maxLines = "unlimited", allowFontScaling = true, maxFontScaleSize, adjustsFontSizeToFit = false, lineHeight, letterSpacing, reverseTheme = false, hideFromScreenReader = false, accessibilityRole = "text", strikeThrough = false, underline, UNSAFE_style, selectable = true, }) {
-    const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
+    const styles = useTypographyStyles();
+    const sizeAndHeight = getSizeAndHeightStyle(size, styles, lineHeight);
     const style = [
-        getFontStyle(fontFamily, fontStyle, fontWeight),
-        getColorStyle(color, reverseTheme),
-        getAlignStyle(align),
+        getFontStyle(fontFamily, fontStyle, fontWeight, styles),
+        getColorStyle(styles, color, reverseTheme),
+        getAlignStyle(styles, align),
         sizeAndHeight,
-        getLetterSpacingStyle(letterSpacing),
+        getLetterSpacingStyle(letterSpacing, styles),
     ];
     if (strikeThrough) {
         style.push(styles.strikeThrough);
@@ -57,7 +58,7 @@ function getScaleMultiplier(maxFontScaleSize = 0, size = 1) {
         return undefined;
     return maxFontScaleSize / size;
 }
-function getFontStyle(fontFamily = "base", fontStyle = "regular", fontWeight = "regular") {
+function getFontStyle(fontFamily = "base", fontStyle = "regular", fontWeight = "regular", styles) {
     const defaultBaseFontStyling = styles.baseRegularRegular;
     const defaultDisplayFontStyling = styles.displayRegularBold;
     const styleKey = `${fontFamily}${capitalize(fontStyle)}${capitalize(fontWeight)}`;
@@ -83,17 +84,17 @@ function getTransformedText(text, transform) {
             return text;
     }
 }
-function getColorStyle(color, reverseTheme) {
+function getColorStyle(styles, color, reverseTheme) {
     if (color === "default" || !color) {
         return styles.greyBlue;
     }
     const colorStyleKey = `${color}${reverseTheme ? "Reverse" : ""}`;
     return styles[`${colorStyleKey}`];
 }
-function getAlignStyle(alignStyle = I18nManager.isRTL ? "end" : "start") {
+function getAlignStyle(styles, alignStyle = I18nManager.isRTL ? "end" : "start") {
     return styles[`${alignStyle}Align`];
 }
-function getSizeAndHeightStyle(textSize, lineHeightOverwrite) {
+function getSizeAndHeightStyle(textSize, styles, lineHeightOverwrite) {
     const fontSize = styles[`${textSize}Size`];
     if (lineHeightOverwrite) {
         const lineHeight = styles[`${lineHeightOverwrite}LineHeight`];
@@ -101,6 +102,6 @@ function getSizeAndHeightStyle(textSize, lineHeightOverwrite) {
     }
     return fontSize;
 }
-function getLetterSpacingStyle(letterSpacing = "base") {
+function getLetterSpacingStyle(letterSpacing = "base", styles) {
     return styles[`${letterSpacing}LetterSpacing`];
 }

package/dist/src/Typography/Typography.style.js

@@ -354,14 +354,7 @@ export const createTypographyTokens = (tokens) => (Object.assign(Object.assign({
         textDecorationLine: "line-through",
     } }));
 /**
- * `StyleSheet` for Typography.tsx.
- *
- * If you find yourself needing to use what's inside this object on files other
- * than `<Typography />`, please import from `@jobber/components-native` instead.
- *
- * ```
- * import { typographyStyles } from "@jobber/components-native"
- * ```
+ * @deprecated Use useTypographyStyles instead
  */
 export const typographyStyles = StyleSheet.create(createTypographyTokens(staticTokens));
 export const useTypographyStyles = buildThemedStyles(createTypographyTokens);

package/dist/src/utils/design/index.js

@@ -1,7 +1,10 @@
 import { Platform } from "react-native";
 import { androidTokens, iosTokens } from "@jobber/design";
-// TODO: remove all references to const in JM and Atlantis. Replace with useAtlantisTheme.
-// Rename to `nonThemedTokens` in the meantime?
+/**
+ * These design tokens don't react to theme changes. Only use these if you need to access
+ * tokens that are not affected by the current theme, otherwise you should be using our
+ * useAtlantisTheme() hook to access the current theme's tokens.
+ */
 export const tokens = Platform.select({
     ios: () => iosTokens,
     android: () => androidTokens,

package/dist/src/utils/meta/meta.json

@@ -8,6 +8,7 @@
         "AtlantisContext.Provider",
         "AtlantisFormContext.Consumer",
         "AtlantisFormContext.Provider",
+        "AtlantisThemeContextProvider",
         "AutoLink",
         "Banner",
         "BottomSheet",