@hero-design/rn 8.30.4 → 9.1.0-rc.0

package/src/components/Skeleton/__tests__/__snapshots__/index.spec.tsx.snap

@@ -57,13 +57,13 @@ exports[`Skeleton renders correctly by default 1`] = `
       }
       style={
         Object {
-          "height": "100%",
+          "height": 0,
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": "100%",
+          "width": 0,
         }
       }
     />
@@ -128,13 +128,13 @@ exports[`Skeleton renders correctly when intent is dark and variant is circular
       }
       style={
         Object {
-          "height": "100%",
+          "height": 0,
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": "100%",
+          "width": 0,
         }
       }
     />
@@ -199,13 +199,13 @@ exports[`Skeleton renders correctly when intent is dark and variant is rectangul
       }
       style={
         Object {
-          "height": "100%",
+          "height": 0,
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": "100%",
+          "width": 0,
         }
       }
     />
@@ -270,13 +270,13 @@ exports[`Skeleton renders correctly when intent is dark and variant is rounded 1
       }
       style={
         Object {
-          "height": "100%",
+          "height": 0,
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": "100%",
+          "width": 0,
         }
       }
     />
@@ -341,13 +341,13 @@ exports[`Skeleton renders correctly when intent is light and variant is circular
       }
       style={
         Object {
-          "height": "100%",
+          "height": 0,
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": "100%",
+          "width": 0,
         }
       }
     />
@@ -412,13 +412,13 @@ exports[`Skeleton renders correctly when intent is light and variant is rectangu
       }
       style={
         Object {
-          "height": "100%",
+          "height": 0,
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": "100%",
+          "width": 0,
         }
       }
     />
@@ -483,13 +483,13 @@ exports[`Skeleton renders correctly when intent is light and variant is rounded
       }
       style={
         Object {
-          "height": "100%",
+          "height": 0,
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": "100%",
+          "width": 0,
         }
       }
     />

package/src/components/Skeleton/index.tsx

@@ -69,6 +69,9 @@ const Skeleton = ({
   const [containerWidth, setContainerWidth] = useState(
     Number(StyleSheet.flatten(style)?.width) || 0
   );
+  const [containerHeight, setContainerHeight] = useState(
+    Number(StyleSheet.flatten(style)?.height) || 0
+  );
 
   const [shouldStartAnimation, setShouldStartAnimation] = useState(false);
 
@@ -93,7 +96,8 @@ const Skeleton = ({
   });
 
   const onContainerLayout = useCallback((e: LayoutChangeEvent) => {
-    const { width } = e.nativeEvent.layout;
+    const { width, height } = e.nativeEvent.layout;
+    setContainerHeight(height);
     setContainerWidth(width);
 
     if (!shouldStartAnimation) {
@@ -116,8 +120,8 @@ const Skeleton = ({
           start={gradientPositions.start}
           end={gradientPositions.end}
           style={{
-            width: '100%',
-            height: '100%',
+            width: containerWidth,
+            height: containerHeight,
             transform: [{ translateX }],
           }}
           colors={colors}

package/src/types.ts

@@ -15,6 +15,8 @@ import type {
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
+import { FABHandles } from './components/FAB/FAB';
+import { ActionGroupHandles } from './components/FAB/ActionGroup';
 
 export type {
   BottomNavigationTabType,
@@ -32,4 +34,6 @@ export type {
   TextInputHandles,
   Theme,
   CardCarouselHandles,
+  FABHandles,
+  ActionGroupHandles,
 };

package/testUtils/setup.tsx

@@ -11,6 +11,7 @@ jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
 
   const mockedAnimatedFunctions = {
+    setImmediate: () => jest.fn(),
     start: () => jest.fn(),
     stop: () => jest.fn(),
     _isUsingNativeDriver: () => jest.fn(),
@@ -19,6 +20,7 @@ jest.mock('react-native', () => {
 
   RN.Animated.timing = () => mockedAnimatedFunctions;
   RN.Animated.spring = () => mockedAnimatedFunctions;
+  RN.Animated.stagger = () => mockedAnimatedFunctions;
 
   return RN;
 });

package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -14,7 +14,7 @@ declare const StyledActionGroupContainer: import("@emotion/native").StyledCompon
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & {
+declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & import("react").RefAttributes<import("../FAB").FABHandles> & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

package/types/components/FAB/ActionGroup/index.d.ts

@@ -1,6 +1,12 @@
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../../Icon';
 import type { ActionItemProps } from './ActionItem';
+export declare type ActionGroupHandles = {
+    showFAB: () => void;
+    collapseFAB: () => void;
+    hideFAB: () => void;
+};
 export interface ActionGroupProps {
     /**
      * Title of the action group header.
@@ -35,5 +41,5 @@ export interface ActionGroupProps {
      */
     testID?: string;
 }
-declare const ActionGroup: ({ headerTitle, onPress, active, style, items, testID, fabTitle, fabIcon, }: ActionGroupProps) => JSX.Element;
+declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<ActionGroupHandles>>;
 export default ActionGroup;

package/types/components/FAB/FAB.d.ts

@@ -1,5 +1,11 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
+export declare type FABHandles = {
+    show: () => void;
+    collapse: () => void;
+    hide: () => void;
+};
 export interface FABProps {
     /**
      * Name of the Icon.
@@ -30,5 +36,5 @@ export interface FABProps {
      */
     testID?: string;
 }
-declare const FAB: ({ onPress, title, icon, animated, testID, active, style, }: FABProps) => JSX.Element;
+declare const FAB: React.ForwardRefExoticComponent<FABProps & React.RefAttributes<FABHandles>>;
 export default FAB;

package/types/components/FAB/index.d.ts

@@ -1,4 +1,5 @@
-declare const _default: (({ onPress, title, icon, animated, testID, active, style, }: import("./FAB").FABProps) => JSX.Element) & {
-    ActionGroup: ({ headerTitle, onPress, active, style, items, testID, fabTitle, fabIcon, }: import("./ActionGroup").ActionGroupProps) => JSX.Element;
+/// <reference types="react" />
+declare const _default: import("react").ForwardRefExoticComponent<import("./FAB").FABProps & import("react").RefAttributes<import("./FAB").FABHandles>> & {
+    ActionGroup: import("react").ForwardRefExoticComponent<import("./ActionGroup").ActionGroupProps & import("react").RefAttributes<import("./ActionGroup").ActionGroupHandles>>;
 };
 export default _default;

package/types/types.d.ts

@@ -9,4 +9,6 @@ import type { ListRenderOptionInfo, SectionListRenderOptionInfo } from './compon
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
-export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, };
+import { FABHandles } from './components/FAB/FAB';
+import { ActionGroupHandles } from './components/FAB/ActionGroup';
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, FABHandles, ActionGroupHandles, };