@hero-design/rn 8.85.0 → 8.87.1

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

@@ -50,7 +50,7 @@ exports[`StyledCard should render correctly 1`] = `
 </View>
 `;
 
-exports[`StyledItemWrapper should render correctly 1`] = `
+exports[`StyledItemWrapper should render correctly with gap=medium 1`] = `
 <View
   style={
     {
@@ -67,6 +67,91 @@ exports[`StyledItemWrapper should render correctly 1`] = `
         undefined,
       ]
     }
+    themeGap="medium"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledItemWrapper should render correctly with gap=small 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "padding": 4,
+        },
+        undefined,
+      ]
+    }
+    themeGap="small"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledItemWrapper should render correctly with gap=xsmall 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "padding": 2,
+        },
+        undefined,
+      ]
+    }
+    themeGap="xsmall"
   />
   <View
     pointerEvents="box-none"

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -38,9 +38,13 @@ import * as Events from './utils/events';
 import { postMessage, requestBlurEditor } from './utils/rnWebView';
 import type { WebViewEventMessage } from './utils/rnWebView';
 import { LABEL_ANIMATION_DURATION } from '../TextInput';
+import { TextUnit } from './types';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;
+  insertNodes: (nodes: Record<string, unknown>[]) => void;
+  deleteBackward: (unit?: TextUnit) => void;
+  setReadOnly: (readOnly: boolean) => void;
 }
 
 export type EditorValue = {
@@ -236,7 +240,32 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     }
   }, [isFocused]);
 
-  useImperativeHandle(forwardedRef, () => ({ requestBlur }), [requestBlur]);
+  const insertNodes = useCallback((nodes: Record<string, unknown>[]) => {
+    postMessageToWebview({
+      type: '@hero-editor/webview/editor-insert-nodes',
+      data: { nodes },
+    });
+  }, []);
+
+  const deleteBackward = useCallback((unit?: TextUnit) => {
+    postMessageToWebview({
+      type: '@hero-editor/webview/editor-delete-backward',
+      data: { unit },
+    });
+  }, []);
+
+  const setReadOnly = useCallback((readOnly: boolean) => {
+    postMessageToWebview({
+      type: '@hero-editor/webview/editor-read-only',
+      data: { readOnly },
+    });
+  }, []);
+
+  useImperativeHandle(
+    forwardedRef,
+    () => ({ requestBlur, insertNodes, deleteBackward, setReadOnly }),
+    [requestBlur, deleteBackward, insertNodes, setReadOnly]
+  );
 
   /* Forward events from Toolbar and MentionList to webview */
   useEffect(() => {

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

@@ -58,6 +58,7 @@ jest.mock('../utils/rnWebView', () => {
 /* eslint-disable */
 /// @ts-ignore
 import { postMessageMock } from '../utils/rnWebView';
+import { RichTextEditorRef } from "../../../../types";
 /* eslint-enable */
 
 describe('RichTextEditor', () => {
@@ -205,6 +206,64 @@ describe('RichTextEditor', () => {
     });
   });
 
+  describe('RichTextEditorRef methods', () => {
+    let ref: React.RefObject<RichTextEditorRef>;
+
+    beforeEach(() => {
+      ref = React.createRef<RichTextEditorRef>();
+      renderWithTheme(
+        <RichTextEditor
+          name="rich-text-editor"
+          label="Rich Text Editor"
+          onChange={jest.fn()}
+          onCursorChange={jest.fn()}
+          error="this is error"
+          style={{ backgroundColor: 'yellow' }}
+          ref={ref}
+        />
+      );
+    });
+
+    it('should call insertNodes', () => {
+      const nodes = [{ text: 'test' }];
+
+      act(() => {
+        ref.current?.insertNodes(nodes);
+      });
+
+      expect(postMessageMock).toHaveBeenCalledWith({
+        data: { nodes },
+        type: '@hero-editor/webview/editor-insert-nodes',
+      });
+    });
+
+    it('should call deleteBackward', () => {
+      const unit = 'word';
+
+      act(() => {
+        ref.current?.deleteBackward(unit);
+      });
+
+      expect(postMessageMock).toHaveBeenCalledWith({
+        data: { unit },
+        type: '@hero-editor/webview/editor-delete-backward',
+      });
+    });
+
+    it('should call setReadOnly', () => {
+      const readOnly = true;
+
+      act(() => {
+        ref.current?.setReadOnly(readOnly);
+      });
+
+      expect(postMessageMock).toHaveBeenCalledWith({
+        data: { readOnly },
+        type: '@hero-editor/webview/editor-read-only',
+      });
+    });
+  });
+
   describe('postMessageToWebview', () => {
     const onChangeMock = jest.fn();
     const onCursorChangeMock = jest.fn();

package/src/components/RichTextEditor/types.ts

@@ -7,3 +7,5 @@ export type ToolbarButtonName =
   | 'headingOne'
   | 'headingTwo'
   | '|';
+
+export type TextUnit = 'character' | 'word' | 'line' | 'block';

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -254,22 +254,27 @@ exports[`theme returns correct theme object 1`] = `
           "filledDanger": "#fcebe7",
           "filledPrimary": "#33144d",
           "filledSecondary": "#33144d",
+          "filledWhite": "#ece8ef",
           "outlineDanger": "#fcebe7",
+          "outlineWhite": "#33144d",
           "outlinedPrimary": "#ece8ef",
           "outlinedSecondary": "#ece8ef",
           "textDanger": "#fcebe7",
           "textPrimary": "#ece8ef",
           "textSecondary": "#f6f6f7",
+          "textWhite": "#33144d",
         },
         "pressedText": {
           "danger": "#f68282",
           "primary": "#33144d",
           "secondary": "#001f23",
+          "white": "#33144d",
         },
         "primary": "#401960",
         "secondary": "#4d6265",
         "textLoadingBackground": "#ece8ef",
         "utilityBackground": "#ffffff",
+        "white": "#ffffff",
       },
       "fontSize": {
         "default": 18,
@@ -361,7 +366,11 @@ exports[`theme returns correct theme object 1`] = `
         "card": 8,
       },
       "space": {
-        "carouselItemSpacing": 8,
+        "carouselItemSpacing": {
+          "medium": 8,
+          "small": 4,
+          "xsmall": 2,
+        },
         "contentContainerPaddingHorizontal": 24,
         "pageControlMarginTop": 16,
       },

package/src/theme/components/button.ts

@@ -47,6 +47,7 @@ const getButtonTheme = (theme: GlobalTheme) => {
     primary: theme.colors.primary,
     secondary: theme.colors.mutedOnDefaultGlobalSurface,
     danger: theme.colors.onErrorSurface,
+    white: theme.colors.defaultGlobalSurface,
     defaultText: theme.colors.onDefaultGlobalSurface,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
@@ -58,17 +59,21 @@ const getButtonTheme = (theme: GlobalTheme) => {
       filledPrimary: theme.colors.pressedSurface,
       filledSecondary: theme.colors.pressedSurface,
       filledDanger: theme.colors.errorSurface,
+      filledWhite: theme.colors.highlightedSurface,
       outlinedPrimary: theme.colors.highlightedSurface,
       outlinedSecondary: theme.colors.highlightedSurface,
       outlineDanger: theme.colors.errorSurface,
+      outlineWhite: theme.colors.pressedSurface,
       textPrimary: theme.colors.highlightedSurface,
       textSecondary: theme.colors.neutralGlobalSurface,
       textDanger: theme.colors.errorSurface,
+      textWhite: theme.colors.pressedSurface,
     },
     pressedText: {
       primary: theme.colors.pressedSurface,
       secondary: theme.colors.onDefaultGlobalSurface,
       danger: theme.colors.mutedError,
+      white: theme.colors.pressedSurface,
     },
   };
 

package/src/theme/components/cardCarousel.ts

@@ -3,8 +3,12 @@ import type { GlobalTheme } from '../global';
 const getCardCarouselTheme = (theme: GlobalTheme) => {
   const space = {
     pageControlMarginTop: theme.space.medium,
-    carouselItemSpacing: theme.space.small,
     contentContainerPaddingHorizontal: theme.space.large,
+    carouselItemSpacing: {
+      xsmall: theme.space.xxsmall,
+      small: theme.space.xsmall,
+      medium: theme.space.small,
+    },
   };
 
   const colors = {