@hero-design/rn 8.34.2-alpha.0 → 8.35.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.34.2-alpha.0",
+  "version": "8.35.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,12 +22,9 @@
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
     "@hero-design/colors": "8.34.1",
-    "@hero-design/react-native-month-year-picker": "^8.34.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
-    "hero-editor": "^1.9.21",
-    "react-native-root-siblings": "^4.1.1",
-    "rollup-plugin-jsx": "^1.0.3"
+    "hero-editor": "^1.9.21"
   },
   "peerDependencies": {
     "@hero-design/react-native-month-year-picker": "^8.34.1",
@@ -38,6 +35,7 @@
     "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
+    "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^11.2.5"
@@ -50,6 +48,7 @@
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
     "@hero-design/eslint-plugin": "8.34.1",
+    "@hero-design/react-native-month-year-picker": "^8.34.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -83,5 +82,6 @@
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

package/rollup.config.js

@@ -35,6 +35,7 @@ export default {
     'react-native-vector-icons',
     'react-native-linear-gradient',
     '@hero-design/react-native-month-year-picker',
+    'react-native-root-siblings',
   ],
   plugins: [
     replace({
@@ -42,15 +43,10 @@ export default {
     }),
     nodeResolve({ extensions, browser: true }),
     flow(),
+    commonjs(),
     json(),
     typescript(),
-    babel({
-      exclude: 'node_modules/**',
-      presets: ['@babel/env', '@babel/preset-react'],
-      extensions,
-      babelHelpers: 'bundled',
-    }),
-    commonjs(),
+    babel({ extensions, babelHelpers: 'bundled' }),
     copy({
       targets: [
         {

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap

@@ -34,7 +34,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#48000a",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 32,
         "left": 0,
@@ -111,7 +111,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#737479",
+        "backgroundColor": "#0d2a2e",
         "borderRadius": 999,
         "height": 32,
         "left": 22.4,
@@ -188,7 +188,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#193539",
         "borderRadius": 999,
         "height": 32,
         "left": 44.8,
@@ -265,7 +265,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#353957",
+        "backgroundColor": "#264144",
         "borderRadius": 999,
         "height": 32,
         "left": 67.19999999999999,
@@ -342,7 +342,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#25006e",
+        "backgroundColor": "#334c4f",
         "borderRadius": 999,
         "height": 32,
         "left": 89.6,
@@ -438,7 +438,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#48000a",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 40,
         "left": 0,
@@ -515,7 +515,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#737479",
+        "backgroundColor": "#0d2a2e",
         "borderRadius": 999,
         "height": 40,
         "left": 28,
@@ -592,7 +592,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#193539",
         "borderRadius": 999,
         "height": 40,
         "left": 56,
@@ -669,7 +669,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#353957",
+        "backgroundColor": "#264144",
         "borderRadius": 999,
         "height": 40,
         "left": 84,

package/src/components/FAB/ActionGroup/FABModal.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Dimensions, View, ViewStyle } from 'react-native';
+import { ModalHandler, showFABModal } from './ModalPresenter';
+
+const wrapperStyle: ViewStyle = {
+  width: Dimensions.get('window').width,
+  height: Dimensions.get('window').height,
+};
+
+export interface ModalProps {
+  /**
+   * Content of the modal.
+   */
+  children: React.ReactElement;
+  /**
+   * Visibility of the modal
+   */
+  visible?: boolean;
+  /**
+   * Callback when the modal is shown.
+   */
+  onShow?: () => void;
+  /**
+   * TestID of the modal.
+   */
+  testID?: string;
+}
+
+const fABModal = ({ children, onShow, testID, visible = true }: ModalProps) => {
+  const [modalHandler, setModalHandler] = React.useState<ModalHandler>();
+
+  const getModalContent = React.useCallback(
+    () => (
+      <View pointerEvents="box-none" style={wrapperStyle} testID={testID}>
+        {children}
+      </View>
+    ),
+    [visible, children, onShow, testID]
+  );
+
+  React.useEffect(() => {
+    if (visible) {
+      // Modal does not exist, create a new one
+      if (!modalHandler) {
+        const newModalHandler = showFABModal(getModalContent());
+        setModalHandler(newModalHandler);
+
+        onShow?.();
+      }
+      // Modal already exists, update it
+      else {
+        modalHandler.update(getModalContent());
+      }
+    } else {
+      modalHandler?.dismiss();
+      setModalHandler(undefined);
+    }
+  }, [getModalContent]);
+
+  return null;
+};
+
+export default fABModal;

package/src/components/FAB/ActionGroup/FABModalContentWrapper.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+type ModalContentWrapperProps = {
+  children: React.ReactElement;
+  visible?: boolean;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+  animated?: boolean;
+  pointerEvents: 'box-none' | 'none' | 'box-only' | 'auto';
+};
+
+export type ModalContentWrapperHandler = {
+  hide: (callback?: () => void) => void;
+};
+
+const FABModalContentWrapper = ({
+  children,
+  testID,
+  pointerEvents,
+}: ModalContentWrapperProps) => {
+  return (
+    <View testID={testID} pointerEvents={pointerEvents}>
+      {children}
+    </View>
+  );
+};
+
+FABModalContentWrapper.displayName = 'FABModalContentWrapper';
+
+export default FABModalContentWrapper;

package/src/components/FAB/ActionGroup/ModalPresenter/ModalPresenter.tsx

@@ -0,0 +1,133 @@
+import React, { forwardRef, useRef } from 'react';
+import { Animated, StyleSheet, ViewProps } from 'react-native';
+import RootSiblings from 'react-native-root-siblings';
+import Box from '../../../Box';
+
+export type ModalPresenterHandles = {
+  animatedOut: (completion?: () => void) => void;
+};
+export type FABModalDismissFunc = (onDismiss?: () => void) => void;
+export type FABModalUpdateFunc = (content: React.ReactNode) => void;
+
+/**
+ * Modal handler is returned by `showModal` function.
+ */
+export type FABModalHandler = {
+  /**
+   * Same `dismiss` function as in `ModalContentProps`.
+   */
+  dismiss: FABModalDismissFunc;
+  /**
+   * Same `update` function as in `ModalContentProps`.
+   */
+  update: FABModalUpdateFunc;
+};
+
+const FABModalPresenter = forwardRef<ModalPresenterHandles, ViewProps>(
+  ({ style, children, ...props }, ref) => {
+    const animatedOpacity = useRef(new Animated.Value(0));
+
+    React.useEffect(() => {
+      Animated.spring(animatedOpacity.current, {
+        toValue: 1,
+        useNativeDriver: true,
+      }).start();
+    }, []);
+
+    React.useImperativeHandle(ref, () => ({
+      animatedOut: (completion?: () => void) => {
+        Animated.spring(animatedOpacity.current, {
+          toValue: 0,
+          useNativeDriver: true,
+        }).start(() => {
+          completion?.();
+        });
+      },
+    }));
+
+    return (
+      <Box style={StyleSheet.absoluteFill} pointerEvents="box-none">
+        <Animated.View
+          style={[
+            {
+              width: '100%',
+              height: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+              opacity: animatedOpacity.current,
+            },
+            style,
+          ]}
+          {...props}
+          pointerEvents="box-none"
+        >
+          {children}
+        </Animated.View>
+      </Box>
+    );
+  }
+);
+
+/**
+ * Present a modal on screen immediately.
+ *
+ * The new presented modal will be on top of existing modals if there are any.
+ *
+ * @param Content A component to be presented as a modal on screen.
+ * This component will be centered horizontally and vertically on screen with
+ * a semitransparent black overlay underneath.
+ * @param contentProps Props for this modal component.
+ * @returns A `ModalHandler` you can use to dismiss the modal.
+ */
+
+export const showFABModal = (content: React.ReactNode): FABModalHandler => {
+  let ref: ModalPresenterHandles | null = null;
+  let rootSiblings: RootSiblings | null = null;
+
+  const dismiss: FABModalDismissFunc = (onDismiss) => {
+    if (rootSiblings) {
+      const cleanup = () => {
+        rootSiblings?.destroy();
+        rootSiblings = null;
+        ref = null;
+        onDismiss?.();
+      };
+
+      if (ref) {
+        ref.animatedOut(cleanup);
+      } else {
+        cleanup();
+      }
+    }
+  };
+
+  const update: FABModalUpdateFunc = (newContent) => {
+    rootSiblings?.update(
+      <FABModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {newContent}
+      </FABModalPresenter>
+    );
+  };
+
+  rootSiblings = new RootSiblings(
+    (
+      <FABModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {content}
+      </FABModalPresenter>
+    )
+  );
+
+  return { dismiss, update };
+};
+
+FABModalPresenter.displayName = 'FABModalPresenter';
+
+export default FABModalPresenter;

package/src/components/FAB/ActionGroup/ModalPresenter/index.tsx

@@ -0,0 +1,13 @@
+import {
+  FABModalDismissFunc,
+  FABModalHandler,
+  showFABModal,
+  ModalPresenterHandles,
+} from './ModalPresenter';
+
+export type {
+  FABModalDismissFunc as ModalDismissFunc,
+  FABModalHandler as ModalHandler,
+  ModalPresenterHandles,
+};
+export { showFABModal };

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -764,7 +764,7 @@ exports[`ActionGroup has active true 1`] = `
         "backgroundColor": "#000000",
         "bottom": 0,
         "left": 0,
-        "opacity": 0.4,
+        "opacity": 0.25,
         "position": "absolute",
         "right": 0,
         "top": 0,
@@ -1373,7 +1373,7 @@ exports[`ActionGroup has active true 1`] = `
         Object {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#664780",
           "borderRadius": 999,
           "elevation": 2,
           "flexDirection": "row",

package/src/components/FAB/ActionGroup/index.tsx

@@ -14,6 +14,7 @@ import {
 
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
+import FABModal from './FABModal';
 
 export type ActionGroupHandles = {
   showFAB: () => void;
@@ -31,7 +32,6 @@ export interface ActionGroupProps {
    * This function is called on pressing the FAB button.
    * */
   onPress?: () => void;
-
   /**
    * Specify if the FAB button is in active state and the action group is shown.
    * */
@@ -114,7 +114,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
     const interpolatedBackdropOpacityAnimation =
       tranlateXAnimation.current.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, 0.4],
+        outputRange: [0, 0.25],
       });
 
     const interpolatedActionGroupOpacityAnimation =
@@ -124,51 +124,53 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       });
 
     return (
-      <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
-        <StyledBackdrop
-          pointerEvents={active ? 'auto' : 'box-none'}
-          testID="back-drop"
-          style={{ opacity: interpolatedBackdropOpacityAnimation }}
-        />
-        <StyledActionGroupContainer
-          pointerEvents={active ? 'auto' : 'none'}
-          testID="action-group"
-          style={{
-            opacity: interpolatedActionGroupOpacityAnimation,
-          }}
-        >
-          {!!headerTitle && (
-            <Animated.View
-              style={{ transform: [{ translateY: titleTranslateY }] }}
-            >
-              <StyledHeaderText testID="header-text" level="h4">
-                {headerTitle}
-              </StyledHeaderText>
-            </Animated.View>
-          )}
-
-          <Box style={[style, { paddingBottom: 0 }]}>
-            {items?.map((itemProp, index) => (
-              <ActionItem
-                key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
-                {...itemProp}
-                index={active ? index : items.length - index}
-                active={active}
-              />
-            ))}
-          </Box>
-        </StyledActionGroupContainer>
-
-        <StyledFAB
-          testID="fab"
-          icon={fabIcon}
-          onPress={onPress}
-          animated
-          active={active}
-          title={fabTitle}
-          ref={fabRef}
-        />
-      </StyledContainer>
+      <FABModal>
+        <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
+          <StyledBackdrop
+            pointerEvents={active ? 'auto' : 'box-none'}
+            testID="back-drop"
+            style={{ opacity: interpolatedBackdropOpacityAnimation }}
+          />
+          <StyledActionGroupContainer
+            pointerEvents={active ? 'auto' : 'none'}
+            testID="action-group"
+            style={{
+              opacity: interpolatedActionGroupOpacityAnimation,
+            }}
+          >
+            {!!headerTitle && (
+              <Animated.View
+                style={{ transform: [{ translateY: titleTranslateY }] }}
+              >
+                <StyledHeaderText testID="header-text" level="h4">
+                  {headerTitle}
+                </StyledHeaderText>
+              </Animated.View>
+            )}
+
+            <Box style={[style, { paddingBottom: 0 }]}>
+              {items?.map((itemProp, index) => (
+                <ActionItem
+                  key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
+                  {...itemProp}
+                  index={active ? index : items.length - index}
+                  active={active}
+                />
+              ))}
+            </Box>
+          </StyledActionGroupContainer>
+
+          <StyledFAB
+            testID="fab"
+            icon={fabIcon}
+            onPress={onPress}
+            animated
+            active={active}
+            title={fabTitle}
+            ref={fabRef}
+          />
+        </StyledContainer>
+      </FABModal>
     );
   }
 );

package/src/components/FAB/FAB.tsx

@@ -175,6 +175,7 @@ const FAB = forwardRef<FABHandles, FABProps>(
           },
         ]}
         testID={testID}
+        themeActive={active}
       >
         {isIconOnly ? (
           <IconOnlyContent

package/src/components/FAB/StyledFAB.tsx

@@ -6,22 +6,26 @@ import Icon from '../Icon';
 import Typography from '../Typography';
 import Box from '../Box';
 
-const StyledFAB = styled(TouchableHighlight)<TouchableHighlightProps>(
-  ({ theme }) => ({
-    backgroundColor: theme.__hd__.fab.colors.buttonBackground,
-    borderRadius: theme.radii.rounded,
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'flex-start',
-    padding: theme.__hd__.fab.space.containerPadding,
-    flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.colors.shadow,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity,
-  })
-);
+const StyledFAB = styled(TouchableHighlight)<
+  TouchableHighlightProps & {
+    themeActive?: boolean;
+  }
+>(({ theme, themeActive }) => ({
+  backgroundColor: themeActive
+    ? theme.__hd__.fab.colors.buttonActiveBackground
+    : theme.__hd__.fab.colors.buttonBackground,
+  borderRadius: theme.radii.rounded,
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  padding: theme.__hd__.fab.space.containerPadding,
+  flexDirection: 'row',
+  elevation: theme.__hd__.fab.shadows.elevation,
+  shadowColor: theme.__hd__.fab.colors.shadow,
+  shadowOffset: theme.__hd__.fab.shadows.offset,
+  shadowRadius: theme.__hd__.fab.shadows.radius,
+  shadowOpacity: theme.__hd__.fab.shadows.opacity,
+}));
 
 const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({
   color: theme.__hd__.fab.colors.icon,

package/src/components/FAB/__tests__/StyledFAB.spec.tsx

@@ -6,7 +6,17 @@ import { StyledFAB, StyledFABIcon } from '../StyledFAB';
 describe('StyledFAB', () => {
   it('renders correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledFAB>
+      <StyledFAB themeActive={false}>
+        <Typography.Body variant="small"> button </Typography.Body>
+      </StyledFAB>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledFAB themeActive>
         <Typography.Body variant="small"> button </Typography.Body>
       </StyledFAB>
     );

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -57,6 +57,63 @@ exports[`StyledFAB renders correctly 1`] = `
 </View>
 `;
 
+exports[`StyledFAB renders correctly 2`] = `
+<View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#664780",
+        "borderRadius": 999,
+        "elevation": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 8,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+     button 
+  </Text>
+</View>
+`;
+
 exports[`StyledFABIcon renders correctly 1`] = `
 <HeroIcon
   name="add"