@momo-kits/foundation 0.169.7-beta.7 → 0.169.7-beta.9

package/Application/StackScreen.tsx

@@ -8,7 +8,6 @@ import { SwipeBackHaptic } from './Components/SwipeBackHaptic';
 import { useAppState } from './hooks';
 import { createScreenTracking } from './StackScreen.tracking';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
-import { useHeaderFrameOptions } from './headerLayout';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -52,7 +51,6 @@ const StackScreen: React.FC<any> = props => {
   const navigation = useRef(new Navigation(props.navigation, context)).current;
   const heightHeader = useHeaderHeight();
   const { isBackgroundToForeground } = useAppState();
-  const headerFrameOptions = useHeaderFrameOptions(options?.contentLayout);
 
   const data = {
     ...initialParams,
@@ -71,13 +69,6 @@ const StackScreen: React.FC<any> = props => {
     }
   }, [navigation, options]);
 
-  // re-applied on fold, unfold and rotation, apart from the other options
-  useLayoutEffect(() => {
-    if (headerFrameOptions) {
-      navigation.instance.setOptions(headerFrameOptions);
-    }
-  }, [navigation, headerFrameOptions]);
-
   useEffect(() => {
     let focusScreen: any;
     let onFocusApp: any;

package/Application/index.ts

@@ -26,13 +26,6 @@ import {
   type ModalLayout,
   type ModalRect,
 } from './modalLayout';
-import {
-  HeaderBarMetrics,
-  getHeaderLayout,
-  useHeaderLayout,
-  type HeaderContentLayout,
-  type HeaderLayout,
-} from './headerLayout';
 
 export {
   NavigationContainer,
@@ -48,9 +41,6 @@ export {
   useTooltipPortal,
   getModalLayout,
   useModalLayout,
-  HeaderBarMetrics,
-  getHeaderLayout,
-  useHeaderLayout,
 };
 
-export type { ModalLayout, ModalRect, HeaderContentLayout, HeaderLayout };
+export type { ModalLayout, ModalRect };

package/Application/navigationOptions.tsx

@@ -8,12 +8,11 @@ import {
   TransitionPresets,
 } from '@react-navigation/stack';
 import type { SharedValue } from 'react-native-reanimated';
-import { Colors } from '../Consts';
+import { Colors, Spacing } from '../Consts';
 import { HeaderBackground } from './Components/HeaderBackground';
 import { HeaderLeft } from './Components/HeaderLeft';
 import { HeaderRight } from './Components/HeaderRight';
 import { HeaderTitle, TitleCustom } from './Components/HeaderTitle';
-import { HeaderBarMetrics, TITLE_CONTAINER_RESET } from './headerLayout';
 import type { HeaderTitleProps, NavigationOptions } from './types';
 
 const CARD_SHADOW_OPACITY = 0.3;
@@ -56,8 +55,13 @@ const getStackOptions = (): StackNavigationOptions => {
     headerTitleAlign: 'left',
     headerTitle: props => <HeaderTitle {...props} />,
     headerTitleContainerStyle: {
-      ...TITLE_CONTAINER_RESET,
-      left: HeaderBarMetrics.titleGap,
+      marginLeft: 0,
+      marginEnd: 0,
+      marginStart: 0,
+      marginHorizontal: 0,
+      marginVertical: 0,
+      margin: 0,
+      left: Spacing.S,
     },
     headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} floating />,
@@ -168,8 +172,13 @@ const getOptions = (
     if (params.hiddenBack) {
       headerLeft = null;
       options.headerTitleContainerStyle = {
-        ...TITLE_CONTAINER_RESET,
-        left: HeaderBarMetrics.sidePadding,
+        marginLeft: 0,
+        marginEnd: 0,
+        marginStart: 0,
+        marginHorizontal: 0,
+        marginVertical: 0,
+        margin: 0,
+        left: Spacing.M,
       };
     }
     options = {

package/Application/types.header.ts

@@ -98,11 +98,6 @@ export interface HeaderAnimatedProps extends ViewProps {
   image: string;
   useScale?: boolean;
   aspectRatio?: '16/9' | '3/2' | '1/1';
-  /**
-   * Optional. On wide windows the image keeps its phone width, centered; this
-   * color fills the sides and fades to transparent downward. No fill when unset.
-   */
-  bannerBackgroundColor?: string;
 }
 
 export type AnimatedHeader = {
@@ -114,8 +109,8 @@ export type AnimatedHeader = {
 export interface SearchHeaderProps extends InputSearchProps {
   ref?: React.RefObject<InputRef>;
   animatedValue?: Animated.Value | SharedValue<number>;
-  headerRightWidth?: 0 | 84 | 124 | number;
-  leftPosition?: 12 | 52 | number;
+  headerRightWidth?: 0 | 74 | 110 | number;
+  leftPosition?: 12 | 48 | number;
   renderButtons?: () => ReactNode;
   hiddenBack?: boolean;
 }

package/Application/types.ts

@@ -9,7 +9,6 @@ import type {
   OnBoarding,
 } from './types.header';
 import type { LocalizeProps, Theme } from './types.theme';
-import type { HeaderContentLayout } from './headerLayout';
 
 export * from './types.theme';
 export * from './types.header';
@@ -129,10 +128,4 @@ export interface NavigationOptions
   hiddenBack?: boolean;
   headerTitle?: HeaderTitleProps | string;
   headerRight?: OnBoarding | HeaderRightToolkit | any;
-  /**
-   * Optional. `stretch` centers back, title and the right cluster in a 600pt
-   * frame on wide windows (foldable inner display, tablet); the background stays
-   * full width. Defaults to `grid`, the header row at the window edges.
-   */
-  contentLayout?: HeaderContentLayout;
 }

package/Input/InputSearch.tsx

@@ -13,7 +13,6 @@ import {
   View,
 } from 'react-native';
 import { useComponentId } from '../Application';
-import { HeaderBarMetrics } from '../Application/headerLayout';
 import {
   ApplicationContext,
   ComponentContext,
@@ -27,8 +26,6 @@ import styles from './styles';
 import { Styles } from '../Consts';
 import SystemTextInput from './SystemTextInput';
 
-const SEARCH_ICON_SIZE = 24;
-
 /**
  * Search field with search icon, clear icon, optional trailing icon and a
  * cancel button; with `typingData` it shows an animated placeholder instead.
@@ -52,7 +49,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     backgroundColor,
     onPress,
     typingData,
-    size = 'default',
     ...props
   },
   ref,
@@ -63,13 +59,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const searchFontFamily = exportFontFamily('regular');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-  const isHeaderSize = size === 'header';
-  const inputHeightStyle = isHeaderSize && {
-    height: HeaderBarMetrics.searchHeight,
-  };
-  const searchIconSize = isHeaderSize
-    ? HeaderBarMetrics.iconSize
-    : SEARCH_ICON_SIZE;
 
   const [focused, setFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');
@@ -125,11 +114,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     if (typingData && typingData?.length > 0) {
       return (
         <TouchableOpacity
-          style={[
-            styles.searchInput,
-            styles.searchInputTyping,
-            inputHeightStyle,
-          ]}
+          style={[styles.searchInput, styles.searchInputTyping]}
           onPress={onPress}
           activeOpacity={onPress ? 0.6 : 1}
         >
@@ -147,7 +132,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         ref={inputRef}
         style={[
           styles.searchInput,
-          inputHeightStyle,
           {
             fontSize: scaledFontSize,
             color: theme.colors.text.default,
@@ -241,7 +225,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         >
           <Icon
             source={'navigation_search'}
-            size={searchIconSize}
+            size={24}
             color={theme.colors.text.hint}
           />
           {renderInputView()}

package/Input/index.tsx

@@ -194,12 +194,6 @@ export interface InputSearchProps extends TextInputProps {
    */
   typingData?: string[];
 
-  /**
-   * Optional. `header` is the 32pt field with a 20pt search icon that sits in the
-   * navigation header. Defaults to `default`, the 36pt field for content.
-   */
-  size?: 'default' | 'header';
-
   /**
    * Optional. Called when the field is pressed while showing `typingData`.
    */
@@ -373,4 +367,4 @@ export {
   InputPhoneNumber,
 };
 
-export { checkValidPhoneNumber };
+export {checkValidPhoneNumber};

package/Layout/Card.tsx

@@ -1,12 +1,13 @@
 import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
-import { useGridSystem, useScreenLayout } from './utils';
+import { GRID_GUTTER, GRID_MARGIN } from './constants';
+import { useGridSystem } from './useGridSystem';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import { Image } from '../Image';
 import { ApplicationContext } from '../Context';
 import styles from './styles';
-import { Radius, Shadow, Spacing } from '../Consts';
+import { Radius, Shadow } from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
@@ -21,7 +22,7 @@ export interface CardProps extends ViewProps {
 }
 
 /**
- * Surface card across the content width minus 12pt margins, with its own grid for child
+ * Surface card across the grid width minus 12pt margins, with its own grid for child
  * Items; optional background image and light shadow.
  */
 const Card: React.FC<CardProps> = ({
@@ -32,19 +33,18 @@ const Card: React.FC<CardProps> = ({
   ...props
 }) => {
   const { theme } = useContext(ApplicationContext);
-  const { numberOfColumns } = useGridSystem();
-  const { contentWidth } = useScreenLayout();
+  const { numberOfColumns, gridWidth, gridOffset } = useGridSystem();
 
-  const gutterSize = 8;
-  const margin = 12;
-  const widthSection = contentWidth - margin * 2;
+  const gutterSize = GRID_GUTTER;
+  const margin = GRID_MARGIN;
+  const widthSection = gridWidth - margin * 2;
   const innerWidth = widthSection - margin * 2;
   const columnsWidth = innerWidth - gutterSize * (numberOfColumns - 1);
   const sizePerSpan = columnsWidth / numberOfColumns - 1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,
-    gutterSize: Spacing.S,
+    gutterSize: GRID_GUTTER,
     sizePerSpan,
     getSizeSpan: span => {
       return sizePerSpan * span + gutterSize * (span - 1);
@@ -63,7 +63,7 @@ const Card: React.FC<CardProps> = ({
           styles.card,
           {
             width: widthSection,
-            marginHorizontal: margin,
+            marginHorizontal: gridOffset + margin,
             gap: gutterSize,
           },
           !!backgroundImage && { backgroundColor: undefined },

package/Layout/Item.tsx

@@ -7,12 +7,12 @@ import { SpanNumber } from './types';
 
 export interface ItemProps extends ViewProps {
   /**
-   * Width in grid columns (1-12). Defaults to the full row.
+   * Width in grid columns (1-36, out of the grid's 12, 24 or 36). Defaults to the full row.
    */
   widthSpan?: SpanNumber;
 
   /**
-   * Optional. Height in grid spans (1-12). Unset keeps the content height.
+   * Optional. Height in grid spans (1-36, out of the grid's 12, 24 or 36). Unset keeps the content height.
    */
   heightSpan?: SpanNumber;
 }

package/Layout/Screen.tsx

@@ -67,7 +67,6 @@ const Screen = forwardRef(
       headerBackground,
       gradientColor,
       trackingParams,
-      contentLayout,
     }: ScreenProps,
     ref: any,
   ) => {
@@ -145,7 +144,6 @@ const Screen = forwardRef(
       gradientColor,
       headerBackground,
       layoutOffset,
-      contentLayout,
     });
 
     // mutates the content node so callers keep its methods plus the header setters
@@ -225,7 +223,6 @@ const Screen = forwardRef(
           useShadowHeader={useShadowHeader}
           gradientColor={gradientColor}
           headerBackground={headerBackground}
-          contentLayout={contentLayout}
         />
       );
     };

package/Layout/Section.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { View, ViewProps } from 'react-native';
-import { useGridSystem, useScreenLayout } from './utils';
+import { GRID_GUTTER, GRID_MARGIN } from './constants';
+import { useGridSystem } from './useGridSystem';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import styles from './styles';
 import { Image } from '../Image';
-import { Spacing } from '../Consts';
 
 export interface SectionProps extends ViewProps {
   /**
@@ -37,22 +37,21 @@ const Section: React.FC<SectionProps> = ({
   style,
   ...props
 }) => {
-  const { numberOfColumns } = useGridSystem();
-  const { contentWidth } = useScreenLayout();
+  const { numberOfColumns, gridWidth, gridOffset } = useGridSystem();
 
-  const gutterSize = 12;
+  const gutterSize = GRID_GUTTER;
   let margin = 0;
   if (useMargin) {
-    margin = 12;
+    margin = GRID_MARGIN;
   }
-  const widthSection = contentWidth - margin * 2;
+  const widthSection = gridWidth - margin * 2;
 
   const columnsWidth = widthSection - gutterSize * (numberOfColumns - 1);
   const sizePerSpan = columnsWidth / numberOfColumns - 1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,
-    gutterSize: Spacing.M,
+    gutterSize: GRID_GUTTER,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + gutterSize * (span - 1);
@@ -70,7 +69,7 @@ const Section: React.FC<SectionProps> = ({
           styles.rowWrap,
           {
             width: widthSection,
-            marginHorizontal: margin,
+            marginHorizontal: gridOffset + margin,
             gap: gutterSize,
           },
         ]}

package/Layout/constants.ts

@@ -0,0 +1,19 @@
+const GRID_MARGIN = 12;
+const GRID_GUTTER = 12;
+const GRID_PHONE_MAX_WIDTH = 600;
+const GRID_TABLET_MIN_WIDTH = 800;
+const GRID_DESKTOP_MIN_WIDTH = 1100;
+const GRID_PHONE_COLUMNS = 12;
+const GRID_TABLET_COLUMNS = 24;
+const GRID_DESKTOP_COLUMNS = 36;
+
+export {
+  GRID_DESKTOP_COLUMNS,
+  GRID_DESKTOP_MIN_WIDTH,
+  GRID_GUTTER,
+  GRID_MARGIN,
+  GRID_PHONE_COLUMNS,
+  GRID_PHONE_MAX_WIDTH,
+  GRID_TABLET_COLUMNS,
+  GRID_TABLET_MIN_WIDTH,
+};

package/Layout/screenHeader.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { StatusBar, StatusBarStyle } from 'react-native';
 import { StackNavigationOptions } from '@react-navigation/stack';
-import type { SharedValue } from 'react-native-reanimated';
 import Navigation from '../Application/Navigation';
 import { AnimatedHeader, SearchHeaderProps } from '../Application/types';
 import { exportHeaderTitle } from '../Application/navigationOptions';
@@ -13,11 +12,6 @@ import {
   SearchHeader,
 } from '../Application';
 import { DuoGlassBackground } from '../Application/Components/DuoGlassBackground';
-import {
-  type HeaderContentLayout,
-  useHeaderFrameOptions,
-  useHeaderLayout,
-} from '../Application/headerLayout';
 import { getHeaderMargin } from './utils';
 import { ANIMATED_BANNER_HEIGHT } from './screenTypes';
 import { HeaderType } from './types';
@@ -35,31 +29,6 @@ type ScreenHeaderParams = {
   gradientColor?: string;
   headerBackground?: string;
   layoutOffset: number;
-  contentLayout?: HeaderContentLayout;
-};
-
-/**
- * Transparent header for an `inputSearchProps` Screen: its title fades out over the
- * first 50pt of scroll while the search collapses into the bar.
- */
-const getSearchTitleOptions = (
-  sharedValue: SharedValue<number>,
-): StackNavigationOptions => {
-  return {
-    headerShown: true,
-    headerTransparent: true,
-    headerBackground: () => null,
-    headerTitle: (props: any) => (
-      <HeaderTitle
-        {...props}
-        interpolate={{
-          inputRange: [0, 50],
-          outputRange: [1, 0],
-        }}
-        animatedValue={sharedValue}
-      />
-    ),
-  };
 };
 
 /**
@@ -79,12 +48,9 @@ export const useScreenHeader = ({
   gradientColor,
   headerBackground,
   layoutOffset,
-  contentLayout,
 }: ScreenHeaderParams) => {
   const currentTint = useRef<string | undefined>(undefined);
   const appliedHeaderMode = useRef<string | undefined>(undefined);
-  const headerLayout = useHeaderLayout(contentLayout);
-  const frameOptions = useHeaderFrameOptions(contentLayout);
 
   // keepTitle leaves a title the screen set itself when the same type is re-applied
   const setHeaderType = useCallback(
@@ -113,7 +79,21 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = getSearchTitleOptions(sharedValue);
+            options = {
+              headerShown: true,
+              headerTransparent: true,
+              headerBackground: () => null,
+              headerTitle: (props: any) => (
+                <HeaderTitle
+                  {...props}
+                  interpolate={{
+                    inputRange: [0, 50],
+                    outputRange: [1, 0],
+                  }}
+                  animatedValue={sharedValue}
+                />
+              ),
+            };
           }
           break;
 
@@ -147,7 +127,21 @@ export const useScreenHeader = ({
             headerTitle: (props: any) => <HeaderTitle {...props} />,
           };
           if (inputSearchProps) {
-            options = getSearchTitleOptions(sharedValue);
+            options = {
+              headerShown: true,
+              headerTransparent: true,
+              headerBackground: () => null,
+              headerTitle: (props: any) => (
+                <HeaderTitle
+                  {...props}
+                  interpolate={{
+                    inputRange: [0, 50],
+                    outputRange: [1, 0],
+                  }}
+                  animatedValue={sharedValue}
+                />
+              ),
+            };
           }
       }
 
@@ -155,11 +149,7 @@ export const useScreenHeader = ({
         delete options.headerTitle;
       }
 
-      navigation?.instance?.setOptions({
-        header: undefined,
-        ...frameOptions,
-        ...options,
-      });
+      navigation?.instance?.setOptions({ header: undefined, ...options });
     },
     [
       gradientColor,
@@ -170,7 +160,6 @@ export const useScreenHeader = ({
       useShadowHeader,
       hasSideBar,
       quickReturnOptions,
-      frameOptions,
     ],
   );
 
@@ -218,7 +207,7 @@ export const useScreenHeader = ({
         };
       }
 
-      navigation?.instance?.setOptions({ ...frameOptions, ...options });
+      navigation?.instance?.setOptions(options);
     },
     [
       gradientColor,
@@ -229,23 +218,32 @@ export const useScreenHeader = ({
       hasSideBar,
       layoutOffset,
       quickReturnOptions,
-      frameOptions,
     ],
   );
 
   const setAnimatedSearch = useCallback(() => {
-    const options = getSearchTitleOptions(sharedValue);
-    navigation?.instance?.setOptions({
-      header: undefined,
-      ...frameOptions,
-      ...options,
-    });
-  }, [navigation?.instance, sharedValue, frameOptions]);
+    const options: StackNavigationOptions = {
+      headerShown: true,
+      headerTransparent: true,
+      headerBackground: () => null,
+      headerTitle: (props: any) => (
+        <HeaderTitle
+          {...props}
+          interpolate={{
+            inputRange: [0, 50],
+            outputRange: [1, 0],
+          }}
+          animatedValue={sharedValue}
+        />
+      ),
+    };
+
+    navigation?.instance?.setOptions({ header: undefined, ...options });
+  }, [navigation?.instance, sharedValue]);
 
-  // the search field spans the content (or the stretch frame), clear of the side bar
-  // and status bar clusters
+  // the search field spans the content, clear of the side bar and status bar clusters
   const setSearchHeader = (params: SearchHeaderProps) => {
-    let searchWidth = headerLayout.frameWidth;
+    let searchWidth = layout.width - 24;
     let searchLeft = Spacing.M;
     if (layout.sideBar) {
       searchWidth = layout.contentWidth - Spacing.M * 2;
@@ -256,7 +254,6 @@ export const useScreenHeader = ({
       searchWidth -= clearance.left + clearance.right;
     }
     const options: StackNavigationOptions = {
-      ...frameOptions,
       headerRight: undefined,
       headerTitleContainerStyle: {
         width: searchWidth,

package/Layout/screenTypes.ts

@@ -9,7 +9,6 @@ import {
 import { FloatingButtonProps } from './FloatingButton';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
-import type { HeaderContentLayout } from '../Application/headerLayout';
 
 export const ANIMATED_BANNER_HEIGHT = 210;
 
@@ -78,17 +77,10 @@ export interface ScreenProps extends ViewProps {
   layoutOffset?: -8 | -24 | -56 | number;
 
   /**
-   * Optional. Width of the right header. Defaults to the toolkit width (84), or 0 when
+   * Optional. Width of the right header. Defaults to the toolkit width (73), or 0 when
    * iPhone Duo floats the toolkit into its side bar.
    */
-  headerRightWidth?: 0 | 84 | 124 | number;
-
-  /**
-   * Optional. `stretch` centers back, title or search and the right cluster of the
-   * header in a 600pt frame on wide windows (foldable inner display, tablet); the
-   * background and status bar stay full width. Defaults to `grid`.
-   */
-  contentLayout?: HeaderContentLayout;
+  headerRightWidth?: 0 | 73 | 110 | number;
 
   /**
    * Optional. Props for the floating action button.

package/Layout/types.ts

@@ -13,7 +13,43 @@ export type ScreenRef = {
    */
   setSearchHeader: (params: SearchHeaderProps) => void;
 };
-export type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type SpanNumber =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20
+  | 21
+  | 22
+  | 23
+  | 24
+  | 25
+  | 26
+  | 27
+  | 28
+  | 29
+  | 30
+  | 31
+  | 32
+  | 33
+  | 34
+  | 35
+  | 36;
 
 export type GridContextProps = {
   /**