@hero-design/rn 8.30.3 → 8.30.4

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

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

package/src/components/Skeleton/index.tsx

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

package/src/types.ts

@@ -15,8 +15,6 @@ 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,
@@ -34,6 +32,4 @@ export type {
   TextInputHandles,
   Theme,
   CardCarouselHandles,
-  FABHandles,
-  ActionGroupHandles,
 };

package/testUtils/setup.tsx

@@ -11,7 +11,6 @@ jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
 
   const mockedAnimatedFunctions = {
-    setImmediate: () => jest.fn(),
     start: () => jest.fn(),
     stop: () => jest.fn(),
     _isUsingNativeDriver: () => jest.fn(),
@@ -20,7 +19,6 @@ 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 & import("react").RefAttributes<import("../FAB").FABHandles> & {
+declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

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

@@ -1,12 +1,6 @@
-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.
@@ -41,5 +35,5 @@ export interface ActionGroupProps {
      */
     testID?: string;
 }
-declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<ActionGroupHandles>>;
+declare const ActionGroup: ({ headerTitle, onPress, active, style, items, testID, fabTitle, fabIcon, }: ActionGroupProps) => JSX.Element;
 export default ActionGroup;

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

@@ -1,11 +1,5 @@
-import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { 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.
@@ -36,5 +30,5 @@ export interface FABProps {
      */
     testID?: string;
 }
-declare const FAB: React.ForwardRefExoticComponent<FABProps & React.RefAttributes<FABHandles>>;
+declare const FAB: ({ onPress, title, icon, animated, testID, active, style, }: FABProps) => JSX.Element;
 export default FAB;

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

@@ -1,5 +1,4 @@
-/// <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>>;
+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;
 };
 export default _default;

package/types/types.d.ts

@@ -9,6 +9,4 @@ import type { ListRenderOptionInfo, SectionListRenderOptionInfo } from './compon
 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, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, FABHandles, ActionGroupHandles, };
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, };