@hero-design/rn 7.23.0 → 7.25.0

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

@@ -251,7 +251,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#4d6265",
+            "borderColor": "#bfc1c5",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -268,8 +268,8 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#4d6265",
-              "borderColor": "#4d6265",
+              "backgroundColor": "#bfc1c5",
+              "borderColor": "#bfc1c5",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -297,7 +297,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#4d6265",
+            "borderColor": "#bfc1c5",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -314,8 +314,8 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#4d6265",
-              "borderColor": "#4d6265",
+              "backgroundColor": "#bfc1c5",
+              "borderColor": "#bfc1c5",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -343,7 +343,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#4d6265",
+            "borderColor": "#bfc1c5",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -360,7 +360,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#4d6265",
+              "borderColor": "#bfc1c5",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -388,7 +388,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#4d6265",
+            "borderColor": "#bfc1c5",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -405,7 +405,7 @@ exports[`rendering renders correctly when disabled 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#4d6265",
+              "borderColor": "#bfc1c5",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -786,7 +786,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#f46363",
+            "borderColor": "#de350b",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -803,8 +803,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#f46363",
-              "borderColor": "#f46363",
+              "backgroundColor": "#de350b",
+              "borderColor": "#de350b",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -832,7 +832,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#f46363",
+            "borderColor": "#de350b",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -849,8 +849,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#f46363",
-              "borderColor": "#f46363",
+              "backgroundColor": "#de350b",
+              "borderColor": "#de350b",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -878,7 +878,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#f46363",
+            "borderColor": "#de350b",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -895,7 +895,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#f46363",
+              "borderColor": "#de350b",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -923,7 +923,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#f46363",
+            "borderColor": "#de350b",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -940,7 +940,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#f46363",
+              "borderColor": "#de350b",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -984,7 +984,7 @@ exports[`rendering renders correctly when there is error 1`] = `
       style={
         Array [
           Object {
-            "color": "#f46363",
+            "color": "#de350b",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
             "paddingLeft": 4,

package/src/components/Progress/ProgressBar.tsx

@@ -12,7 +12,7 @@ export interface ProgressBarProps extends ViewProps {
   /**
    * Set intent for your progress.
    */
-  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
   /**
    * Additional style.
    */

package/src/components/Progress/ProgressCircle.tsx

@@ -21,7 +21,7 @@ export interface ProgressCircleProps extends ViewProps {
   /**
    * Set intent for your progress.
    */
-  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
   /**
    * Additional style.
    */

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -22,7 +22,7 @@ exports[`Progress.Bar renders correctly 1`] = `
     style={
       Object {
         "alignSelf": "stretch",
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderBottomRightRadius": 999,
         "borderTopRightRadius": 999,
         "flex": 1,
@@ -60,7 +60,7 @@ exports[`Progress.Bar renders correctly with intent 1`] = `
     style={
       Object {
         "alignSelf": "stretch",
-        "backgroundColor": "#5ace7d",
+        "backgroundColor": "#017d6d",
         "borderBottomRightRadius": 999,
         "borderTopRightRadius": 999,
         "flex": 1,
@@ -108,7 +108,7 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#001f23",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 72,
                 "width": 72,
@@ -200,7 +200,7 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#001f23",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 72,
                 "width": 72,
@@ -268,7 +268,7 @@ exports[`Progress.Circle renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 5.3999999999999995,
             "left": 33.3,
@@ -305,7 +305,7 @@ exports[`Progress.Circle renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 5.3999999999999995,
               "left": 33.3,
@@ -395,7 +395,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#5ace7d",
+                "backgroundColor": "#017d6d",
                 "borderRadius": 999,
                 "height": 72,
                 "width": 72,
@@ -487,7 +487,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#5ace7d",
+                "backgroundColor": "#017d6d",
                 "borderRadius": 999,
                 "height": 72,
                 "width": 72,
@@ -555,7 +555,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#5ace7d",
+            "backgroundColor": "#017d6d",
             "borderRadius": 999,
             "height": 5.3999999999999995,
             "left": 33.3,
@@ -592,7 +592,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#5ace7d",
+              "backgroundColor": "#017d6d",
               "borderRadius": 999,
               "height": 5.3999999999999995,
               "left": 33.3,

package/src/components/Progress/types.ts

@@ -1 +1,7 @@
-export type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type ThemeIntent =
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'archived';

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

@@ -2,13 +2,10 @@
 
 exports[`rendering renders correctly when checked 1`] = `
 <View
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
   accessible={true}
+  collapsable={false}
   focusable={true}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -17,17 +14,14 @@ exports[`rendering renders correctly when checked 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#d9d1df",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "opacity": 1,
-        "padding": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ece8ef",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
 >
   <View
@@ -107,13 +101,10 @@ exports[`rendering renders correctly when checked 1`] = `
 
 exports[`rendering renders correctly when not checked 1`] = `
 <View
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
   accessible={true}
+  collapsable={false}
   focusable={true}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -122,17 +113,14 @@ exports[`rendering renders correctly when not checked 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "opacity": 1,
-        "padding": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ffffff",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
 >
   <View

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -3,13 +3,10 @@
 exports[`rendering renders correctly 1`] = `
 <View>
   <View
-    accessibilityState={
-      Object {
-        "disabled": false,
-      }
-    }
     accessible={true}
+    collapsable={false}
     focusable={true}
+    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -18,17 +15,14 @@ exports[`rendering renders correctly 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "#ffffff",
-          "borderRadius": 4,
-          "flexDirection": "row",
-          "opacity": 1,
-          "padding": 16,
-        },
-        undefined,
-      ]
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      }
     }
   >
     <View
@@ -100,13 +94,10 @@ exports[`rendering renders correctly 1`] = `
     }
   />
   <View
-    accessibilityState={
-      Object {
-        "disabled": false,
-      }
-    }
     accessible={true}
+    collapsable={false}
     focusable={true}
+    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -115,17 +106,14 @@ exports[`rendering renders correctly 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "#ffffff",
-          "borderRadius": 4,
-          "flexDirection": "row",
-          "opacity": 1,
-          "padding": 16,
-        },
-        undefined,
-      ]
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      }
     }
   >
     <View
@@ -197,13 +185,10 @@ exports[`rendering renders correctly 1`] = `
     }
   />
   <View
-    accessibilityState={
-      Object {
-        "disabled": false,
-      }
-    }
     accessible={true}
+    collapsable={false}
     focusable={true}
+    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -212,17 +197,14 @@ exports[`rendering renders correctly 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "#d9d1df",
-          "borderRadius": 4,
-          "flexDirection": "row",
-          "opacity": 1,
-          "padding": 16,
-        },
-        undefined,
-      ]
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ece8ef",
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      }
     }
   >
     <View

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

@@ -15,9 +15,7 @@ const ExampleList = ({
       }}
       refreshControl={refreshControl}
     >
-      <Text>
-        Pull down to see RefreshControl indicator
-      </Text>
+      <Text>Pull down to see RefreshControl indicator</Text>
     </ScrollView>
   );
 };

package/src/components/RefreshControl/index.tsx

@@ -5,8 +5,10 @@ import {
 } from 'react-native';
 import { useTheme } from '../../theme';
 
-export interface RefreshControlProps
-  extends Omit<NativeRefreshControlProps, 'colors' | 'tintColor'> {}
+export type RefreshControlProps = Omit<
+  NativeRefreshControlProps,
+  'colors' | 'tintColor'
+>;
 
 const RefreshControl = ({ ...props }: RefreshControlProps) => {
   const theme = useTheme();

package/src/components/RichTextEditor/MentionList.tsx

@@ -21,11 +21,18 @@ export interface MentionListProps<TMetaData = unknown> {
    */
   render: (
     searchText: string,
-    onSelect: (id: string, name: string, options?: OnSelectOptionsType<TMetaData>) => void
+    onSelect: (
+      id: string,
+      name: string,
+      options?: OnSelectOptionsType<TMetaData>
+    ) => void
   ) => JSX.Element;
 }
 
-const MentionList = <TMetaData, >({ name: eventPrefix, render }: MentionListProps<TMetaData>) => {
+const MentionList = <TMetaData,>({
+  name: eventPrefix,
+  render,
+}: MentionListProps<TMetaData>) => {
   const theme = useTheme();
   const [search, setSearch] = useState<string>('');
   const [target, setTarget] = useState<string | null>(null);
@@ -68,7 +75,9 @@ const MentionList = <TMetaData, >({ name: eventPrefix, render }: MentionListProp
           color: theme.colors.secondary,
           borderRadius: theme.__hd__.richTextEditor.radii.mention,
           padding: highlighted ? theme.__hd__.richTextEditor.space.mention : 0,
-          background: highlighted ? theme.colors.lightHighlightedSurface : 'transparent',
+          background: highlighted
+            ? theme.colors.lightHighlightedSurface
+            : 'transparent',
           marginTop: theme.space.xxsmall,
           marginBottom: theme.space.xxsmall,
           display: 'inline-flex',

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -105,7 +105,6 @@ export interface RichTextEditorProps {
   forwardedRef?: Ref<RichTextEditorRef>;
 }
 
-const noop = () => {};
 const defaultValue: EditorValue = [
   {
     type: 'paragraph',
@@ -117,8 +116,8 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   autoFocus = true,
   name,
   placeholder = '',
-  onChange = noop,
-  onCursorChange = noop,
+  onChange,
+  onCursorChange,
   error = '',
   style = {},
   label,
@@ -139,9 +138,6 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     if (error) {
       return 'error';
     }
-    if (isFocused) {
-      return 'focused';
-    }
     if (isEmptyValue) {
       return 'filled';
     }
@@ -294,7 +290,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
 
           break;
         case '@hero-editor/webview/cursor-change':
-          onCursorChange(messageData);
+          onCursorChange?.(messageData);
 
           break;
 
@@ -312,7 +308,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   return (
     <StyledContainer testID={testID}>
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} />
+        <StyledBorderBackDrop themeVariant={variant} themeFocused={isFocused} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (

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

@@ -28,7 +28,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
       style={
         Array [
           Object {
-            "borderColor": "#f46363",
+            "borderColor": "#de350b",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -40,6 +40,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           undefined,
         ]
       }
+      themeFocused={false}
       themeVariant="error"
     />
     <View
@@ -239,7 +240,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               },
               Array [
                 Object {
-                  "color": "#f46363",
+                  "color": "#de350b",
                   "fontSize": 12,
                   "marginLeft": 4,
                 },
@@ -288,7 +289,7 @@ exports[`RichTextEditor should render correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#f46363",
+            "borderColor": "#de350b",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -300,6 +301,7 @@ exports[`RichTextEditor should render correctly 1`] = `
           undefined,
         ]
       }
+      themeFocused={false}
       themeVariant="error"
     />
     <View
@@ -498,7 +500,7 @@ exports[`RichTextEditor should render correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#f46363",
+                  "color": "#de350b",
                   "fontSize": 12,
                   "marginLeft": 4,
                 },

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

@@ -58,7 +58,7 @@ exports[`SectionHeading allows to customise the icon 1`] = `
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,