@hero-design/rn 8.27.1 → 8.27.3

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

@@ -143,7 +143,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
@@ -206,7 +206,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
@@ -269,7 +269,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
@@ -332,7 +332,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {

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

@@ -3,6 +3,7 @@
 exports[`Collapse renders correctly 1`] = `
 <View
   collapsable={false}
+  onLayout={[Function]}
   style={
     Object {
       "height": 0,
@@ -46,6 +47,7 @@ exports[`Collapse renders correctly 1`] = `
 exports[`Collapse should render Sample Text but not visible 1`] = `
 <View
   collapsable={false}
+  onLayout={[Function]}
   style={
     Object {
       "height": 0,

package/src/components/Collapse/index.tsx

@@ -1,6 +1,11 @@
 import type { ReactNode } from 'react';
 import React, { useCallback, useEffect } from 'react';
-import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type {
+  LayoutChangeEvent,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 import { LayoutAnimation, Platform, UIManager } from 'react-native';
 import { usePrevious } from '../../utils/hooks';
 import {
@@ -34,15 +39,24 @@ if (Platform.OS === 'android') {
   }
 }
 
-const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
+const Collapse = ({
+  open = false,
+  children,
+  testID,
+  style,
+  onLayout,
+}: CollapseProps) => {
   const [contentHeight, setContentHeight] = React.useState<number>(0);
+  const [componentMounted, setComponentMounted] =
+    React.useState<boolean>(false);
 
   const previousOpenState = usePrevious(open);
 
   useEffect(() => {
     if (
-      (open !== previousOpenState && previousOpenState !== undefined) ||
-      open
+      ((open !== previousOpenState && previousOpenState !== undefined) ||
+        open) &&
+      componentMounted
     ) {
       LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     }
@@ -52,11 +66,18 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
     setContentHeight(height);
   }, []);
 
+  const onCollapseLayout = useCallback((e: LayoutChangeEvent) => {
+    setComponentMounted(true);
+
+    onLayout?.(e);
+  }, []);
+
   return (
     <StyledWrapper
       style={{
         height: open ? contentHeight : 0,
       }}
+      onLayout={onCollapseLayout}
       testID={testID}
     >
       <StyledHiddenWrapper>

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -10,6 +10,22 @@ import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
 import { useTheme } from '../../theme';
 
+export const getInitialDateValue = (
+  value: Date,
+  minDate?: Date | undefined,
+  maxDate?: Date | undefined
+) => {
+  if (minDate && value < minDate) {
+    return minDate;
+  }
+
+  if (maxDate && value > maxDate) {
+    return maxDate;
+  }
+
+  return value;
+};
+
 const DatePickerIOS = ({
   value,
   minDate,
@@ -26,7 +42,9 @@ const DatePickerIOS = ({
   style,
   testID,
 }: Omit<DatePickerProps, 'variant'>) => {
-  const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
+  const [selectingDate, setSelectingDate] = useState<Date>(
+    getInitialDateValue(value || new Date(), minDate, maxDate)
+  );
   const [open, setOpen] = useState(false);
 
   const displayValue = value ? formatDate(displayFormat, value) : '';

package/src/components/DatePicker/__tests__/DatePickerIOS.spec.tsx

@@ -2,13 +2,37 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import DatePickerIOS from '../DatePickerIOS';
+import DatePickerIOS, { getInitialDateValue } from '../DatePickerIOS';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
   return (props: ModalProps) => <Modal {...props} />;
 });
 
+describe('getInitialDateValue', () => {
+  describe('when value is less than minDate', () => {
+    it('should return minDate', () => {
+      const value = new Date('2022-01-01T00:00:00.000Z');
+      const minDate = new Date('2025-01-01T00:00:00.000Z');
+      expect(getInitialDateValue(value, minDate)).toBe(minDate);
+    });
+  });
+  describe('when value is greater than maxDate', () => {
+    it('should return maxDate', () => {
+      const value = new Date('2025-01-01T00:00:00.000Z');
+      const maxDate = new Date('2022-01-01T00:00:00.000Z');
+      expect(getInitialDateValue(value, undefined, maxDate)).toBe(maxDate);
+    });
+  });
+  describe('when minDate < value < maxDate', () => {
+    it('should return value', () => {
+      const minDate = new Date('2022-01-01T00:00:00.000Z');
+      const value = new Date('2023-01-01T00:00:00.000Z');
+      const maxDate = new Date('2025-01-01T00:00:00.000Z');
+      expect(getInitialDateValue(value, minDate, maxDate)).toBe(value);
+    });
+  });
+});
 describe('DatePickerIOS', () => {
   it('renders correctly', () => {
     const onChange = jest.fn();

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -88,7 +88,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -187,14 +187,14 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View
@@ -313,7 +313,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -412,14 +412,14 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View
@@ -544,7 +544,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -643,14 +643,14 @@ exports[`DatePicker renders variant Calendar 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -88,7 +88,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -187,14 +187,14 @@ exports[`DatePickerAndroid renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -88,7 +88,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -187,14 +187,14 @@ exports[`DatePickerCalendar renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -88,7 +88,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -187,14 +187,14 @@ exports[`DatePickerIOS renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

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

@@ -34,11 +34,10 @@ const StyledBackdrop = styled(Animated.View)<
   ComponentProps<typeof Animated.View>
 >(({ theme }) => ({
   position: 'absolute',
-  flex: 1,
-  height: '100%',
-  width: '100%',
-  bottom: 0,
+  left: 0,
   right: 0,
+  top: 0,
+  bottom: 0,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 
@@ -52,23 +51,10 @@ const StyledHeaderText = styled(Typography.Text)<TextProps>(({ theme }) => ({
   textAlign: 'right',
 }));
 
-const StyledModalView = styled(View)({
-  position: 'absolute',
-  flex: 1,
-  height: '100%',
-  width: '100%',
-  bottom: 0,
-  right: 0,
-  justifyContent: 'flex-end',
-  alignItems: 'flex-end',
-  backgroundColor: 'transparent',
-});
-
 export {
   StyledHeaderText,
   StyledBackdrop,
   StyledContainer,
   StyledActionGroupContainer,
   StyledFAB,
-  StyledModalView,
 };