@hero-design/rn 8.35.0-alpha.4 → 8.36.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.35.0-alpha.4",
+  "version": "8.36.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@gorhom/portal": "^1.0.14",
-    "@hero-design/colors": "8.34.1",
+    "@hero-design/colors": "8.35.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
-    "hero-editor": "^1.9.21"
+    "hero-editor": "^1.9.21",
+    "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.34.1",
+    "@hero-design/react-native-month-year-picker": "^8.35.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -48,8 +48,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@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",
+    "@hero-design/eslint-plugin": "8.35.0",
+    "@hero-design/react-native-month-year-picker": "^8.35.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,10 +65,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.34.1",
+    "eslint-config-hd": "8.35.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.34.1",
+    "prettier-config-hd": "8.35.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

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

@@ -143,7 +143,7 @@ exports[`Attachment renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "fontSize": 20,
           },
           undefined,

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

@@ -6,7 +6,7 @@ exports[`Badge has danger style when intent is danger 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#de350b",
+      "backgroundColor": "#cb300a",
       "borderRadius": 999,
       "height": 20,
       "justifyContent": "center",
@@ -59,7 +59,7 @@ exports[`Badge has info style when intent is info 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#4568fb",
+      "backgroundColor": "#355bfb",
       "borderRadius": 999,
       "height": 20,
       "justifyContent": "center",
@@ -218,7 +218,7 @@ exports[`Badge has warning style when intent is warning 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#ffa234",
+      "backgroundColor": "#ac5d00",
       "borderRadius": 999,
       "height": 20,
       "justifyContent": "center",

package/src/components/Badge/__tests__/__snapshots__/Status.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`Status Badge renders correctly 1`] = `
     collapsable={false}
     style={
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 999,
         "height": 8,
         "opacity": 1,

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -85,7 +85,7 @@ exports[`StyledLoadingIndicator has outlined-danger style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,
@@ -145,7 +145,7 @@ exports[`StyledLoadingIndicator has text-danger style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -489,7 +489,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -521,7 +521,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -553,7 +553,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -831,7 +831,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -863,7 +863,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -895,7 +895,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
       style={
         Array [
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,

package/src/components/Button/UtilityButton/__tests__/__snapshots__/index.spec.tsx.snap

@@ -15,7 +15,7 @@ exports[`UtilityButton snapshot has intent primary style 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#f6f6f7",
+      "backgroundColor": "#ffffff",
       "borderRadius": 8,
       "flexDirection": "row",
       "justifyContent": "center",
@@ -96,7 +96,7 @@ exports[`UtilityButton snapshot has intent text style 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#f6f6f7",
+      "backgroundColor": "#ffffff",
       "borderRadius": 8,
       "flexDirection": "row",
       "justifyContent": "center",

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

@@ -1161,7 +1161,7 @@ exports[`Button renders correctly 13`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "flexShrink": 1,
             "lineHeight": 22,
             "textAlign": "center",
@@ -1244,7 +1244,7 @@ exports[`Button renders correctly 14`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
+              "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
               "marginBottom": 4,
@@ -1276,7 +1276,7 @@ exports[`Button renders correctly 14`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
+              "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
               "marginBottom": 4,
@@ -1308,7 +1308,7 @@ exports[`Button renders correctly 14`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
+              "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
               "marginBottom": 4,

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
       Object {
         "alignItems": "center",
         "alignSelf": "stretch",
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 32,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -113,7 +113,7 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
         "alignItems": "center",
         "alignSelf": "stretch",
         "backgroundColor": "transparent",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
@@ -411,7 +411,7 @@ exports[`StyledButtonIcon has outlined-danger style 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "fontSize": 20,
         },
         undefined,
@@ -480,7 +480,7 @@ exports[`StyledButtonIcon has text-danger style 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "fontSize": 20,
         },
         undefined,
@@ -696,7 +696,7 @@ exports[`StyledButtonText has outlined-danger style 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "flexShrink": 1,
           "textAlign": "center",
         },
@@ -789,7 +789,7 @@ exports[`StyledButtonText has text-danger style 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "flexShrink": 1,
           "textAlign": "center",
         },

package/src/components/Calendar/__tests__/index.spec.tsx

@@ -139,4 +139,33 @@ describe('Calendar', () => {
       expect(queryByText('Android picker')).toBeDefined();
     }
   });
+
+  it.each`
+    platform
+    ${'ios'}
+    ${'android'}
+  `(
+    'onToggleMonthPicker is called when toggling month year picker on $platform',
+    ({ platform }) => {
+      jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+        OS: platform,
+        select: () => null,
+      }));
+
+      const onToggleMonthPicker = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <Calendar
+          value={new Date(2022, 10, 5)}
+          visibleDate={new Date(2022, 10, 5)}
+          minDate={new Date(2022, 10, 3)}
+          maxDate={new Date(2022, 10, 27)}
+          onMonthChange={jest.fn()}
+          onToggleMonthPicker={onToggleMonthPicker}
+        />
+      );
+
+      fireEvent.press(getByTestId('calendar-month-picker'));
+      expect(onToggleMonthPicker).toHaveBeenCalled();
+    }
+  );
 });

package/src/components/Calendar/index.tsx

@@ -80,6 +80,10 @@ export interface CalendarProps {
    * Callback when header month is changed, passing this prop will disable onTitlePress.
    */
   onMonthChange?: (date: Date) => void;
+  /*
+   * Callback when month picker is toggled.
+   */
+  onToggleMonthPicker?: (visible: boolean) => void;
   /**
    * Label for the confirm button of the month picker, Android only.
    */
@@ -102,6 +106,7 @@ const Calendar = ({
   markedDates = [],
   testID,
   onMonthChange = noop,
+  onToggleMonthPicker = noop,
   monthPickerConfirmLabel,
   monthPickerCancelLabel,
 }: CalendarProps) => {
@@ -186,7 +191,10 @@ const Calendar = ({
             ) : (
               <TouchableOpacity
                 testID="calendar-month-picker"
-                onPress={() => setMonthPickerVisible(!monthPickerVisible)}
+                onPress={() => {
+                  onToggleMonthPicker?.(!monthPickerVisible);
+                  setMonthPickerVisible(!monthPickerVisible);
+                }}
               >
                 <Box
                   flexDirection="row"
@@ -309,6 +317,7 @@ const Calendar = ({
               maximumDate={maxDate}
               onChange={(action, date) => {
                 setMonthPickerVisible(false);
+                onToggleMonthPicker?.(false);
 
                 if (action === 'dateSetAction' && !!date) {
                   onMonthChange(date);

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

@@ -1488,7 +1488,81 @@ exports[`Carousel should call skip call back when press skip 1`] = `
         undefined,
       ]
     }
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          Array [
+            Object {
+              "paddingVertical": 8,
+            },
+            undefined,
+          ],
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="page-control-indicator0"
+      />
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator2"
+      />
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator3"
+      />
+    </View>
+  </View>
   <View
     style={
       Array [
@@ -2107,79 +2181,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
           Skip
         </Text>
       </View>
-      <View
-        style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "flexDirection": "row",
-            },
-            Array [
-              Object {
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 1,
-              "width": 24,
-            }
-          }
-          testID="page-control-indicator0"
-        />
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 0.5,
-              "width": 8,
-            }
-          }
-          testID="page-control-indicator1"
-        />
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 0.5,
-              "width": 8,
-            }
-          }
-          testID="page-control-indicator2"
-        />
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 0.5,
-              "width": 8,
-            }
-          }
-          testID="page-control-indicator3"
-        />
-      </View>
     </View>
   </View>
 </View>

package/src/components/Carousel/index.tsx

@@ -87,7 +87,7 @@ const Carousel = ({
   selectedItemIndex = 0,
   style,
   shouldShowPagination = noop,
-  pageControlPosition = 'bottom',
+  pageControlPosition = 'top',
   ...nativeProps
 }: CarouselProps) => {
   useDeprecation(

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,18 +1,19 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
 import formatDate from 'date-fns/fp/format';
+import React, { useState } from 'react';
+import { Platform, TouchableOpacity, View } from 'react-native';
 
 import BottomSheet from '../BottomSheet';
-import TextInput from '../TextInput';
 import Button from '../Button';
-import type { DatePickerProps } from './types';
 import Calendar, { CalendarProps } from '../Calendar';
+import TextInput from '../TextInput';
+import type { DatePickerProps } from './types';
 
 const InternalCalendar = ({
   minDate,
   maxDate,
   value,
   onChange,
+  onToggleMonthPicker,
   monthPickerConfirmLabel,
   monthPickerCancelLabel,
 }: Pick<
@@ -21,6 +22,7 @@ const InternalCalendar = ({
   | 'maxDate'
   | 'value'
   | 'onChange'
+  | 'onToggleMonthPicker'
   | 'monthPickerConfirmLabel'
   | 'monthPickerCancelLabel'
 >) => {
@@ -50,6 +52,7 @@ const InternalCalendar = ({
       minDate={minDate}
       maxDate={maxDate}
       onMonthChange={(date) => setVisibleDate(date)}
+      onToggleMonthPicker={onToggleMonthPicker}
       monthPickerConfirmLabel={monthPickerConfirmLabel}
       monthPickerCancelLabel={monthPickerCancelLabel}
     />
@@ -75,9 +78,12 @@ const DatePickerCalendar = ({
   monthPickerCancelLabel,
 }: Omit<DatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
+  const [monthPickerVisible, setMonthPickerVisible] = useState(false);
+  const shouldHideToolbar = Platform.OS === 'ios' && monthPickerVisible;
 
   const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const displayValue = value ? formatDate(displayFormat, value) : '';
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerCalendar">
@@ -99,16 +105,18 @@ const DatePickerCalendar = ({
         onRequestClose={() => setOpen(false)}
         header={label}
         footer={
-          <Button
-            variant="text"
-            text={confirmLabel}
-            onPress={() => {
-              if (selectingDate) {
-                onChange(selectingDate);
-              }
-              setOpen(false);
-            }}
-          />
+          shouldHideToolbar ? undefined : (
+            <Button
+              variant="text"
+              text={confirmLabel}
+              onPress={() => {
+                if (selectingDate) {
+                  onChange(selectingDate);
+                }
+                setOpen(false);
+              }}
+            />
+          )
         }
       >
         <InternalCalendar
@@ -118,6 +126,7 @@ const DatePickerCalendar = ({
           onChange={setSelectingDate}
           monthPickerConfirmLabel={monthPickerConfirmLabel}
           monthPickerCancelLabel={monthPickerCancelLabel}
+          onToggleMonthPicker={(visible) => setMonthPickerVisible(visible)}
         />
       </BottomSheet>
     </TouchableOpacity>

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

@@ -16,6 +16,16 @@ const StyledContainer = styled(View)<ViewProps>({
   justifyContent: 'flex-end',
 });
 
+const StyledContainerInModal = styled(View)<ViewProps>({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end',
+});
+
 const StyledActionGroupContainer = styled(Animated.View)<
   ComponentProps<typeof Animated.View>
 >({
@@ -38,6 +48,7 @@ const StyledBackdrop = styled(Animated.View)<
   right: 0,
   top: 0,
   bottom: 0,
+  opacity: 0.25,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 
@@ -52,6 +63,7 @@ export {
   StyledHeaderText,
   StyledBackdrop,
   StyledContainer,
+  StyledContainerInModal,
   StyledActionGroupContainer,
   StyledFAB,
 };